/* =========================================================
   NEW: HARDEN HEIGHT CHAIN (Dash root wrappers)
   - does NOT change the look
   - ensures 100vh logic works reliably on all Dash versions
   ========================================================= */
html, body {
  height: 100%;
  margin: 0;
}

/* Dash/React wrapper nodes differ by version; include all */
#react-entry-point,
#_dash-app-content,
#_dash-app-content > div {
  height: 100%;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27260%27%20height%3D%27140%27%20viewBox%3D%270%200%20260%20140%27%3E%3Ctext%20x%3D%2750%25%27%20y%3D%2750%25%27%20dominant-baseline%3D%27middle%27%20text-anchor%3D%27middle%27%20fill%3D%27%23177da5%27%20font-size%3D%2728%27%20fill-opacity%3D%270.16%27%20font-family%3D%27Segoe%20UI%2C%20Arial%2C%20sans-serif%27%20transform%3D%27rotate(-20%20130%2070)%27%3ESensiGrow%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 140px;
  background-position: 0 0;
}

/* Keep page scrolling inside #page-content (prevents double scrollbar) */
body {
  overflow: hidden;
}

/* Global page background is theme-specific and configured in
   assets/themes/theme_*.css via the .sg-theme-* classes. */

.sg-main-content { min-height: 0; }
.sg-page-content {
  overflow-y: auto;
  height: calc(100vh - 56px); /* navbar height */
  min-height: 0;
}



/* Top navigation header bar */
.sg-header-navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  /* Vertical padding controls how tall the header feels */
  padding-top: 0.05rem;  /* increase to make header taller */
  padding-bottom: 0.05rem;
  border-bottom: 1px solid #bfc4cf;
}

/* Logo inside the common header bar (not login screen) */
.sg-header-navbar .sg-logo {
  max-height: 60px;      /* increase to make header logo larger */
}

/* Product name next to the logo in the header */
.sg-company-name {
  font-weight: bold; /* Makes text bold */
  font-family: serif;
  font-size: 270%;
}

/* Current page title in the header */
.sg-page-title {
  font-weight: 600;      /* bolder */
  font-size: 1.3rem;     /* larger text */
  text-transform: capitalize; /* first letter of each word upper */
  font-style: italic;         /* italic text */
  letter-spacing: 0.05em;
}

/* Container holding the current page icon + title in the header.
   - margin-left: controls gap from the logo block.
   - column-gap: controls gap between the icon and the title. */
.sg-header-page-meta {
  display: flex;
  align-items: center;
  margin-left: 3rem;   /* adjust: space from logo to icon/title */
  column-gap: 0.5rem;    /* adjust: space between icon and title */
}

/* Icon buttons */
.sg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
  min-width: 0;
  line-height: 1;
  font-size: 0;          /* avoid text height affecting size */
  width: 24px;           /* smaller clickable area */
  height: 24px;
  background-color: transparent;
  border: none;          /* no button border */
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.sg-icon-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
  background-color: transparent !important; /* override Bootstrap hover */
  box-shadow: none;
}

/* Icons */
.sg-icon {
  width: 36px;           /* adjust: icon width */
  height: 36px;          /* adjust: icon height */
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.sg-icon:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}


/* Left sidebar container (expanded state) */
.sg-sidebar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  width: 260px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #bfc4cf;
}

/* Collapsed sidebar state toggled by the sidebar-toggle callback */
.sg-sidebar.collapsed {
  width: 64px;                 /* sidebar width when collapsed */
}

/* Hide menu text when sidebar is collapsed, keep only icons */
.sg-sidebar.collapsed .sg-sidebar-nav a span:last-child {
  display: none;
}

/* Small hamburger button at the top of the sidebar */
.sg-sidebar-toggle {
  border: none;
  background: transparent;
  font-size: 1.2rem;
}

/* Sidebar links (both normal and active) */
.sg-sidebar-nav a {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;        /* vertical & horizontal padding of items */
  text-decoration: none;
}

/* Sidebar icon images when using custom assets */
.sg-sidebar-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;          /* keep aspect ratio inside the box */
}

/* Active sidebar entry highlighting */
.sg-sidebar-nav a.active {
  /* active row styles are theme-specific */
}

