/*
 * SESAM base styles.
 *
 * Element-level defaults and global resets that apply on every SESAM page.
 * Loaded after Bootstrap, before components and app-shell.
 */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

html {
  position: relative;
  height: 100% !important;
  min-height: 100%;
  scroll-padding-top: 40px;
}

body {
  height: 100%;
  min-height: 100% !important;
}

@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

/* Section headings keep BS sizing but normalize weight. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 400;
}

h1, .h1 {
  color: var(--sesam-heading-color);
  font-weight: 700;
}

/* h6 acts as a SESAM section label: bold, heading-color. */
h6, .h6 {
  font-weight: 700;
  color: var(--sesam-heading-color);
}

/* Horizontal rule: keep the subtle near-black look from the legacy stylesheet
   instead of inheriting the muted gray body color (which renders too dark
   at Bootstrap's default 0.25 opacity). */
hr {
  color: rgba(0, 0, 0, 0.1);
}

/* Legacy default spacing below form labels (matches BS4 / sesam_application.css). */
label {
  margin-bottom: 0.5rem;
}
.col-form-label,
.form-check-label,
.custom-control-label {
  margin-bottom: 0;
}

/* SESAM brand link colors. */
a {
  color: var(--sesam-blue);
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #224abe;
}

/* SESAM uses a muted teal as the legacy `--primary` color for
   `.text-primary` and friends, while keeping the SESAM blue for buttons.
   The other text-* utilities are tuned to the SESAM accent palette. */
