/* ============================================================
   sumdf-iviu-theme.css  –  iViu brand theme for SumDF UI
   Matches orc-iviu-theme.css design language
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --orc-brand:        #2189D0;
  --orc-brand-dark:   #1a72b8;
  --orc-ink:          #0f172a;
  --orc-ink-muted:    #475569;
  --orc-surface:      #f8fafc;
  --orc-card:         #ffffff;
  --orc-accent:       #F07F21;
  --orc-input-bg:     #ffffff;
  --orc-input-border: #b8d8f0;
}

/* ── Base typography ────────────────────────────────────────────────────── */
html {
  font-size: 16px;
}

body, html {
  font-family: "Roboto", "Gill Sans", "Trebuchet MS", sans-serif;
  color: var(--orc-ink);
  background: var(--orc-surface) !important;
}

/* Content containers */
#nav_container {
  padding-top: 68px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override util.css fs-* classes */
.fs-20 { font-size: 15px !important; }
.fs-24 { font-size: 16px !important; }
.fs-18 { font-size: 14px !important; }
.fs-16 { font-size: 13px !important; }
.fs-15 { font-size: 13px !important; }

/* Compact form controls */
.form-control {
  font-size: 0.8rem !important;
  padding: 0.25rem 0.5rem !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
  line-height: 1.5 !important;
}

/* Compact buttons */
.btn {
  font-size: 0.8rem !important;
  padding: 0.25rem 0.65rem !important;
  line-height: 1.5 !important;
}

/* select2 */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.5rem + 2px) !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.5rem) !important;
  font-size: 0.8rem !important;
  padding-left: 0.5rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.5rem) !important;
}

/* Table cells */
.table td, .table th {
  padding: 0.3rem 0.6rem !important;
  white-space: nowrap;
}
.table thead th {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.6rem !important;
}

/* ── DataTables sort indicators — match Partner Status list style ──────── */
table.dataTable > thead > tr > th {
  background: #2189D0 !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border-bottom: none !important;
  white-space: nowrap;
}
table.dataTable > thead > tr > th:not(.sorting_disabled) {
  padding-right: 1.6em !important;
}
/* replace ↑↓ pseudo-element arrows with ▲▼ */
table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::before,
table.dataTable > thead .sorting_asc_disabled::before,
table.dataTable > thead .sorting_desc_disabled::before { content: "\25b2"; font-size: 0.65em; opacity: 0.35; right: 0.9em; }
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::after,
table.dataTable > thead .sorting_asc_disabled::after,
table.dataTable > thead .sorting_desc_disabled::after  { content: "\25bc"; font-size: 0.65em; opacity: 0.35; right: 0.3em; }
table.dataTable > thead .sorting_asc::before  { opacity: 0.85; }
table.dataTable > thead .sorting_desc::after  { opacity: 0.85; }
table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc { text-decoration: underline; }
table.dataTable > thead .sorting_asc_disabled::before,
table.dataTable > thead .sorting_desc_disabled::after  { opacity: 0; }
table.dataTable > thead > tr > th.sorting:hover,
table.dataTable > thead > tr > th.sorting_asc:hover,
table.dataTable > thead > tr > th.sorting_desc:hover { background: #1a72b8 !important; cursor: pointer; user-select: none; }

/* Clickable table rows */
#site_table tbody tr,
#batch_table tbody tr,
#task_table tbody tr,
#kpi_table tbody tr,
#manu_table tbody tr {
  cursor: pointer;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
#navbar.navbar {
  background:    #ffffff !important;
  border-bottom: 2px solid var(--orc-brand) !important;
  box-shadow:    0 1px 6px rgba(15, 23, 42, 0.10) !important;
  padding:       0 !important;
  min-height:    52px;
}

.orc-nav-inner {
  display:     flex;
  align-items: center;
  width:       100%;
  min-height:  52px;
}

/* ── Left: logo + app title ─────────────────────────────────────────────── */
.orc-nav-logo {
  display:      flex;
  align-items:  center;
  gap:          12px;
  padding:      0 16px;
  border-right: 1px solid rgba(33, 137, 208, 0.15);
  flex-shrink:  0;
  min-height:   52px;
}