/* Main content area to the right of the sidebar */
.sg-main-content {
  flex: 1 1 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27260%27%20height%3D%27140%27%20viewBox%3D%270%200%20260%20140%27%3E%3Ctext%20x%3D%2750%25%27%20y%3D%2750%25%27%20dominant-baseline%3D%27middle%27%20text-anchor%3D%27middle%27%20fill%3D%27%23177da5%27%20font-size%3D%2728%27%20fill-opacity%3D%270.16%27%20font-family%3D%27Segoe%20UI%2C%20Arial%2C%20sans-serif%27%20transform%3D%27rotate(-20%20130%2070)%27%3ESensiGrow%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 140px;
  background-position: 0 0;
}



/* =========================================================
   Root application shell fills the viewport height
   OLD: .sg-app-shell only
   NEW: add ID aliases for your new layout ids
   ========================================================= */
.sg-app-shell,
#shell-view,
#shell-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Sidebar + main content row should fill remaining height under header */
.sg-shell-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;               /* allow children to manage their own scroll */
}

/* Page content area scrolls when there is overflow */
#page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;     
  overflow-x: hidden;
}

/* Full-screen login layout container */
.sg-login-layout,
#login-view,
#login-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Move login form slightly down from the very top */
  padding-top: 65px;
  background-size: cover;       /* cover the full viewport */
  background-position: center;  /* center the image */
  background-repeat: no-repeat;
}

/* Login background image */
.sg-login-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 65px;

  /* 👇 background image */
  background-image: url("/assets/backgrounds/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Login page logo size (does not affect header logo) */
.sg-login-layout .sg-logo {
  max-height: 70px;            /* lower to shrink logo on login card */
}

/* Small logo shown in the login card header next to 'Sign in' */
.sg-logo-login {
  height: 3.5rem;
  width: auto;
}

.sg-login-header {
  background-color: #eaecdf;   /* pick any color */
  /* padding: 0.75rem 1rem;
  border-radius: 0.5rem; */
}

/* Toast container for small popup messages (bottom-right) */
.sg-toast-container {
  z-index: 1080;               /* keep above other content but below modals */
}

/* Global action buttons group in the header */
.sg-global-actions-btn-group {
  display: inline-flex;
  gap: 0.2rem;           /* space between items inside each group */
  align-items: center;   /* vertical alignment */
}

/* Row that holds both filter groups in the header */
.sg-global-actions-row {
  display: flex;
  align-items: center;
  column-gap: 1rem;      /* space between the two groups */
  margin-left: 1rem;     /* move away from logo */
}

/* Header plant-unit filter dropdown: wider and aligned nicely */
.sg-plant-filter-dropdown {
  min-width: 220px;        /* make the dropdown wider */
  margin-bottom: 0;        /* remove extra bottom space in header */
}

/* Modal title style for consistency */
.sg-modal-title {
  font-weight: 600;      /* bolder */
  font-size: 1.3rem;     /* larger text */
  text-transform: capitalize; /* first letter of each word upper */
  font-style: italic;         /* italic text */
  letter-spacing: 0.05em;
}
.sg-modal-header {
  border-bottom: 1px solid #8fa2cc;
  padding: 0.75rem 1rem;
  background-color: #b9c9da;
}
.sg-modal-footer {
  border-top: 1px solid #8fa2cc;
  padding: 0.75rem 1rem;
  background-color: #e9ecee;
}

.sg-page-content-top-navbar {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  color: #0e0d0d;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #689cbe !important;
}

/* ---- loading-spinner --- */
/* Full-screen overlay (no blur) */
.loading-spinner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* lighter dim + softer blur */
  /* background: rgba(12, 18, 28, 0.15);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
}

/* Card around the spinner */
.loading-spinner .dash-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Spinner styling */
.loading-spinner .dash-spinner {
  width: 150px !important;
  height: 150px !important;
  border-width: 12px !important;
  border-style: solid !important;
  border-radius: 50% !important;

  border-color: rgba(23, 125, 165, 0.18) !important; /* base ring */
  border-top-color: #177da5 !important;              /* accent arc */

  animation-duration: 0.85s !important;
  box-shadow: 0 0 12px rgba(23, 125, 165, 0.25);
}

/* Loading label */
.loading-spinner .dash-spinner-container::after {
  content: "Loading…";
  margin-top: 12px;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1f2a37;
  opacity: 0.95;
  animation: labelPulse 1.6s ease-in-out infinite;
}