.text-primary   { color: var(--sesam-teal-muted) !important; }
.text-success   { color: rgb(86, 131, 96)  !important; }
.text-info      { color: rgb(141, 116, 165) !important; }
.text-warning   { color: #f6c23e !important; }
.text-danger    { color: #e74a3b !important; }
.text-secondary { color: #858796 !important; }

/* Card chrome: match the legacy SESAM look (light border, slightly larger
   radius). Achieved through Bootstrap variable overrides so card-header,
   list-group integrations, etc. inherit the same look. */
.card {
  --bs-card-border-color: var(--sesam-card-border);
  --bs-card-border-radius: 0.35rem;
  --bs-card-inner-border-radius: calc(0.35rem - 1px);
  --bs-card-bg: var(--sesam-card-bg);
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-title-spacer-y: 0.75rem;
  /* Slightly roomier card header than the Bootstrap default (0.5rem / 1rem)
     to match the legacy SESAM look. */
  --bs-card-cap-padding-y: 0.75rem;
  --bs-card-cap-padding-x: 1.25rem;
}

/* Progress bar uses SESAM blue with a slightly tinted track. */
.progress {
  --bs-progress-bg: var(--sesam-surface-muted);
  --bs-progress-bar-bg: var(--sesam-blue);
}

/* Bootstrap pagination styled in the SESAM blue palette. Used by DataTables 2
   pagers (which render `.pagination` / `.page-link`) and any manual pagination
   markup. Re-binds `--bs-pagination-*` tokens instead of overriding each
   selector, so hover, focus, active, and disabled states stay consistent. */
.pagination {
  --bs-pagination-color: var(--sesam-blue);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--sesam-card-border);
  --bs-pagination-hover-color: var(--sesam-blue);
  --bs-pagination-hover-bg: var(--sesam-surface-muted);
  --bs-pagination-hover-border-color: var(--sesam-card-border);
  --bs-pagination-focus-color: var(--sesam-blue);
  --bs-pagination-focus-bg: var(--sesam-surface-muted);
  --bs-pagination-active-bg: var(--sesam-blue);
  --bs-pagination-active-border-color: var(--sesam-blue);
  --bs-pagination-disabled-color: var(--sesam-gray-600);
  --bs-pagination-disabled-border-color: var(--sesam-card-border);
}

/* SESAM-tuned dropdown menus: smaller font and the heading color for items,
   matching the legacy application stylesheet. Re-binds `--bs-dropdown-*`
   tokens so hover and active states keep working. */
.dropdown-menu {
  --bs-dropdown-font-size: 0.85rem;
  --bs-dropdown-link-color: var(--sesam-heading-color);
  --bs-dropdown-link-hover-color: var(--sesam-heading-color);
  --bs-dropdown-link-hover-bg: var(--sesam-surface-muted);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--sesam-blue);
  --bs-dropdown-item-padding-x: 1.5rem;
  --bs-dropdown-border-color: var(--sesam-card-border);
}

/* SESAM blue for the active state of Bootstrap list-group items
   (used e.g. in the workspace "Move to project" modal). */
.list-group {
  --bs-list-group-active-bg: var(--sesam-blue);
  --bs-list-group-active-border-color: var(--sesam-blue);
}

/* Suppress focus rings on buttons and links (matches legacy SB-Admin look)
   while preserving the input focus glow defined further down. */
.btn:focus,
.btn:active {
  box-shadow: none;
  outline: none !important;
}
button:focus,
button:active,
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* SB-Admin-style focus glow on form inputs (legacy look). */
.form-control:focus {
  color: var(--sesam-gray-700);
  border-color: #bac8f3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-focus-ring-rgb), 0.25);
}

/* Top white navbar shared by application pages. */
.navbar {
  padding: 0.5rem 1.5rem;
  box-shadow:
    0 0 1px 1px rgba(29, 17, 51, 0.04),
    0 0 3px 2px rgba(9, 32, 77, 0.12),
    0 0 2px -3px rgba(29, 17, 51, 0.12);
  min-height: 50px;
  background-color: #FFF;
}

.navbar-nav .nav-link {
  padding-left: 1rem !important;
}

.navbar-collapse {
  flex-grow: 0;
}

.navbar-toggler {
  border: none;
}

.nav-link {
  color: var(--sesam-blue);
}

.nav-link.active {
  color: var(--sesam-blue) !important;
  font-weight: 700 !important;
}

.nav-link:hover {
  color: var(--sesam-marketing-blue-bright);
  background-color: rgba(226, 239, 254, 0.08);
}

/* Nav-tabs in the SESAM blue tone. */
.nav-tabs .nav-link {
  color: var(--bs-gray-600);
  font-weight: 400;
  transition: color 0.15s ease;
}

.nav-tabs .nav-link:hover { color: var(--sesam-blue); }
.nav-tabs .nav-link.active { color: var(--sesam-blue); font-weight: 600; }

/* Buttons: keep SESAM blue/olive theme. */
.btn-success {
  background-color: var(--sesam-green) !important;
  border-color: var(--sesam-green) !important;
}

.btn-success:hover {
  background-color: var(--sesam-green-hover) !important;
}

.btn-outline-primary {
  color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.btn-outline-success {
  color: var(--sesam-green);
  border-color: var(--sesam-green);
}

.btn-outline-success:hover {
  color: #fff;
  background-color: var(--sesam-green) !important;
  border-color: var(--sesam-green);
}

/* btn-primary uses SESAM blue. Bootstrap 5.3 bakes the original blue into
   per-component CSS variables, so overriding --bs-primary alone is not
   enough — we need to override the btn-* variables and the legacy
   background-color/border-color shorthand. */
.btn-primary {
  --bs-btn-bg: var(--sesam-blue);
  --bs-btn-border-color: var(--sesam-blue);
  --bs-btn-hover-bg: rgb(79, 125, 160);
  --bs-btn-hover-border-color: var(--sesam-blue);
  --bs-btn-active-bg: rgb(79, 125, 160);
  --bs-btn-active-border-color: var(--sesam-blue);
  --bs-btn-disabled-bg: var(--sesam-blue);
  --bs-btn-disabled-border-color: var(--sesam-blue);
  color: #fff;
  background-color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}

/* Default placeholder color across all inputs. */
::-webkit-input-placeholder { color: var(--sesam-gray-400) !important; }
::-moz-placeholder         { color: var(--sesam-gray-400) !important; }
::-ms-placeholder          { color: var(--sesam-gray-400) !important; }
::placeholder              { color: var(--sesam-gray-400) !important; }

/* Bootstrap form-control placeholders use a darker, mid-gray shade so they
   read as labels rather than washed-out text. */
.form-control::placeholder {
  color: var(--sesam-gray-600) !important;
  opacity: 1;
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

/* Range input colors. */
input[type="range"]::-webkit-slider-thumb { background-color: var(--sesam-blue); }
input[type="range"]::-moz-range-thumb     { background-color: var(--sesam-blue); }
input[type="range"]::-ms-thumb            { background-color: var(--sesam-blue); }
input[type="range"]::-webkit-slider-runnable-track { background-color: var(--sesam-light-blue); }
input[type="range"]::-moz-range-track     { background-color: var(--sesam-light-blue); }
input[type="range"]::-ms-track            { background-color: var(--sesam-light-blue); }

/* Form check checked state uses SESAM blue. */
.form-check-input:checked {
  background-color: var(--sesam-blue) !important;
  border-color: var(--sesam-blue) !important;
}

/* Bootstrap accordion: lighten color, hide caret, no toggle interaction. */
.accordion {
  /* Collapsed headers should use BS5's default body color, not the muted
     sesam body grey that --bs-accordion-btn-color would otherwise inherit. */
  --bs-accordion-btn-color: #212529;
}

.accordion-button:not(.collapsed) {
  color: var(--sesam-blue);
  pointer-events: none;
}

.accordion-button:not(.collapsed)::after {
  display: none !important;
}

/* Outline-light tweak shared by editor/builder/simulator. */
.btn-outline-light {
  color: var(--sesam-gray-600);
  border-color: #f8f9fc;
}

.btn-check:checked + .btn-outline-light,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show,
.btn-outline-light:active {
  background-color: rgb(232, 241, 255);
  color: rgb(38, 92, 138);
}

.btn-check + .btn:hover {
  color: rgb(38, 92, 138);
}

.btn-check:disabled + .btn,
.btn-check[disabled] + .btn {
  opacity: 1;
}

/* Stronger disabled state for buttons. Bootstrap defaults to 0.65 which still
   reads as "clickable"; SESAM uses 0.2 to make the disabled state unmistakable
   (e.g. the Build button before an area is selected). */
.btn {
  --bs-btn-disabled-opacity: 0.2;
}

/* List group base used in app pages. */
.list-group-item {
  padding: 0.5rem 1rem;
  color: inherit;
}

/* Toast width override (kept from legacy theme). */
.toast {
  width: 100% !important;
}

/* Alert-dismissible close padding tweak. */
.alert-dismissible .btn-close {
  padding: 1rem !important;
}

/* Offcanvas header close padding. */
.offcanvas-header .btn-close {
  padding: 0.8rem;
}