#header_logo {
  height: 40px;
  width: auto;
  display: block;
}

.orc-nav-appname {
  font-size:      1.2rem;
  font-weight:    600;
  color:          var(--orc-ink) !important;
  white-space:    nowrap;
  letter-spacing: 0.01em;
}

/* ── Centre: navigation dropdown + breadcrumb buttons ───────────────────── */
.orc-nav-centre {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     0 16px;
  flex:        1 1 auto;
  min-width:   0;
}

/* ── Right: user name + Refresh + Sign out ───────────────────────────────── */
.orc-nav-right {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     0 16px;
  flex-shrink: 0;
  margin-left: auto;
  border-left: 1px solid rgba(33, 137, 208, 0.12);
}

#user_name_display {
  font-size:   0.78rem;
  font-weight: 500;
  color:       var(--orc-ink-muted) !important;
  white-space: nowrap;
}

/* Nav icon-only buttons */
.orc-nav-icon-btn.btn {
  background:    transparent !important;
  border:        1px solid rgba(33, 137, 208, 0.22) !important;
  border-radius: 0.45rem !important;
  color:         var(--orc-ink-muted) !important;
  width:         32px !important;
  height:        32px !important;
  padding:       0 !important;
  line-height:   30px !important;
  text-align:    center !important;
  transition:    background 0.15s, color 0.15s !important;
  box-shadow:    none !important;
}

.orc-nav-icon-btn.btn:hover {
  background:   rgba(33, 137, 208, 0.09) !important;
  border-color: var(--orc-brand) !important;
  color:        var(--orc-ink) !important;
}

/* Nav text+icon buttons */
.orc-nav-text-btn.btn {
  background:    transparent !important;
  border:        1px solid rgba(33, 137, 208, 0.25) !important;
  border-radius: 0.45rem !important;
  color:         var(--orc-ink-muted) !important;
  height:        32px !important;
  padding:       0 10px !important;
  font-size:     0.78rem !important;
  font-weight:   500 !important;
  white-space:   nowrap !important;
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           5px !important;
  transition:    background 0.15s, border-color 0.15s, color 0.15s !important;
  box-shadow:    none !important;
}

/* ensure d-none always wins regardless of button class specificity */
.btn.d-none {
  display: none !important;
}

/* ── Unified DataTable toolbar (Sites / Batches / Manufacturers) ─────────── */
.dt-toolbar {
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

.dt-toolbar-title {
  font-size: 0.82rem !important;
  font-weight: 600;
  color: var(--orc-ink);
  white-space: nowrap;
}

.dt-toolbar-label {
  font-size: 0.75rem !important;
  color: var(--orc-ink-muted);
  white-space: nowrap;
}

.dt-toolbar-btn.btn {
  font-size: 0.72rem !important;
  padding: 2px 8px !important;
  height: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* override nav_header_button height when inside a toolbar */
.dt-toolbar .nav_header_button.btn {
  height: 24px !important;
  font-size: 0.72rem !important;
  padding: 2px 8px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* DataTables length + filter injected into toolbar */
#site_len_slot, #batch_len_slot, #manu_len_slot,
#site_filter_slot, #batch_filter_slot, #manu_filter_slot,
#site_btn_slot, #batch_btn_slot, #task_btn_slot, #kpi_btn_slot,
#task_filter_slot, #kpi_filter_slot {
  display: inline-flex;
  align-items: center;
}

/* DataTables Buttons (CSV/Excel) inside toolbar slots */
.dt-buttons .btn {
  font-size:     0.72rem !important;
  height:        24px !important;
  padding:       2px 8px !important;
  line-height:   1 !important;
  border:        1px solid rgba(15, 23, 42, 0.25) !important;
  border-radius: 0.3rem !important;
  background:    transparent !important;
  color:         var(--orc-ink-muted) !important;
  font-weight:   500 !important;
}
.dt-buttons .btn:hover {
  border-color:     rgba(15, 23, 42, 0.4) !important;
  background-color: rgba(15, 23, 42, 0.06) !important;
  color:            var(--orc-ink) !important;
}

/* filter inputs for new slots */
#task_filter_slot input, #kpi_filter_slot input,
#site_filter_slot input, #batch_filter_slot input, #manu_filter_slot input {
  font-size:     0.72rem !important;
  padding:       2px 6px !important;
  height:        24px !important;
  border:        1px solid var(--orc-input-border) !important;
  border-radius: 0.3rem !important;
  background:    var(--orc-input-bg) !important;
  color:         var(--orc-ink) !important;
  outline:       none !important;
  font-weight:   500 !important;
}
#task_filter_slot input:focus,
#kpi_filter_slot input:focus,
#site_filter_slot input:focus,
#batch_filter_slot input:focus,
#manu_filter_slot input:focus {
  border-color: var(--orc-brand) !important;
  box-shadow:   0 0 0 2px rgba(33,137,208,0.15) !important;
}

/* Force DataTables filter label inline — suppress the <br> DataTables inserts */
#task_filter_slot .dataTables_filter label,
#kpi_filter_slot .dataTables_filter label,
#site_filter_slot .dataTables_filter label,
#batch_filter_slot .dataTables_filter label,
#manu_filter_slot .dataTables_filter label {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         4px !important;
  font-size:   0.72rem !important;
  font-weight: 500 !important;
  color:       var(--orc-ink-muted) !important;
  margin:      0 !important;
  white-space: nowrap !important;
}
#task_filter_slot .dataTables_filter label br,
#kpi_filter_slot .dataTables_filter label br,
#site_filter_slot .dataTables_filter label br,
#batch_filter_slot .dataTables_filter label br,
#manu_filter_slot .dataTables_filter label br {
  display: none !important;
}

.orc-nav-text-btn.btn:hover {
  background:   rgba(33, 137, 208, 0.09) !important;
  border-color: var(--orc-brand) !important;
  color:        var(--orc-ink) !important;
}

/* ── Nav header buttons (dropdown, breadcrumb, filter pills) ────────────── */
.nav_header_button.btn {
  background:    transparent !important;
  color:         var(--orc-ink-muted) !important;
  border:        1px solid rgba(33, 137, 208, 0.22) !important;
  border-radius: 0.45rem !important;
  font-size:     0.78rem !important;
  font-weight:   500 !important;
  padding:       3px 10px !important;
  height:        28px !important;
  line-height:   1 !important;
  transition:    background 0.15s, border-color 0.15s, color 0.15s !important;
  box-shadow:    none !important;
}

.nav_header_button.btn:hover {
  background:    rgba(33, 137, 208, 0.09) !important;
  border-color:  var(--orc-brand) !important;
  color:         var(--orc-ink) !important;
}

.nav_header_button.btn.active,
.nav_header_button.btn:active {
  background:    var(--orc-brand) !important;
  border-color:  var(--orc-brand) !important;
  color:         #ffffff !important;
  box-shadow:    0 2px 8px rgba(33, 137, 208, 0.35) !important;
}

/* ── Primary buttons ────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--orc-brand) !important;
  border-color:     var(--orc-brand) !important;
  color:            #ffffff !important;
  font-weight:      600 !important;
  letter-spacing:   0.02em !important;
  transition:       background 0.15s, border-color 0.15s !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--orc-brand-dark) !important;
  border-color:     var(--orc-brand-dark) !important;
}

/* ── Secondary buttons ──────────────────────────────────────────────────── */
.btn-secondary:not(.nav_header_button) {
  background-color: transparent !important;
  border:           1px solid rgba(15, 23, 42, 0.25) !important;
  color:            var(--orc-ink-muted) !important;
  font-weight:      500 !important;
  transition:       background 0.15s, border-color 0.15s, color 0.15s !important;
}

.btn-secondary:not(.nav_header_button):hover {
  background-color: rgba(15, 23, 42, 0.06) !important;
  border-color:     rgba(15, 23, 42, 0.4) !important;
  color:            var(--orc-ink) !important;
}

/* ── Danger button ──────────────────────────────────────────────────────── */
.btn-danger {
  background-color: #dc2626 !important;
  border-color:     #dc2626 !important;
  color:            #ffffff !important;
}

.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color:     #b91c1c !important;
}

/* ── Login page button ──────────────────────────────────────────────────── */
.login100-form-btn {
  background-color: var(--orc-brand) !important;
  border-radius:    0.5rem !important;
  font-family:      "Roboto", Ubuntu-Bold, sans-serif !important;
  letter-spacing:   0.04em !important;
}

.login100-form-btn:hover {
  background-color: var(--orc-brand-dark) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table thead th {
  background:     var(--orc-brand) !important;
  color:          #ffffff !important;
  border-bottom:  none !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(33, 137, 208, 0.03) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff !important;
}

.table tbody tr:hover td {
  background: rgba(33, 137, 208, 0.07) !important;
}

.table td, .table th {
  border-bottom:  1px solid rgba(15, 23, 42, 0.07) !important;
  color:          var(--orc-ink) !important;
  vertical-align: middle !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 0.08rem !important;
  padding: 0.08rem 0.35rem !important;
  line-height: 1.4 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:    var(--orc-brand) !important;
  border-color:  var(--orc-brand) !important;
  color:         #ffffff !important;
  border-radius: 0.35rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background:    rgba(33, 137, 208, 0.12) !important;
  border-color:  var(--orc-brand) !important;
  color:         var(--orc-brand) !important;
  border-radius: 0.35rem !important;
}

/* Row highlight / select */
tr.highlight, tr.highlight td {
  background-color: rgba(33, 137, 208, 0.08) !important;
}

tr.select, tr.select td {
  background-color: rgba(33, 137, 208, 0.22) !important;
}

/* ── Form controls ──────────────────────────────────────────────────────── */
.form-control {
  background:    var(--orc-input-bg) !important;
  border-color:  #c8d9ea !important;
  color:         var(--orc-ink) !important;
  border-radius: 0.4rem !important;
  transition:    border-color 0.15s !important;
  font-family:   "Roboto", Ubuntu-Regular, sans-serif !important;
}

.form-control:focus {
  border-color: var(--orc-brand) !important;
  box-shadow:   0 0 0 0.18rem rgba(33, 137, 208, 0.2) !important;
}

.form-control:disabled {
  background: rgba(15, 23, 42, 0.04) !important;
  color:      var(--orc-ink-muted) !important;
}

/* ── Main content area ───────────────────────────────────────────────────── */
#nav_container .white {
  background: var(--orc-card) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem 1.25rem !important;
}

/* ── Dialog / modal cards ───────────────────────────────────────────────── */
#busy_container .white,
#new_batch_container .white,
#site_settings_form_container .white,
#site_container .white,
#prefix_container .white {
  border-radius: 0.9rem !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22) !important;
}

/* ── Footer text ────────────────────────────────────────────────────────── */
#footer, #login_footer {
  color: var(--orc-ink-muted) !important;
  font-size: 0.82rem !important;
}

/* ── btn-group "radio" toggle tabs ──────────────────────────────────────── */
.btn-group-toggle .btn {
  border-radius: 0.4rem !important;
  font-weight:   500 !important;
}

.btn-group-toggle .btn-secondary.active {
  background-color: var(--orc-brand) !important;
  border-color:     var(--orc-brand) !important;
  color:            #ffffff !important;
}

/* ── Section headings in content views ──────────────────────────────────── */
.sumdf-section-title {
  font-size:      0.82rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--orc-brand);
  padding-bottom: 0.4rem;
  border-bottom:  2px solid var(--orc-brand);
  margin-bottom:  1rem;
}

/* Status bar text (batch/task counts) */
#batch_status,
#task_status {
  font-size:   0.85rem !important;
  font-weight: 600;
  color:       var(--orc-ink-muted) !important;
}

/* Batch expanded row */
.batch-expand-row td {
  background: rgba(33, 137, 208, 0.04) !important;
  font-size: 0.75rem !important;
}

/* dot status indicators */
.dot-green { color: #16a34a; }
.dot-red   { color: #dc2626; }