/* ============================================================
   INTEGRA — modern 2026 theme for G3W-Suite (AdminLTE admin + login)
   Loaded via G3WSUITE_CUSTOM_CSS in settings_docker.py.

   This is a full visual overhaul on top of AdminLTE 2 / Bootstrap 3:
   modern typography, rounded corners, soft shadows, restyled form
   fields, buttons, cards, tables, alerts / error messages, modals,
   tabs, pagination and the login page — using the INTEGRA palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Modern icon set: Font Awesome 6 Free + official v4->v6 shim so the existing
   `fa fa-*` class names (AdminLTE / sitetree menu) render as modern FA6 glyphs.
   NOTE: loaded from CDN -> requires internet access in the browser. */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css');

:root {
  /* Brand palette */
  --color-brand-primary: #4577D8;    /* Albastru logo  - links, active accents, icons */
  --color-brand-primary-dark: #375FAD;
  --color-brand-secondary: #110D43;  /* Bleumarin      - header/sidebar bg, headings */
  --color-accent-coral: #FF6B4A;     /* Coral          - primary buttons / CTA */
  --color-accent-coral-dark: #e85636;
  --color-text-dark: #1E293B;        /* Slate 800      - body text */
  --color-text-muted: #64748B;       /* Slate 500      - secondary text */
  --color-bg-light: #F8FAFC;         /* Slate 50       - page background */
  --color-bg-secondary: #F1F5F9;     /* Slate 100      - cards / form bg */
  --color-border: #E2E8F0;           /* Slate 200      - separators / borders */
  --color-border-strong: #CBD5E1;    /* Slate 300 */
  --color-white: #FFFFFF;

  /* Semantic */
  --color-success: #16A34A;
  --color-success-bg: #F0FDF4;
  --color-warning: #D97706;
  --color-warning-bg: #FFFBEB;
  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-info: #0EA5E9;
  --color-info-bg: #F0F9FF;

  /* Design tokens */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 13, 67, 0.14);
  --ring: 0 0 0 3px rgba(69, 119, 216, 0.28);
  --transition: all 0.15s ease;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   GLOBAL / TYPOGRAPHY
   ============================================================ */
body.integra-ui,
.integra-ui .content-wrapper,
.integra-ui .right-side,
.integra-ui .wrapper {
  font-family: var(--font-sans) !important;
  background-color: var(--color-bg-light) !important;
  color: var(--color-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.55;
}

.integra-ui h1, .integra-ui h2, .integra-ui h3, .integra-ui h4, .integra-ui h5, .integra-ui h6,
.integra-ui .h1, .integra-ui .h2, .integra-ui .h3, .integra-ui .h4, .integra-ui .h5, .integra-ui .h6 {
  font-family: var(--font-sans) !important;
  color: var(--color-brand-secondary);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.integra-ui .content-header > h1 {
  font-size: 22px;
  font-weight: 800;
}
.integra-ui .content-header > h1 > small {
  color: var(--color-text-muted);
  font-weight: 500;
}

.integra-ui a {
  color: var(--color-brand-primary);
  transition: var(--transition);
}
.integra-ui a:hover,
.integra-ui a:focus {
  color: var(--color-brand-primary-dark);
  text-decoration: none;
}

.integra-ui ::selection {
  background: rgba(69, 119, 216, 0.25);
}

/* Subtle modern scrollbars */
.integra-ui * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.integra-ui *::-webkit-scrollbar { width: 10px; height: 10px; }
.integra-ui *::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.integra-ui *::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: content-box; }

/* Keyboard focus visibility */
.integra-ui a:focus-visible,
.integra-ui button:focus-visible,
.integra-ui .btn:focus-visible,
.integra-ui .form-control:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ============================================================
   TOP HEADER
   ============================================================ */
/* Logo box kept WHITE so the navy "integra" wordmark stays visible. */
.integra-ui .main-header .logo {
  background-color: var(--color-white) !important;
  color: var(--color-brand-secondary) !important;
  border-right: 1px solid var(--color-border) !important;
  border-bottom: none !important;
  font-weight: 800;
  transition: var(--transition);
}
.integra-ui .main-header .logo:hover { background-color: var(--color-white) !important; }
.integra-ui .main-header .logo img { max-height: 42px; width: auto; vertical-align: middle; }
.integra-ui .main-header .logo .logo-mini img { max-height: 34px; }

/* Navbar to the right of the logo -> brand navy */
.integra-ui .main-header .navbar {
  background-color: var(--color-brand-secondary) !important;
  box-shadow: var(--shadow-sm);
}
.integra-ui .main-header .navbar .nav > li > a {
  color: #dfe3f2 !important;
  transition: var(--transition);
}
.integra-ui .main-header .navbar .nav > li > a:hover,
.integra-ui .main-header .navbar .nav > li > a:focus,
.integra-ui .main-header .navbar .nav .open > a {
  background-color: rgba(69, 119, 216, 0.18) !important;
  color: var(--color-white) !important;
}
.integra-ui .main-header .navbar .sidebar-toggle { color: #dfe3f2 !important; }
.integra-ui .main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(69, 119, 216, 0.18) !important;
  color: var(--color-white) !important;
}
.integra-ui .main-header .navbar-brand { color: var(--color-white) !important; }
/* Navbar dropdowns (messages/notifications/user) */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  background-color: var(--color-brand-secondary) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.integra-ui .main-sidebar,
.integra-ui .left-side {
  background-color: var(--color-brand-secondary) !important;
}
.integra-ui .sidebar a { color: #c9d1ea; }

.integra-ui .sidebar-menu > li.header {
  background: transparent !important;
  color: #6f79a8 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  padding: 16px 20px 8px;
}
.integra-ui .sidebar-menu > li > a {
  color: #c9d1ea;
  border-left: 3px solid transparent;
  margin: 2px 10px;
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  transition: var(--transition);
}
.integra-ui .sidebar-menu > li:hover > a,
.integra-ui .sidebar-menu > li.active > a,
.integra-ui .sidebar-menu > li.menu-open > a {
  color: var(--color-white) !important;
  background-color: rgba(69, 119, 216, 0.16) !important;
  border-left-color: var(--color-brand-primary) !important;
}
.integra-ui .sidebar-menu > li.active > a {
  background-color: rgba(69, 119, 216, 0.22) !important;
}
/* Sidebar nav icons -> modern rounded "chip" with a subtle azur tint */
.integra-ui .sidebar-menu > li > a > .fa,
.integra-ui .sidebar-menu > li > a > .fas,
.integra-ui .sidebar-menu > li > a > .far,
.integra-ui .sidebar-menu > li > a > .fab,
.integra-ui .sidebar-menu > li > a > .glyphicon,
.integra-ui .sidebar-menu > li > a > .ion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: var(--radius-sm);
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary);
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  transition: var(--transition);
}
/* the angle caret on treeview parents stays a plain icon, not a chip */
.integra-ui .sidebar-menu > li > a > .fa.pull-right,
.integra-ui .sidebar-menu > li > a > .fa-angle-left {
  width: auto;
  height: auto;
  margin-right: 0;
  background: transparent;
  color: #8b93bd;
  font-size: 14px;
}
.integra-ui .sidebar-menu > li:hover > a > .fa,
.integra-ui .sidebar-menu > li:hover > a > .fas,
.integra-ui .sidebar-menu > li:hover > a > .far,
.integra-ui .sidebar-menu > li:hover > a > .fab,
.integra-ui .sidebar-menu > li:hover > a > .glyphicon,
.integra-ui .sidebar-menu > li:hover > a > .ion,
.integra-ui .sidebar-menu > li.active > a > .fa,
.integra-ui .sidebar-menu > li.active > a > .fas,
.integra-ui .sidebar-menu > li.active > a > .far,
.integra-ui .sidebar-menu > li.active > a > .fab,
.integra-ui .sidebar-menu > li.active > a > .glyphicon,
.integra-ui .sidebar-menu > li.active > a > .ion {
  background: var(--color-brand-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(69, 119, 216, 0.35);
}
.integra-ui .sidebar-menu > li:hover > a > .fa-angle-left,
.integra-ui .sidebar-menu > li.active > a > .fa-angle-left {
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.integra-ui .sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: var(--radius-sm);
  margin: 0 10px 6px;
  padding: 4px 0;
}
.integra-ui .sidebar-menu .treeview-menu > li > a {
  color: #aab4d8;
  padding: 8px 12px 8px 34px;
  border-radius: 6px;
  transition: var(--transition);
}
.integra-ui .sidebar-menu .treeview-menu > li.active > a,
.integra-ui .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--color-white);
  background: rgba(69, 119, 216, 0.14);
}
.integra-ui .sidebar .user-panel > .info,
.integra-ui .sidebar .user-panel > .info > a { color: var(--color-white); }
.integra-ui .sidebar-form {
  border: none !important;
  margin: 12px 12px 6px !important;
}
.integra-ui .sidebar-form input[type="text"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-sm) !important;
}
.integra-ui .sidebar-form input[type="text"]::placeholder { color: #8b93bd !important; }
.integra-ui .sidebar-form .btn { background: transparent !important; border: none !important; color: #8b93bd !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.integra-ui .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid transparent;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
  text-transform: none;
}
.integra-ui .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.integra-ui .btn:active { transform: translateY(0); box-shadow: none; }
.integra-ui .btn-sm, .integra-ui .btn-xs { border-radius: 6px; }
.integra-ui .btn-lg { border-radius: var(--radius); padding: 12px 22px; }

.integra-ui .btn-primary,
.integra-ui .login-page .btn-primary {
  background-color: var(--color-accent-coral) !important;
  border-color: var(--color-accent-coral) !important;
  color: var(--color-white) !important;
}
.integra-ui .btn-primary:hover,
.integra-ui .btn-primary:focus,
.integra-ui .btn-primary:active,
.integra-ui .btn-primary.active,
.integra-ui .open > .dropdown-toggle.btn-primary,
.integra-ui .login-page .btn-primary:hover {
  background-color: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
  color: var(--color-white) !important;
}

.integra-ui .btn-default {
  background-color: var(--color-white) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-dark) !important;
}
.integra-ui .btn-default:hover { background-color: var(--color-bg-secondary) !important; }

.integra-ui .btn-info {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
}
.integra-ui .btn-info:hover { background-color: var(--color-brand-primary-dark) !important; border-color: var(--color-brand-primary-dark) !important; }

.integra-ui .btn-success { background-color: var(--color-success) !important; border-color: var(--color-success) !important; }
.integra-ui .btn-danger  { background-color: var(--color-danger) !important;  border-color: var(--color-danger) !important; }
.integra-ui .btn-warning { background-color: var(--color-warning) !important; border-color: var(--color-warning) !important; color: #fff !important; }

.integra-ui .btn-link { box-shadow: none; color: var(--color-brand-primary); }
.integra-ui .btn-link:hover { transform: none; box-shadow: none; }

/* ============================================================
   FORMS / FIELDS
   ============================================================ */
.integra-ui label,
.integra-ui .control-label {
  color: var(--color-brand-secondary);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

/* NB: Select2 widgets are themed in full in the SELECT2 section below, not here. */
.integra-ui .form-control {
  height: auto;
  min-height: 40px;
  padding: 9px 13px;
  font-size: 14px;
  color: var(--color-text-dark);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: var(--transition);
}
.integra-ui textarea.form-control { min-height: 96px; }

.integra-ui .form-control::placeholder { color: #94A3B8; }

.integra-ui .form-control:hover { border-color: #b6c2d3; }

.integra-ui .form-control:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
  outline: none;
}

.integra-ui select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.integra-ui .input-group-addon {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.integra-ui .input-group .form-control:first-child,
.integra-ui .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.integra-ui .input-group .form-control:last-child,
.integra-ui .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.integra-ui .help-block {
  color: var(--color-text-muted);
  font-size: 12.5px;
  margin-top: 5px;
}

/* Checkboxes / radios spacing */
.integra-ui .checkbox label, .integra-ui .radio label { font-weight: 500; color: var(--color-text-dark); }

/* Field validation states */
.integra-ui .has-success .form-control { border-color: var(--color-success); }
.integra-ui .has-warning .form-control { border-color: var(--color-warning); }
.integra-ui .has-error .form-control {
  border-color: var(--color-danger);
}
.integra-ui .has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}
.integra-ui .has-error .control-label,
.integra-ui .has-error .help-block { color: var(--color-danger); }

/* Django form error lists -> modern inline error chips */
.integra-ui ul.errorlist {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
}
.integra-ui ul.errorlist > li {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.integra-ui ul.errorlist > li::before {
  content: "\f06a"; /* fa-exclamation-circle */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
}

/* ============================================================
   SELECT2 (v4) — full theming so JS-upgraded dropdowns match
   the native `select.form-control` fields above.
   Select2 hides the original <select> and renders its own DOM,
   so styling `.form-control` alone leaves the visible widget,
   the arrow and the whole dropdown panel unthemed.
   ============================================================ */

/* Select2's default width:'resolve' already copies the original <select>'s
   inline width (100% in crispy forms, 120px for the navbar language pill), so
   only guard against overflow here — never force a width, or the navbar pill
   stretches to fill its form. */
.integra-ui .select2-container { max-width: 100%; }

/* --- Closed state: the visible field --- */
.integra-ui .select2-container--default .select2-selection--single,
.integra-ui .select2-container--default .select2-selection--multiple {
  min-height: 40px;
  padding: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: var(--transition);
}
.integra-ui .select2-container--default .select2-selection--single:hover,
.integra-ui .select2-container--default .select2-selection--multiple:hover {
  border-color: #b6c2d3;
}

.integra-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 13px;
  padding-right: 34px;
  color: var(--color-text-dark);
  font-size: 14px;
}
/* The "---------" empty choice reads as a placeholder, not as a value */
.integra-ui .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8;
}

/* --- Arrow: replace the CSS-triangle with the same chevron as native selects --- */
.integra-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  width: 34px;
  right: 1px;
}
.integra-ui .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}
.integra-ui .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(180deg);
}

/* --- Focus / open state: same ring as .form-control:focus --- */
.integra-ui .select2-container--default.select2-container--focus .select2-selection--single,
.integra-ui .select2-container--default.select2-container--focus .select2-selection--multiple,
.integra-ui .select2-container--default.select2-container--open .select2-selection--single,
.integra-ui .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
}
/* Keep the field's corners square only on the joined edge while open */
.integra-ui .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.integra-ui .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.integra-ui .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.integra-ui .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- Clear ("x") button --- */
.integra-ui .select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--color-text-muted);
  font-size: 18px;
  font-weight: 400;
  margin-right: 30px;
  transition: var(--transition);
}
.integra-ui .select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--color-danger);
}

/* --- Multi-select: values as brand pills --- */
.integra-ui .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 4px 6px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.integra-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0;
  padding: 3px 9px 3px 6px;
  background: rgba(69, 119, 216, 0.12);
  border: 1px solid rgba(69, 119, 216, 0.35);
  border-radius: var(--radius-pill);
  color: var(--color-brand-primary-dark);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
}
.integra-ui .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-brand-primary-dark);
  margin-right: 5px;
  font-weight: 700;
}
.integra-ui .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--color-danger);
}

/* --- Open dropdown panel --- */
.integra-ui .select2-container--default .select2-dropdown {
  background: var(--color-white);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.integra-ui .select2-container--default .select2-dropdown--below {
  border-top-color: var(--color-border-strong);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.integra-ui .select2-container--default .select2-dropdown--above {
  border-bottom-color: var(--color-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Inline search box inside the panel */
.integra-ui .select2-container--default .select2-search--dropdown { padding: 8px; }
.integra-ui .select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13.5px;
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
}
.integra-ui .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
}

/* Options */
.integra-ui .select2-container--default .select2-results > .select2-results__options {
  max-height: 260px;
  padding: 4px;
}
.integra-ui .select2-container--default .select2-results__option {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text-dark);
}
.integra-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
.integra-ui .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary-dark);
}
.integra-ui .select2-container--default .select2-results__option[aria-selected="true"],
.integra-ui .select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--color-brand-primary);
  color: var(--color-white);
  font-weight: 600;
}
.integra-ui .select2-container--default .select2-results__message {
  color: var(--color-text-muted);
  font-size: 13px;
}
.integra-ui .select2-container--default .select2-results__group {
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 11px 4px;
}

/* Disabled */
.integra-ui .select2-container--disabled .select2-selection--single,
.integra-ui .select2-container--default .select2-selection--single[aria-disabled="true"] {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ============================================================
   BOXES / CARDS
   ============================================================ */
.integra-ui .box {
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
  overflow: hidden;
}
.integra-ui .box.box-primary,
.integra-ui .box.box-info { border-top: 3px solid var(--color-brand-primary); }
.integra-ui .box.box-success { border-top: 3px solid var(--color-success); }
.integra-ui .box.box-warning { border-top: 3px solid var(--color-warning); }
.integra-ui .box.box-danger  { border-top: 3px solid var(--color-danger); }

.integra-ui .box-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.integra-ui .box-header .box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-brand-secondary);
}
.integra-ui .box-body { padding: 20px; }
.integra-ui .box-footer {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.integra-ui .box.box-solid.box-primary > .box-header,
.integra-ui .box.box-primary > .box-header.with-border {
  background-color: var(--color-brand-secondary);
  color: var(--color-white);
}
.integra-ui .box.box-solid.box-primary > .box-header .box-title { color: var(--color-white); }
.integra-ui .box.box-solid.box-primary { border-color: var(--color-brand-secondary); }

/* Small info-boxes / stat widgets */
.integra-ui .small-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.integra-ui .small-box:hover { box-shadow: var(--shadow); }
.integra-ui .info-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}
.integra-ui .info-box-icon { border-radius: var(--radius) 0 0 var(--radius); }

/* ============================================================
   TABLES
   ============================================================ */
.integra-ui .table { color: var(--color-text-dark); }
.integra-ui .table > thead > tr > th {
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 12px 14px;
}
.integra-ui .table > tbody > tr > td {
  border-top: 1px solid var(--color-border);
  padding: 12px 14px;
  vertical-align: middle;
}
.integra-ui .table-hover > tbody > tr:hover { background-color: var(--color-bg-secondary); }
.integra-ui .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--color-bg-light); }
.integra-ui .table-bordered,
.integra-ui .table-bordered > tbody > tr > td,
.integra-ui .table-bordered > tbody > tr > th,
.integra-ui .table-bordered > thead > tr > th {
  border-color: var(--color-border);
}
/* DataTables controls */
.integra-ui .dataTables_wrapper .dataTables_filter input,
.integra-ui .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

/* ============================================================
   LABELS / BADGES / CALLOUTS
   ============================================================ */
.integra-ui .label, .integra-ui .badge {
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11.5px;
}
.integra-ui .label-primary, .integra-ui .badge { background-color: var(--color-brand-primary); }
.integra-ui .label-success { background-color: var(--color-success); }
.integra-ui .label-warning { background-color: var(--color-warning); }
.integra-ui .label-danger  { background-color: var(--color-danger); }
.integra-ui .label-info    { background-color: var(--color-info); }

.integra-ui .bg-primary { background-color: var(--color-brand-secondary) !important; }
.integra-ui .text-primary { color: var(--color-brand-primary) !important; }

.integra-ui .callout {
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
}

/* ============================================================
   ALERTS / MESSAGES (modern, with icon + accent bar)
   ============================================================ */
.integra-ui .alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 14px 16px 14px 46px;
  position: relative;
  box-shadow: var(--shadow-xs);
  font-size: 14px;
}
.integra-ui .alert::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 16px;
  top: 14px;
  font-size: 16px;
}
.integra-ui .alert .close { opacity: 0.5; text-shadow: none; }
.integra-ui .alert-success {
  background-color: var(--color-success-bg) !important;
  border-color: var(--color-success) !important;
  color: #14532D !important;
}
.integra-ui .alert-success::before { content: "\f058"; color: var(--color-success); }
.integra-ui .alert-info {
  background-color: var(--color-info-bg) !important;
  border-color: var(--color-info) !important;
  color: #075985 !important;
}
.integra-ui .alert-info::before { content: "\f05a"; color: var(--color-info); }
.integra-ui .alert-warning {
  background-color: var(--color-warning-bg) !important;
  border-color: var(--color-warning) !important;
  color: #92400E !important;
}
.integra-ui .alert-warning::before { content: "\f071"; color: var(--color-warning); }
.integra-ui .alert-danger,
.integra-ui .alert-error {
  background-color: var(--color-danger-bg) !important;
  border-color: var(--color-danger) !important;
  color: #991B1B !important;
}
.integra-ui .alert-danger::before,
.integra-ui .alert-error::before { content: "\f06a"; color: var(--color-danger); }

/* Error pages (404/500/502 style bodies) */
.integra-ui .error-page > .headline { color: var(--color-brand-secondary); font-weight: 800; }
.integra-ui .error-page > .error-content > h3 { color: var(--color-text-dark); }

/* ============================================================
   NAV TABS
   ============================================================ */
.integra-ui .nav-tabs {
  border-bottom: 1px solid var(--color-border);
}
.integra-ui .nav-tabs > li > a {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted);
  font-weight: 600;
  border: none;
  margin-right: 4px;
}
.integra-ui .nav-tabs > li > a:hover { background: var(--color-bg-secondary); color: var(--color-text-dark); }
.integra-ui .nav-tabs > li.active > a,
.integra-ui .nav-tabs > li.active > a:hover,
.integra-ui .nav-tabs > li.active > a:focus {
  color: var(--color-brand-secondary);
  border: none;
  border-bottom: 2px solid var(--color-brand-primary);
  background: transparent;
}
.integra-ui .nav-tabs-custom {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* AdminLTE marks the active tab of a .nav-tabs-custom with a 3px top border.
   The generic .nav-tabs rule above already marks it with a 2px underline, so
   keeping both gave the active tab a line above AND below it. Drop the top
   border: the app then has one tab treatment everywhere. */
.integra-ui .nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: transparent;
}
/* AdminLTE styles these links at .nav-tabs-custom > .nav-tabs > li.active > a
   — three classes, which outranks the two-class generic rule above, so the
   theme's underline never reached a .nav-tabs-custom. Restate it here at
   matching specificity rather than reaching for !important. */
.integra-ui .nav-tabs-custom > .nav-tabs > li > a,
.integra-ui .nav-tabs-custom > .nav-tabs > li > a:hover,
.integra-ui .nav-tabs-custom > .nav-tabs > li > a:focus {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.integra-ui .nav-tabs-custom > .nav-tabs > li > a:hover { color: var(--color-brand-secondary); }
.integra-ui .nav-tabs-custom > .nav-tabs > li.active > a,
.integra-ui .nav-tabs-custom > .nav-tabs > li.active > a:hover,
.integra-ui .nav-tabs-custom > .nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--color-brand-primary);
  background: transparent;
  color: var(--color-brand-secondary);
}

/* Pills */
.integra-ui .nav-pills > li.active > a,
.integra-ui .nav-pills > li.active > a:hover,
.integra-ui .nav-pills > li.active > a:focus {
  background-color: var(--color-brand-primary);
  border-radius: var(--radius-pill);
}

/* ============================================================
   PAGINATION / BREADCRUMB / DROPDOWN
   ============================================================ */
.integra-ui .pagination > li > a,
.integra-ui .pagination > li > span {
  color: var(--color-text-dark);
  border-color: var(--color-border);
  margin: 0 2px;
  border-radius: var(--radius-sm) !important;
}
.integra-ui .pagination > .active > a,
.integra-ui .pagination > .active > a:focus,
.integra-ui .pagination > .active > a:hover,
.integra-ui .pagination > .active > span {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.integra-ui .breadcrumb {
  background: transparent;
  padding: 8px 0;
  font-size: 13px;
}
.integra-ui .breadcrumb > li + li::before { color: var(--color-border-strong); }
.integra-ui .breadcrumb > .active { color: var(--color-text-muted); }

.integra-ui .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin-top: 6px;
}
.integra-ui .dropdown-menu > li > a {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--color-text-dark);
}
.integra-ui .dropdown-menu > li > a:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-brand-secondary);
}

/* ============================================================
   MODALS
   ============================================================ */
.integra-ui .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.integra-ui .modal-header {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 22px;
}
.integra-ui .modal-header .modal-title { font-weight: 700; color: var(--color-brand-secondary); }
.integra-ui .modal-body { padding: 22px; }
.integra-ui .modal-footer { border-top: 1px solid var(--color-border); padding: 16px 22px; }
.integra-ui .modal-backdrop.in { opacity: 0.45; }

/* Progress bars */
.integra-ui .progress { border-radius: var(--radius-pill); box-shadow: none; background: var(--color-bg-secondary); }
.integra-ui .progress-bar { background-color: var(--color-brand-primary); }

/* Tooltips / popovers */
.integra-ui .tooltip-inner { border-radius: var(--radius-sm); padding: 6px 10px; background: var(--color-brand-secondary); }
.integra-ui .popover { border-radius: var(--radius); box-shadow: var(--shadow-lg); border-color: var(--color-border); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
body.integra-ui.login-page,
.integra-ui .login-page {
  background: var(--color-brand-secondary) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integra-ui .login-box, .integra-ui .register-box {
  width: 400px;
  margin: 0 auto;
}
.integra-ui .login-logo, .integra-ui .register-logo {
  margin-bottom: 22px;
  text-align: center;
}
.integra-ui .login-logo img, .integra-ui .register-logo img {
  max-width: 220px;
  height: auto;
}
.integra-ui .login-box-body, .integra-ui .register-box-body {
  background-color: var(--color-white);
  border-top: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 28px;
}
.integra-ui .login-box-msg, .integra-ui .register-box-msg {
  color: var(--color-brand-secondary);
  font-weight: 600;
  padding-top: 0;
}
.integra-ui .login-page .form-control {
  min-height: 44px;
  border-radius: var(--radius-sm);
}
.integra-ui .login-page .form-control:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
}
.integra-ui .login-page .btn-primary {
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  width: 100%;
}
.integra-ui .login-page .has-feedback .form-control-feedback { line-height: 44px; color: #94A3B8; }

/* ============================================================
   MISC POLISH
   ============================================================ */
.integra-ui .content-header { padding: 18px 20px 6px; }
.integra-ui hr { border-top-color: var(--color-border); }
.integra-ui code {
  background: var(--color-bg-secondary);
  color: var(--color-accent-coral-dark);
  border-radius: 6px;
  padding: 2px 6px;
}
.integra-ui .form-group { margin-bottom: 18px; }

/* ============================================================
   INTEGRA LAYOUT OVERRIDE  (structural changes from base.html)
   Scoped under body.integra-ui so it only affects the app-shell.
   Sidebar width is kept at the AdminLTE default (230px) so the
   navbar / content-wrapper / footer margins stay consistent.
   ============================================================ */

/* --- Slim modern top bar: breadcrumb + workspace label live here --- */
.integra-ui .integra-topbar-heading {
  float: left;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  max-width: 62%;
  overflow: hidden;
  white-space: nowrap;
}
.integra-ui .integra-topbar-page {
  position: relative;
  min-width: 0;
  padding-right: 16px;
  display: flex;
  align-items: center;
}
.integra-ui .integra-topbar-page:empty,
.integra-ui .integra-topbar-page:not(:has(h1)) {
  display: none;
}
.integra-ui .integra-topbar-page::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.18);
}
.integra-ui .integra-topbar-page:not(:has(+ .integra-topbar-crumbs:not(.is-empty)))::after {
  display: none;
}
.integra-ui .integra-topbar-page > h1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.integra-ui .integra-topbar-page > h1::before { display: none; }
.integra-ui .integra-topbar-page > h1 > .fa,
.integra-ui .integra-topbar-page > h1 > .fas,
.integra-ui .integra-topbar-page > h1 > .far {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
.integra-ui .integra-topbar-page > h1 > small {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.integra-ui .integra-topbar-crumbs { min-width: 0; overflow: hidden; }
.integra-ui .integra-topbar-crumbs.is-empty { display: none; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li.is-dup { display: none; }
.integra-ui .integra-topbar-crumbs .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 12.5px;
  white-space: nowrap;
}
.integra-ui .integra-topbar-crumbs .breadcrumb > li,
.integra-ui .integra-topbar-crumbs .breadcrumb > li > a { color: #b9c2e6; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li > a:hover { color: #fff; }
.integra-ui .integra-topbar-crumbs .breadcrumb > .active { color: #7d88b8; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li + li::before { color: #4a5385; }
@media (max-width: 767px) {
  .integra-ui .integra-topbar-heading { display: none; }
}

/* --- Sidebar as a distinct navigation rail --- */
.integra-ui .integra-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 8px;
  color: #6f79a8;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11px;
  font-weight: 700;
}
.integra-ui .integra-rail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 4px rgba(69, 119, 216, 0.18);
  flex: 0 0 auto;
}
.integra-ui .main-sidebar { box-shadow: inset -1px 0 0 rgba(255,255,255,0.04); }
/* hide the rail label when the sidebar is collapsed to the mini icon rail */
.sidebar-collapse.integra-ui .integra-rail-brand,
.integra-ui.sidebar-collapse .integra-rail-brand { display: none; }

/* --- Content: distinct page-title band + centered card container --- */
.integra-ui .content-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 20px 26px;
  margin-bottom: 0;
  box-shadow: var(--shadow-xs);
}
.integra-ui .content-header > h1 { margin: 0; }
.integra-ui .content { padding: 40px 26px 26px; }
.integra-ui .integra-page {
  max-width: 1480px;
  margin: 0 auto;
}
.integra-ui .integra-page-body { position: relative; }

/* --- Minimal footer --- */
.integra-ui .main-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12.5px;
  padding: 14px 26px;
}
.integra-ui .main-footer a { color: var(--color-brand-primary); }

/* ============================================================
   INTEGRA FIXED APP-SHELL  (scoped to body.integra-ui)
   Pin the top header and the left navigation rail to the viewport
   so ONLY the content area scrolls (CSS emulation of AdminLTE's
   `.fixed` layout — no JS / template changes). The sidebar scrolls
   internally when its menu is taller than the viewport. Collapsed /
   mini mode and the mobile off-canvas slide keep working because we
   only set `position`/offsets here and never touch the width or the
   transform AdminLTE animates. The settings-gear panel is a separate
   body-level fixed modal (.integra-cs-modal) and is unaffected. The
   login page (body.login-page, no sidebar) is never matched.
   Header height is the AdminLTE default of 50px.
   ============================================================ */
.integra-ui .main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}
/* content + footer clear the now-fixed 50px header */
.integra-ui .content-wrapper,
.integra-ui .right-side {
  padding-top: 50px;
}
/* left rail pinned full-height and independently scrollable.
   AdminLTE's own `padding-top:50px` keeps the menu below the header,
   so long menus still reach every item via this internal scroll. */
.integra-ui .main-sidebar,
.integra-ui .left-side {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ============================================================
   INTEGRA LOGIN  — split-screen (brand panel + form card)
   ============================================================ */
body.integra-ui.login-page { display: block !important; padding: 0 !important; }
.integra-login-wrap {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}
.integra-login-brand {
  flex: 1 1 46%;
  position: relative;
  background: var(--color-brand-secondary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 60px;
  overflow: hidden;
}
/* subtle decorative accent (flat, no gradient) */
.integra-login-brand::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(69, 119, 216, 0.08);
}
.integra-login-brand-inner { position: relative; z-index: 1; }
.integra-login-brand .integra-login-logo { margin-bottom: 28px; text-align: left; }
.integra-login-brand .integra-login-logo img {
  max-width: 230px;
  height: auto;
}
/* Scoped with .integra-ui so it outweighs the global `.integra-ui h1` heading
   rule near the top of this file, which would otherwise paint this h1 in
   --color-brand-secondary, the same colour as the panel behind it. */
.integra-ui .integra-login-tagline {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 6px 0 16px;
}
.integra-login-subtitle {
  color: #b9c2e6;
  font-size: 15px;
  line-height: 1.6;
  max-width: 440px;
}
.integra-login-brand-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 1;
  color: #7d88b8;
  font-size: 12px;
  text-align: center;
}
.integra-login-brand-footer a { color: #b9c2e6; }

.integra-login-panel {
  flex: 1 1 54%;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.integra-login-panel .login-box,
.integra-login-card.login-box {
  width: 100%;
  max-width: 420px;
  margin: 0;
}
.integra-login-panel .login-box-body {
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .integra-login-wrap { flex-direction: column; }
  .integra-login-brand {
    flex: none;
    padding: 40px 32px 48px;
    justify-content: flex-start;
  }
  .integra-ui .integra-login-tagline { font-size: 23px; }
  .integra-login-brand-footer { position: static; left: auto; bottom: auto; margin-top: 22px; }
  .integra-login-panel { flex: none; padding: 32px 20px 48px; }
}

/* ============================================================
   MODERN ICONS  (Font Awesome 6 Free via CDN + v4 shim)
   Ensure FA6 wins over AdminLTE's bundled Font Awesome 4 so the
   existing `fa fa-*` markup renders in the crisp modern style.
   ============================================================ */
.integra-ui .fa,
.integra-ui .fas,
.integra-ui .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.integra-ui .far,
.integra-ui .fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
.integra-ui .fab,
.integra-ui .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
/* keep glyph metrics tidy across the UI */
.integra-ui .btn > .fa,
.integra-ui .btn > .fas,
.integra-ui .btn > .far {
  margin-right: 6px;
}
.integra-ui .btn > .fa:only-child,
.integra-ui .btn > .fas:only-child,
.integra-ui .btn > .far:only-child { margin-right: 0; }

/* Content-header / box-title icons pick up the brand accent */
.integra-ui .content-header > h1 > .fa,
.integra-ui .box-header > .box-title > .fa,
.integra-ui .box-header > .fa {
  color: var(--color-brand-primary);
  margin-right: 8px;
}

/* --- Login field icons: modern, brand-tinted feedback glyphs --- */
.integra-ui .login-page .has-feedback .form-control-feedback {
  color: var(--color-brand-primary);
  font-size: 16px;
  opacity: 0.9;
}
/* swap the Bootstrap glyphicons for FA6 equivalents (user / lock) */
.integra-ui .login-page .glyphicon-user::before,
.integra-ui .login-page .glyphicon-lock::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.integra-ui .login-page .glyphicon-user::before { content: "\f007"; }   /* fa-user */
.integra-ui .login-page .glyphicon-lock::before { content: "\f023"; }   /* fa-lock */

/* ============================================================
   INTEGRA REFINE v2  — fix sidebar text overflow + push the
   design further (distinctive top bar, nav, headings, cards).
   Appended last so it wins over earlier rules.
   ============================================================ */

/* ---------- FIX: sidebar menu text overflow ----------
   Lay each menu link out as: [icon chip] [label (wraps)] [caret].
   No more clipped text / label colliding with the ">" caret. */
.integra-ui .sidebar-menu > li > a {
  display: flex;
  align-items: center;
  white-space: normal;        /* allow the label to wrap instead of clipping */
  line-height: 1.25;
  padding-right: 30px;        /* room for the absolutely-positioned caret */
  position: relative;
  word-break: break-word;
}
/* icon chip must never shrink */
.integra-ui .sidebar-menu > li > a > .fa,
.integra-ui .sidebar-menu > li > a > .fas,
.integra-ui .sidebar-menu > li > a > .far,
.integra-ui .sidebar-menu > li > a > .fab,
.integra-ui .sidebar-menu > li > a > .glyphicon,
.integra-ui .sidebar-menu > li > a > .ion {
  flex: 0 0 auto;
}
/* the treeview caret: keep it pinned to the right, vertically centered */
.integra-ui .sidebar-menu > li > a > .pull-right-container {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.integra-ui .sidebar-menu > li > a > .fa-angle-left,
.integra-ui .sidebar-menu > li > a > .fa.pull-right {
  flex: 0 0 auto;
  margin-left: auto;         /* if not wrapped in a container, still pushes right */
}
/* submenu labels wrap too */
.integra-ui .sidebar-menu .treeview-menu > li > a {
  white-space: normal;
  line-height: 1.25;
}

/* ---------- Distinctive top bar: solid navy + azur accent ---------- */
.integra-ui .main-header .navbar {
  background: var(--color-brand-secondary) !important;
  border-bottom: 2px solid var(--color-brand-primary);
}
.integra-ui .main-header .logo {
  border-bottom: 2px solid var(--color-brand-primary) !important;
}

/* ---------- Sidebar: subtle depth + bolder active state ---------- */
.integra-ui .main-sidebar,
.integra-ui .left-side {
  background: var(--color-brand-secondary) !important;
}
.integra-ui .sidebar-menu > li.active > a {
  background-color: rgba(69, 119, 216, 0.20) !important;
  box-shadow: inset 0 0 0 1px rgba(69, 119, 216, 0.30);
}
/* small accent dot on the active item */
.integra-ui .sidebar-menu > li.active > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(69, 119, 216, 0.25);
}
/* don't let the accent dot fight the caret on treeview parents */
.integra-ui .sidebar-menu > li.active.treeview > a::after { display: none; }

/* ---------- Page heading: accent bar before the title ---------- */
.integra-ui .content-header > h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.integra-ui .content-header > h1::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
}
.integra-ui .content-header > h1 > small {
  margin-left: 2px;
}

/* flat page background (no texture / gradient) */
.integra-ui .content-wrapper {
  background-color: var(--color-bg-light) !important;
  background-image: none;
}

/* ---------- Dashboard stat cards: brand gradients ---------- */
.integra-ui .small-box {
  border-radius: var(--radius-lg) !important;
  border: none;
}
.integra-ui .small-box > .inner { padding: 20px; }
.integra-ui .small-box .icon { top: 12px; opacity: 0.28; }
.integra-ui .small-box h3 { font-weight: 800; }
.integra-ui .small-box .small-box-footer {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: var(--transition);
}
.integra-ui .small-box .small-box-footer:hover { background: rgba(0, 0, 0, 0.2); }
.integra-ui .small-box.bg-aqua,
.integra-ui .small-box.bg-blue,
.integra-ui .small-box.bg-light-blue,
.integra-ui .small-box.bg-teal,
.integra-ui .small-box.bg-info { background: var(--color-brand-primary) !important; }
.integra-ui .small-box.bg-green,
.integra-ui .small-box.bg-success { background: var(--color-success) !important; }
.integra-ui .small-box.bg-red,
.integra-ui .small-box.bg-danger,
.integra-ui .small-box.bg-maroon { background: var(--color-accent-coral) !important; }
.integra-ui .small-box.bg-yellow,
.integra-ui .small-box.bg-orange,
.integra-ui .small-box.bg-warning { background: var(--color-warning) !important; }
.integra-ui .small-box.bg-purple,
.integra-ui .small-box.bg-navy,
.integra-ui .small-box.bg-primary { background: var(--color-brand-secondary) !important; }
.integra-ui .small-box, .integra-ui .small-box h3, .integra-ui .small-box p, .integra-ui .small-box .small-box-footer { color: #fff !important; }

/* ============================================================
   INTEGRA REFINE v3  — fixes from user review:
   (1) login split-screen hardening, (2) collapsed mini-sidebar,
   (3) light modern top bar, (4) modern dashboard/group cards.
   Appended last so it wins over every earlier rule.
   ============================================================ */

/* ------------------------------------------------------------
   (1) LOGIN — make the split-screen robust against AdminLTE's
   login-page skin (which tries to center a single .login-box).
   ------------------------------------------------------------ */
body.integra-ui.login-page {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-bg-light) !important;
}
.integra-login-wrap {
  display: flex !important;
  min-height: 100vh;
  align-items: stretch;
  width: 100%;
}
.integra-login-panel .login-box,
.integra-login-card.login-box {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 420px;
}
.integra-login-card .login-box-body {
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}

/* ------------------------------------------------------------
   (2) COLLAPSED (mini) SIDEBAR — neutralise the v2 flex/padding
   rules and give the icon rail a clean, centered look.
   Higher specificity (.integra-ui.sidebar-collapse) means these
   win regardless of source order.
   ------------------------------------------------------------ */
.integra-ui.sidebar-collapse .sidebar-menu > li > a {
  display: block !important;
  text-align: center;
  padding: 12px 0 !important;
  white-space: nowrap;
  border-left-color: transparent !important;
  margin: 2px 6px;
}
/* center the icon chip, drop the right margin used in expanded mode */
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .fa,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .fas,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .far,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .fab,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .glyphicon,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .ion {
  margin: 0 auto !important;
  float: none !important;
}
/* remove the active accent dot + the treeview caret in mini mode */
.integra-ui.sidebar-collapse .sidebar-menu > li.active > a::after,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .pull-right-container,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .fa-angle-left,
.integra-ui.sidebar-collapse .sidebar-menu > li > a > .fa.pull-right {
  display: none !important;
}
/* the hover fly-out label: solid navy pill sitting next to the rail */
.integra-ui.sidebar-collapse .sidebar-menu > li:hover > a {
  background: rgba(69, 119, 216, 0.16) !important;
}
.integra-ui.sidebar-collapse .sidebar-menu > li:hover > a > span {
  background: var(--color-brand-secondary) !important;
  color: #fff !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 12px 18px !important;
  box-shadow: var(--shadow) !important;
  border-top: none !important;
  min-width: 180px;
}
/* the hover fly-out submenu */
.integra-ui.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background: var(--color-brand-secondary) !important;
  border-radius: 0 0 var(--radius-sm) 0 !important;
  box-shadow: var(--shadow) !important;
  padding: 6px 0 !important;
  margin-left: 0 !important;
}
.integra-ui.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a {
  padding-left: 18px !important;
}

/* ------------------------------------------------------------
   (3) TOP BAR — completely different direction from the navy
   gradient bar: a clean WHITE toolbar with a soft shadow, the
   navy now lives only in the sidebar. Pill search, avatar chip
   user menu, pill language selector, subtle icon buttons.
   ------------------------------------------------------------ */
.integra-ui .main-header .navbar {
  background: var(--color-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06) !important;
}
.integra-ui .main-header .logo {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-right: 1px solid var(--color-border) !important;
}
/* toolbar heading (page title + breadcrumb) -> dark on white */
.integra-ui .integra-topbar-page::after { background: var(--color-border) !important; }
.integra-ui .integra-topbar-page > h1 { color: var(--color-brand-secondary) !important; }
.integra-ui .integra-topbar-page > h1 > small { color: var(--color-text-muted) !important; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li,
.integra-ui .integra-topbar-crumbs .breadcrumb > li > a { color: var(--color-text-muted) !important; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li > a:hover { color: var(--color-brand-primary) !important; }
.integra-ui .integra-topbar-crumbs .breadcrumb > .active { color: var(--color-text-dark) !important; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li + li::before { color: var(--color-border-strong) !important; }
.integra-ui .integra-topbar-crumbs .breadcrumb > li > a > .fa,
.integra-ui .integra-topbar-heading .fa { color: var(--color-brand-primary) !important; }

/* generic right-menu links -> dark, subtle rounded hover buttons */
.integra-ui .main-header .navbar .nav > li > a {
  color: var(--color-brand-secondary) !important;
  border-radius: var(--radius-sm);
  margin: 8px 3px;
  padding: 8px 12px;
  line-height: 1.2;
  transition: var(--transition);
}
.integra-ui .main-header .navbar .nav > li > a:hover,
.integra-ui .main-header .navbar .nav > li > a:focus,
.integra-ui .main-header .navbar .nav .open > a {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-brand-primary) !important;
}
.integra-ui .main-header .navbar .sidebar-toggle { color: var(--color-brand-secondary) !important; }
.integra-ui .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-brand-primary) !important;
}

/* pill search field with the icon tucked inside */
.integra-ui .main-header .navbar .navbar-custom-menu .has-feedback { margin-top: 0 !important; }
.integra-ui .main-header .navbar .search-admin-input {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--color-text-dark) !important;
  height: 38px;
  padding: 0 16px 0 38px;
  box-shadow: none !important;
  min-width: 210px;
  transition: var(--transition);
}
.integra-ui .main-header .navbar .search-admin-input:focus {
  background: var(--color-white) !important;
  border-color: var(--color-brand-primary) !important;
  box-shadow: var(--ring) !important;
}
.integra-ui .main-header .navbar .search-admin-input::placeholder { color: var(--color-text-muted); }
.integra-ui .main-header .navbar .has-feedback .glyphicon-search {
  left: 12px;
  right: auto;
  top: 10px;
  color: var(--color-text-muted);
  z-index: 3;
}

/* user menu as an avatar chip */
.integra-ui .main-header .navbar .user-menu > a {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  height: 38px;
  margin: 8px 4px;
  padding: 4px 14px 4px 5px;
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-brand-secondary) !important;
  font-weight: 600;
}
.integra-ui .main-header .navbar .user-menu > a:hover { background: var(--color-white) !important; border-color: var(--color-brand-primary); }
.integra-ui .main-header .navbar .user-menu > a > .fa-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: #fff !important;
  font-size: 13px;
}

/* compact pill language selector (native + select2) */
.integra-ui .main-header .navbar .navbar-form { padding: 0; margin: 8px 4px !important; }
.integra-ui .main-header .navbar select.form-control,
.integra-ui .main-header .navbar .select2-container--default .select2-selection--single {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  height: 38px !important;
  color: var(--color-brand-secondary) !important;
}
.integra-ui .main-header .navbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: var(--color-brand-secondary) !important;
}
.integra-ui .main-header .navbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }

/* settings gear -> round icon button */
.integra-ui .main-header .navbar .nav > li > a[data-toggle="control-sidebar"] {
  width: 38px;
  text-align: center;
  padding: 8px 0;
}

/* keep the user dropdown header readable (it stays navy) */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header { color: #fff !important; }

/* ------------------------------------------------------------
   (4) DASHBOARD / GROUP CARDS — replace the solid AdminLTE
   small-box look with clean white cards: accent bar, big navy
   number, soft-tinted icon badge, subtle footer link, hover lift.
   ------------------------------------------------------------ */
.integra-ui .small-box {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* neutralise every AdminLTE colour variant -> white card */
.integra-ui .small-box.bg-aqua,
.integra-ui .small-box.bg-blue,
.integra-ui .small-box.bg-light-blue,
.integra-ui .small-box.bg-teal,
.integra-ui .small-box.bg-info,
.integra-ui .small-box.bg-green,
.integra-ui .small-box.bg-success,
.integra-ui .small-box.bg-red,
.integra-ui .small-box.bg-danger,
.integra-ui .small-box.bg-maroon,
.integra-ui .small-box.bg-yellow,
.integra-ui .small-box.bg-orange,
.integra-ui .small-box.bg-warning,
.integra-ui .small-box.bg-purple,
.integra-ui .small-box.bg-navy,
.integra-ui .small-box.bg-primary {
  background: var(--color-white) !important;
}
.integra-ui .small-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--color-brand-primary);
}
.integra-ui .small-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.integra-ui .small-box > .inner { padding: 22px 22px 16px 26px; }
.integra-ui .small-box h3 {
  color: var(--color-brand-secondary) !important;
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1;
}
.integra-ui .small-box p {
  color: var(--color-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  margin: 0;
}
/* icon -> soft azur-tinted rounded badge in the corner */
.integra-ui .small-box > .icon {
  top: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(69, 119, 216, 0.12);
  opacity: 1;
  transition: var(--transition);
}
.integra-ui .small-box > .icon > i {
  font-size: 26px;
  color: var(--color-brand-primary) !important;
}
.integra-ui .small-box:hover > .icon { background: rgba(69, 119, 216, 0.2); }
/* footer link -> light bar, brand link colour, fills on hover */
.integra-ui .small-box .small-box-footer {
  background: var(--color-bg-secondary) !important;
  color: var(--color-brand-primary) !important;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-weight: 600;
  padding: 9px 0;
  transition: var(--transition);
}
.integra-ui .small-box .small-box-footer:hover {
  background: var(--color-brand-primary) !important;
  color: #fff !important;
}

/* bookmarked-project info-box -> modern card */
.integra-ui .info-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.integra-ui .info-box:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.integra-ui .info-box .info-box-icon {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--color-brand-primary) !important;
}

/* cartographic group cards (group_list widget-user) -> rounded + lift */
.integra-ui .box-widget.widget-user,
.integra-ui .widget-user {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.integra-ui .box-widget.widget-user:hover,
.integra-ui .widget-user:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.integra-ui .widget-user .widget-user-header { position: relative; }
.integra-ui .widget-user .widget-user-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 13, 67, 0.45);
}
.integra-ui .widget-user .widget-user-username,
.integra-ui .widget-user .widget-user-desc { position: relative; z-index: 1; }

/* ============================================================
   INTEGRA REFINE v4  — user-review fixes:
   (1) global search pill (clean size + non-overlapping icon),
   (2) modern account dropdown popup,
   (3) right control-sidebar rendered as a centered modal.
   Appended last so it wins over every earlier rule.  NO gradients.
   ============================================================ */

/* ------------------------------------------------------------
   (1) GLOBAL SEARCH — robust pill: fixed height, correct padding,
   magnifier locked to a predictable box on the left so it never
   overlaps the typed text, and clicks fall through to the input.
   ------------------------------------------------------------ */
.integra-ui .main-header .navbar .navbar-custom-menu .has-feedback {
  position: relative;
  margin: 9px 6px 0 !important;   /* replaces the inline margin-top:10px */
  padding: 0;
}
.integra-ui .main-header .navbar .navbar-custom-menu .has-feedback > form {
  position: relative;
  margin: 0;
  padding: 0;
}
.integra-ui .main-header .navbar .search-admin-input {
  display: block;
  float: none;
  width: 240px;
  min-width: 0;
  height: 38px;
  line-height: 38px;
  margin: 0;
  padding: 0 18px 0 42px;          /* left room reserved for the icon box */
  font-size: 14px;
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--color-text-dark) !important;
  box-shadow: none !important;
  transition: var(--transition);
}
.integra-ui .main-header .navbar .search-admin-input:focus {
  background: var(--color-white) !important;
  border-color: var(--color-brand-primary) !important;
  box-shadow: var(--ring) !important;
}
.integra-ui .main-header .navbar .search-admin-input::placeholder {
  color: var(--color-text-muted);
}
/* magnifier: fixed 42px box aligned to the input, centered glyph,
   never overlapping text; pointer-events off so the input gets clicks */
.integra-ui .main-header .navbar .has-feedback .glyphicon-search.form-control-feedback,
.integra-ui .main-header .navbar .has-feedback .glyphicon-search {
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  width: 42px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 991px) {
  .integra-ui .main-header .navbar .search-admin-input { width: 170px; }
}

/* ------------------------------------------------------------
   (2) ACCOUNT DROPDOWN — clean white card: avatar + name header,
   muted registration / last-login rows, modern Profil / coral
   Deconectare buttons.  Hrefs / markup left untouched.
   ------------------------------------------------------------ */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu {
  width: 300px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* header row: flat white, avatar badge + name/info stacked next to it */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  position: relative;
  height: auto;
  background: var(--color-white) !important;
  color: var(--color-text-dark) !important;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
/* fallback avatar badge (fa-user in an azur circle) */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header::before {
  content: "\f007";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
/* if a real avatar image is present, use it and drop the fallback badge */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header:has(img)::before {
  display: none;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header img {
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--color-brand-secondary) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: none;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-header p > small {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted) !important;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}
/* footer: two equal modern buttons */
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
  background: var(--color-bg-light) !important;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer::before,
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer::after {
  content: none;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-left,
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-right {
  float: none !important;
  flex: 1 1 50%;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 9px 12px;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-left .btn {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text-dark) !important;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-left .btn:hover {
  background: var(--color-bg-secondary) !important;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-right .btn {
  background: var(--color-accent-coral) !important;
  border: 1px solid var(--color-accent-coral) !important;
  color: #fff !important;
}
.integra-ui .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .pull-right .btn:hover {
  background: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
}

/* ------------------------------------------------------------
   (3) QUICK MENU AS A CENTERED MODAL — slide-in fully removed.
   custom.js moves the control-sidebar's content into a dedicated
   .integra-cs-modal appended to <body> and empties the original
   <aside>. The rules below keep that aside (and its sliding bg)
   permanently hidden, so NO slide-in panel can EVER appear — only
   the modal. NO gradients.
   ------------------------------------------------------------ */

/* Hard-disable AdminLTE's slide-in aside + its bg, in every state.
   It has been emptied by custom.js, so hiding it loses nothing. */
.integra-ui .control-sidebar,
.integra-ui .control-sidebar-bg,
.integra-ui .control-sidebar.control-sidebar-dark,
.integra-ui .control-sidebar.control-sidebar-light,
body.integra-ui.control-sidebar-open .control-sidebar,
.integra-cs-dead {
  display: none !important;
  visibility: hidden !important;
  transform: none !important;
  right: auto !important;
  left: auto !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Never let AdminLTE shift the layout for the (now dead) control sidebar. */
.integra-ui .control-sidebar-open .content-wrapper,
.integra-ui .control-sidebar-open .right-side,
.integra-ui .control-sidebar-open .main-footer,
.integra-ui .fixed.control-sidebar-open .content-wrapper,
.integra-ui .fixed .control-sidebar {
  margin-right: 0 !important;
}

/* ---- Dimmed backdrop ---- */
.integra-cs-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 13, 67, 0.55);
  z-index: 1040;
}
body.integra-cs-open .integra-cs-backdrop { display: block; }

/* ---- The modal card (built + populated by custom.js) ---- */
.integra-cs-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 92%;
  max-width: 460px;
  max-height: 84vh;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1050;
}
body.integra-cs-open .integra-cs-modal {
  display: flex;
  flex-direction: column;
}

/* header */
.integra-cs-modal .integra-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  flex: 0 0 auto;
}
.integra-cs-modal .integra-cs-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-brand-secondary);
}
.integra-cs-modal .integra-cs-title > .fa {
  color: var(--color-brand-primary);
  margin-right: 8px;
}
.integra-cs-modal .integra-cs-close {
  border: none;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex: 0 0 auto;
}
.integra-cs-modal .integra-cs-close > .fa {
  font-size: 14px;
  line-height: 1;
}
.integra-cs-modal .integra-cs-close:hover {
  background: var(--color-accent-coral);
  color: #fff;
}

/* scrollable body — reset AdminLTE's dark control-sidebar colours */
.integra-cs-modal .integra-cs-body {
  overflow-y: auto;
  padding: 8px 0 14px;
  flex: 1 1 auto;
}
.integra-cs-modal .content,
.integra-cs-modal .tab-pane {
  display: block !important;
  background: transparent !important;
  color: var(--color-text-dark) !important;
  padding: 0;
  position: static !important;
}

/* section headings */
.integra-cs-modal .control-sidebar-heading {
  color: var(--color-text-muted) !important;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 14px 22px 6px;
  margin: 0;
}
.integra-cs-modal .control-sidebar-heading:first-child { padding-top: 4px; }

/* menu items -> clean rows with flat colour icon badges */
.integra-cs-modal .control-sidebar-menu {
  padding: 0 12px;
  margin: 0 0 4px;
  list-style: none;
}
.integra-cs-modal .control-sidebar-menu > li { margin: 0; }
.integra-cs-modal .control-sidebar-menu > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 11px 12px;
  border-radius: var(--radius);
  color: var(--color-text-dark) !important;
  transition: var(--transition);
}
.integra-cs-modal .control-sidebar-menu > li > a:hover {
  background: var(--color-bg-secondary) !important;
}
.integra-cs-modal .control-sidebar-menu .menu-icon {
  position: static;
  float: none;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex: 0 0 auto;
}
.integra-cs-modal .menu-info {
  margin: 0;
  line-height: 1.3;
}
.integra-cs-modal .control-sidebar-subheading {
  margin: 0 0 2px;
  color: var(--color-brand-secondary) !important;
  font-size: 14px;
  font-weight: 700;
}
.integra-cs-modal .menu-info > p {
  margin: 0;
  color: var(--color-text-muted) !important;
  font-size: 12px;
}

@media (max-width: 520px) {
  .integra-cs-modal { width: 94%; max-width: none; }
}

/* ============================================================
   INTEGRA REFINE v6 — modern USER EDIT / CREATE form
   (usersmanage/user_form.html). Crispy emits Bootstrap-3
   `.row > .col-md-6` wrappers around AdminLTE boxes in clashing
   colours (green / red / solid-purple / default). We lift those
   cards into a 3-column INTEGRA grid: Anagraphic, Login and User
   data on the first row (fields stacked, one per row), ACL and
   Backend full-width below. Fields, names, crispy layout, csrf,
   validation, roles JS, avatar upload and submit behaviour are
   all left intact. NO gradients.
   ============================================================ */
.integra-userform { max-width: 1400px; margin: 0 auto; }

/* two-factor quick-action row */
.integra-userform .integra-userform-2fa { margin-bottom: 16px; }
.integra-userform .integra-userform-2fa .btn {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-brand-secondary) !important;
}
.integra-userform .integra-userform-2fa .btn:hover { background: var(--color-bg-secondary) !important; }
.integra-userform .integra-userform-2fa .btn > .fa { color: var(--color-brand-primary); }

/* ---- 3-column card grid ------------------------------------------
   Source order is Anagraphic | ACL | Login | User data | Backend.
   We flatten Bootstrap rows and REORDER so the three compact cards
   sit on the first row (Anagraphic, Login, User data) with fields
   stacked on 3 rows inside each. ACL (long) and Backend span the
   full width below. Alert + action bar stay full-width bookends.    */
.integra-userform #user-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.integra-userform #user-form > .alert {
  grid-column: 1 / -1;
  order: 0;
  margin: 0;
}
.integra-userform #user-form > .integra-form-actions {
  grid-column: 1 / -1;
  order: 6;
}
.integra-userform #user-form > input[type="hidden"] { display: none !important; }
.integra-userform #user-form > .row {
  display: contents;
  margin: 0;
}
.integra-userform #user-form > .row > [class*="col-"] {
  width: 100%;
  max-width: none;
  min-width: 0;
  float: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.integra-userform #user-form > .row > [class*="col-"]:has(.box-success) { order: 1; }
.integra-userform #user-form > .row > [class*="col-"]:has(.box-danger) { order: 2; }
.integra-userform #user-form > .row > [class*="col-"]:has(#div_id_other_info),
.integra-userform #user-form > .row > [class*="col-"]:has(#div_id_avatar) { order: 3; }
.integra-userform #user-form > .row > [class*="col-"]:has(.acl-box),
.integra-userform #user-form > .row > [class*="col-"]:has(.bg-purple) {
  order: 4;
  grid-column: 1 / -1;
}
.integra-userform #user-form > .row > [class*="col-"]:has(#div_id_backend) {
  order: 5;
  grid-column: 1 / -1;
}
@media (max-width: 1199px) {
  .integra-userform #user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .integra-userform #user-form { grid-template-columns: 1fr; }
}

/* Every crispy box -> uniform full-width white INTEGRA card (kills colour clash) */
.integra-userform .box {
  border: 1px solid var(--color-border) !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--color-white) !important;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 0;
}
/* neutralise the solid-purple ACL box + coloured top bars */
.integra-userform .box.box-solid.bg-purple,
.integra-userform .box.bg-purple,
.integra-userform .box.acl-box,
.integra-userform .box.box-success,
.integra-userform .box.box-danger,
.integra-userform .box.box-default {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}
/* keep text readable inside the (formerly white-on-purple) ACL box */
.integra-userform .box.bg-purple label,
.integra-userform .box.bg-purple .control-label,
.integra-userform .box.bg-purple .checkbox,
.integra-userform .box.bg-purple .radio,
.integra-userform .box.bg-purple p { color: var(--color-text-dark) !important; }
.integra-userform .box.bg-purple .help-block { color: var(--color-text-muted) !important; }

/* card header: light bar + brand icon chip + navy title */
.integra-userform .box > .box-header,
.integra-userform .box-header.with-border {
  background: var(--color-bg-light) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 15px 20px !important;
  display: flex;
  align-items: center;
}
.integra-userform .box-header .box-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-secondary) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  line-height: 1.2;
}
.integra-userform .box-header .box-title > .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary) !important;
  font-size: 15px;
  flex: 0 0 auto;
}
/* card body: one field per row (Anagraphic + Login each read as
   3 stacked rows). The wide ACL card is the exception — its six
   fields sit on two rows of three now that it spans the page. */
.integra-userform .box-body {
  padding: 22px !important;
  background: var(--color-white) !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
/* Bootstrap/AdminLTE add clearfix ::before/::after on .box-body; inside a
   grid these become phantom grid items that steal the first cell. */
.integra-userform .box-body::before,
.integra-userform .box-body::after { content: none; display: none; }
.integra-userform .box-body > * { grid-column: 1 / -1; min-width: 0; }

/* crispy upload helpers are not meant to be visible fields */
.integra-userform #div_id_form_id,
.integra-userform #div_id_upload_url { display: none !important; }

/* ACL is full-width: checkboxes + group selects on 3 columns */
.integra-userform .box.acl-box .box-body,
.integra-userform .box.bg-purple .box-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
}
.integra-userform .box.acl-box .box-body > *,
.integra-userform .box.bg-purple .box-body > * { grid-column: span 1; }

.integra-userform #id_other_info {
  min-height: 88px;
  max-height: 140px;
  resize: vertical;
}

@media (max-width: 719px) {
  .integra-userform .box.acl-box .box-body,
  .integra-userform .box.bg-purple .box-body { grid-template-columns: 1fr; }
  .integra-userform .box.acl-box .box-body > *,
  .integra-userform .box.bg-purple .box-body > * { grid-column: 1 / -1; }
}

/* fields: build on the existing .form-control theme; tidy spacing.
   The grid `gap` now owns vertical rhythm, so kill the legacy margins. */
.integra-userform .form-group { margin-bottom: 0; }
.integra-userform .box-body > .checkbox,
.integra-userform .box-body .checkbox { margin: 0; }
.integra-userform .control-label { font-weight: 600; margin-bottom: 6px; }
.integra-userform .help-block { margin-bottom: 0; margin-top: 6px; }
.integra-userform .select2-container { width: 100% !important; }
.integra-userform .help-block b { color: var(--color-text-dark); }

/* Boolean switches (is_active / is_superuser / is_staff).

   Bootstrap positions a checkbox input absolutely and reserves 20px of label
   padding for it, but iCheck replaces the input with an in-flow control — so
   that padding is dead space, and the help text, a sibling of the label rather
   than a child, started at the card edge instead of under its own label. */
.integra-userform .checkbox { padding-left: 0; }
.integra-userform .checkbox > label {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--color-text-dark);
  cursor: pointer;
}
.integra-userform .checkbox > .help-block {
  /* control width (19px) + the margin-right it carries (8px) */
  padding-left: 27px;
  margin-top: 4px;
}

/* prepended-icon login fields (fa-user / fa-lock) -> brand addon */
.integra-userform .input-group-addon {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
  color: var(--color-brand-primary);
}

/* avatar preview */
.integra-userform .img-thumbnail {
  border-radius: var(--radius);
  border-color: var(--color-border);
  margin-top: 10px;
}

/* ---- action bar: sticky, flat, Save=coral / Back=secondary ---- */
.integra-userform .integra-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.integra-userform .integra-form-actions .row { margin: 0; }
.integra-userform .integra-form-actions .col-md-12 {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.integra-userform .integra-form-actions .btn { margin: 0; }
.integra-userform .integra-form-actions .btn-success {
  background: var(--color-accent-coral) !important;
  border-color: var(--color-accent-coral) !important;
  color: #fff !important;
}
.integra-userform .integra-form-actions .btn-success:hover {
  background: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
}
.integra-userform .integra-form-actions .btn-default {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text-dark) !important;
}
.integra-userform .integra-form-actions .btn-default:hover { background: var(--color-bg-secondary) !important; }

/* ============================================================
   THIRD-PARTY WIDGETS & ADMINLTE COLOUR UTILITIES

   Everything below covers components the theme did not reach: widgets whose
   markup is generated by JavaScript (Summernote, iCheck, django-file-form) and
   AdminLTE's decorative colour utilities. They all sit *inside* pages that are
   otherwise fully themed, which is exactly why they stood out.
   ============================================================ */

/* ------------------------------------------------------------
   AdminLTE bg-* utilities -> INTEGRA palette

   Upstream templates pick these decoratively, so a single form can stack
   unrelated hues (the ACL card is bg-purple = #605ca8, which is nowhere in
   this palette). Fold the purely decorative hues onto the brand colours and
   leave green / yellow / red alone so genuine status still reads as status.
   AdminLTE sets these with !important, so these have to match it.
   ------------------------------------------------------------ */
.integra-ui .bg-purple,
.integra-ui .bg-purple-active,
.integra-ui .bg-fuchsia,
.integra-ui .bg-fuchsia-active,
.integra-ui .bg-maroon,
.integra-ui .bg-maroon-active,
.integra-ui .bg-navy,
.integra-ui .bg-navy-active,
.integra-ui .bg-black,
.integra-ui .bg-black-active {
  background-color: var(--color-brand-secondary) !important;
}

.integra-ui .bg-aqua,
.integra-ui .bg-aqua-active,
.integra-ui .bg-blue,
.integra-ui .bg-blue-active,
.integra-ui .bg-light-blue,
.integra-ui .bg-light-blue-active,
.integra-ui .bg-teal,
.integra-ui .bg-teal-active {
  background-color: var(--color-brand-primary) !important;
}

.integra-ui .bg-olive,
.integra-ui .bg-olive-active,
.integra-ui .bg-lime {
  background-color: var(--color-success) !important;
}

/* Solid boxes that take their header colour from a bg-* utility */
.integra-ui .box.box-solid.bg-purple > .box-header,
.integra-ui .box.box-solid.bg-navy > .box-header,
.integra-ui .box.box-solid.bg-maroon > .box-header,
.integra-ui .box.box-solid.bg-fuchsia > .box-header,
.integra-ui .box.box-solid.bg-black > .box-header {
  background-color: var(--color-brand-secondary) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.integra-ui .box.box-solid.bg-purple,
.integra-ui .box.box-solid.bg-navy,
.integra-ui .box.box-solid.bg-maroon,
.integra-ui .box.box-solid.bg-fuchsia,
.integra-ui .box.box-solid.bg-black {
  border-color: var(--color-brand-secondary) !important;
}
/* A collapsed solid box renders as a lone coloured bar: round it off so it
   reads as a deliberate header rather than a clipped card. */
.integra-ui .box.box-solid.collapsed-box > .box-header {
  border-radius: var(--radius);
}
.integra-ui .box.box-solid > .box-header .box-title,
.integra-ui .box.box-solid > .box-header > .box-tools .btn {
  color: #fff !important;
}

/* Decorative box-success / box-danger inside a form.

   Upstream form templates pick these for visual variety, not meaning, so a
   blank add form can show three red-topped cards that read as validation
   errors. Neutralise them to the brand accent, but only inside a <form> — a
   standalone status box elsewhere keeps its semantic colour. */
.integra-ui form .box.box-success,
.integra-ui form .box.box-danger,
.integra-ui form .box.box-warning {
  border-top-color: var(--color-brand-primary);
}

/* ------------------------------------------------------------
   django-modeltranslation "translatable field" marker

   g3wadmin.min.css marks these with "border: 1px dashed #069", a hard teal
   that reads as a debug outline. The marker carries real information, so keep
   it and bring it into the palette instead of removing it.
   ------------------------------------------------------------ */
.integra-ui .translate,
.integra-ui .translate + div.note-editor {
  border: 1px dashed rgba(69, 119, 216, 0.55) !important;
  border-radius: var(--radius-sm) !important;
}
.integra-ui .translate:focus {
  border-style: solid !important;
  border-color: var(--color-brand-primary) !important;
}

/* ------------------------------------------------------------
   Summernote (rich text editor)
   Container is ".note-editor.note-frame.panel".
   ------------------------------------------------------------ */
.integra-ui .note-editor.note-frame {
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  margin-bottom: 0;
  overflow: hidden;
}
.integra-ui .note-editor.note-frame.codeview { background: var(--color-bg-secondary); }

.integra-ui .note-editor .note-toolbar {
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 10px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Reset Bootstrap's btn-group joining so buttons can be rounded individually */
.integra-ui .note-editor .note-btn-group {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 4px;
  box-shadow: none;
}
.integra-ui .note-editor .note-btn-group > .note-btn {
  border-radius: 6px !important;
  margin: 0;
}
.integra-ui .note-editor .note-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: var(--transition);
}
.integra-ui .note-editor .note-btn:hover,
.integra-ui .note-editor .note-btn:focus {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
  color: var(--color-brand-secondary);
}
.integra-ui .note-editor .note-btn.active,
.integra-ui .note-editor .note-btn:active {
  background: rgba(69, 119, 216, 0.14);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-dark);
  box-shadow: none;
}
.integra-ui .note-editor .note-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.integra-ui .note-editor .note-btn .note-icon-caret { margin-left: 2px; }

/* Editable area + placeholder */
.integra-ui .note-editor .note-editing-area { background: var(--color-white); }
.integra-ui .note-editor .note-editable {
  padding: 14px 16px;
  background: var(--color-white);
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.integra-ui .note-editor .note-placeholder {
  padding: 14px 16px;
  color: #94A3B8;
}
.integra-ui .note-editor .note-codable {
  background: var(--color-brand-secondary);
  color: #E2E8F0;
  font-size: 13px;
  padding: 14px 16px;
  border: 0;
}

/* Status / resize bar */
.integra-ui .note-editor .note-statusbar {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}
.integra-ui .note-editor .note-statusbar:hover { background: var(--color-bg-secondary); }
.integra-ui .note-editor .note-statusbar .note-resizebar {
  height: 9px;
  padding-top: 2px;
  border-top: 0;
}
.integra-ui .note-editor .note-statusbar .note-resizebar .note-icon-bar {
  border-bottom: 1px solid var(--color-border-strong);
  width: 22px;
  margin: 1px auto;
}

/* Dropdowns, colour palette and dialogs */
.integra-ui .note-editor .note-dropdown-menu {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 5px;
}
.integra-ui .note-editor .note-dropdown-item,
.integra-ui .note-editor .note-dropdown-menu > li > a {
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--color-text-dark);
  font-size: 13.5px;
}
.integra-ui .note-editor .note-dropdown-item:hover,
.integra-ui .note-editor .note-dropdown-menu > li > a:hover {
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary-dark);
}
.integra-ui .note-editor .note-color-palette .note-color-btn { border: 1px solid var(--color-border); }
.integra-ui .note-editor .note-color-reset,
.integra-ui .note-editor .note-color-select {
  border-radius: 6px;
  font-size: 12.5px;
}
.integra-ui .note-modal .modal-content { border-radius: var(--radius); }
.integra-ui .note-modal .note-form-label { color: var(--color-brand-secondary); font-weight: 600; }
.integra-ui .note-modal .note-input {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.integra-ui .note-modal .note-input:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
  outline: none;
}
.integra-ui .note-modal .note-btn-primary {
  background: var(--color-accent-coral);
  border-color: var(--color-accent-coral);
  color: #fff;
}

/* ------------------------------------------------------------
   File inputs

   g3wadmin.min.css paints the native picker button #00c0ef, which competes
   with the coral this theme reserves for primary actions. Make it a quiet
   secondary control: choosing a file is not the primary action on the form.
   ------------------------------------------------------------ */
.integra-ui input[type="file"] {
  padding: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: 13.5px;
  cursor: pointer;
}
.integra-ui input[type="file"]:focus-within,
.integra-ui input[type="file"]:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
  outline: none;
}
.integra-ui input[type="file"]::file-selector-button,
.integra-ui input[type="file"]::-webkit-file-upload-button {
  margin: 0 14px 0 0 !important;
  height: 38px;
  padding: 0 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  background: var(--color-bg-secondary) !important;
  color: var(--color-brand-secondary) !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.integra-ui input[type="file"]::file-selector-button:hover,
.integra-ui input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-border) !important;
  color: var(--color-brand-primary-dark) !important;
}

/* django-file-form dropzone */
.integra-ui .dff-uploader .dff-container {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  padding: 18px;
  transition: var(--transition);
}
.integra-ui .dff-uploader .dff-container:hover,
.integra-ui .dff-uploader .dff-container.dff-dropping {
  border-color: var(--color-brand-primary);
  background: rgba(69, 119, 216, 0.06);
}
.integra-ui .dff-uploader .dff-drop-hint {
  color: var(--color-text-muted);
  font-size: 13.5px;
  text-align: center;
}
.integra-ui .dff-uploader .dff-files:not(:empty) { margin-top: 10px; }
.integra-ui .dff-uploader .dff-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text-dark);
}
.integra-ui .dff-uploader .dff-filename { font-weight: 600; }
.integra-ui .dff-uploader .dff-delete,
.integra-ui .dff-uploader .dff-cancel {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.integra-ui .dff-uploader .dff-delete:hover,
.integra-ui .dff-uploader .dff-cancel:hover { color: var(--color-danger); }
.integra-ui .dff-uploader .dff-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.integra-ui .dff-uploader .dff-progress-bar { background: var(--color-brand-primary); height: 100%; }
/* :not(:empty) matters — django-file-form creates these containers up front and
   leaves them empty, so styling them unconditionally paints an empty red bar
   under every upload field. */
.integra-ui .dff-uploader .dff-invalid-files:not(:empty),
.integra-ui .dff-uploader .dff-error:not(:empty) {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   iCheck checkboxes / radios

   iCheck hides the real input and draws a sprite. The flat-green skin is
   off-palette, so draw the control in CSS instead: the sprite background is
   dropped and the checked state becomes a brand-coloured box with a CSS tick.
   iCheck toggles .checked / .hover / .disabled on the wrapper div.
   ------------------------------------------------------------ */
.integra-ui .icheckbox_flat-green,
.integra-ui .iradio_flat-green {
  position: relative;
  display: inline-block;
  width: 19px !important;
  height: 19px !important;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--color-white) !important;
  background-image: none !important;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 5px;
  transition: var(--transition);
  cursor: pointer;
}
.integra-ui .iradio_flat-green { border-radius: 50%; }

.integra-ui .icheckbox_flat-green.hover,
.integra-ui .iradio_flat-green.hover { border-color: var(--color-brand-primary); }

.integra-ui .icheckbox_flat-green.checked,
.integra-ui .iradio_flat-green.checked {
  background: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary);
}
/* Tick drawn with a rotated border, so no sprite or icon font is needed */
.integra-ui .icheckbox_flat-green.checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.integra-ui .iradio_flat-green.checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
.integra-ui .icheckbox_flat-green.disabled,
.integra-ui .iradio_flat-green.disabled {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 1;
}
.integra-ui .icheckbox_flat-green.checked.disabled,
.integra-ui .iradio_flat-green.checked.disabled {
  background: var(--color-border-strong) !important;
  border-color: var(--color-border-strong);
}
/* iCheck wraps the control in a div beside the label text */
.integra-ui .checkbox label > .icheckbox_flat-green,
.integra-ui .radio label > .iradio_flat-green { margin-top: -2px; }

/* ============================================================
   DATATABLES

   The table head was already themed, but everything DataTables draws around
   it -- the length select, the search box, the record count and the pager --
   stayed Bootstrap 3 default. Themed here rather than per page so every
   dataTable list picks it up.
   ============================================================ */

.integra-ui .dataTables_wrapper { position: relative; }

/* Top and bottom control rows */
.integra-ui .dataTables_wrapper .row:first-child,
.integra-ui .dataTables_wrapper .row:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.integra-ui .dataTables_wrapper .row:first-child { margin-bottom: 14px; }
.integra-ui .dataTables_wrapper .row:last-child { margin-top: 14px; }
.integra-ui .dataTables_wrapper .row:first-child > [class*="col-"],
.integra-ui .dataTables_wrapper .row:last-child > [class*="col-"] {
  width: auto;
  float: none;
  padding: 0;
  flex: 1 1 auto;
}
/* Search box and pager sit on the right of their row */
.integra-ui .dataTables_wrapper .dataTables_filter,
.integra-ui .dataTables_wrapper .dataTables_paginate { text-align: right; }

/* "Show N entries" and "Search:" labels */
.integra-ui .dataTables_wrapper .dataTables_length label,
.integra-ui .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.integra-ui .dataTables_wrapper .dataTables_length select.form-control {
  width: auto;
  min-width: 72px;
  min-height: 36px;
  height: 36px;
  padding: 0 30px 0 11px;
  font-size: 13px;
}
.integra-ui .dataTables_wrapper .dataTables_filter input[type="search"] {
  width: 220px;
  min-height: 36px;
  height: 36px;
  padding: 0 13px;
  font-size: 13px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  box-shadow: none;
  transition: var(--transition);
}
.integra-ui .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
  outline: none;
}
.integra-ui .dataTables_wrapper .dataTables_filter input[type="search"]::placeholder { color: #94A3B8; }

/* Record count */
.integra-ui .dataTables_wrapper .dataTables_info {
  padding: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Pager: .pagination itself is themed in the PAGINATION section above; these
   only strip the surrounding margins DataTables adds. */
.integra-ui .dataTables_wrapper .dataTables_paginate { padding: 0; }
.integra-ui .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.integra-ui .dataTables_wrapper .dataTables_paginate .pagination > li > a { font-size: 13px; }
.integra-ui .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
.integra-ui .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a:hover {
  color: var(--color-faint, #94A3B8);
  background: var(--color-bg-light);
  border-color: var(--color-border);
}

/* Empty-table message */
.integra-ui .dataTables_wrapper td.dataTables_empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
}

/* Sort indicators: DataTables draws these with Glyphicons in a ::after, so
   keep the glyphs and only bring their colour into the palette. */
.integra-ui table.dataTable thead .sorting:after,
.integra-ui table.dataTable thead .sorting_asc:after,
.integra-ui table.dataTable thead .sorting_desc:after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  opacity: 1;
}
.integra-ui table.dataTable thead .sorting:after {
  color: var(--color-border-strong);
  opacity: 1;
}
.integra-ui table.dataTable thead .sorting_asc:after,
.integra-ui table.dataTable thead .sorting_desc:after {
  color: var(--color-brand-primary);
}
.integra-ui table.dataTable thead > tr > th.sorting,
.integra-ui table.dataTable thead > tr > th.sorting_asc,
.integra-ui table.dataTable thead > tr > th.sorting_desc {
  padding-right: 28px;
}
.integra-ui table.dataTable thead > tr > th.sorting:hover { background: var(--color-bg-secondary); }

/* A themed table needs no zebra stripes as well as hover rows; the stripe
   fights the row hover and makes the grid noisier than it needs to be. */
.integra-ui table.dataTable.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.integra-ui table.dataTable.table-hover > tbody > tr:hover { background: var(--color-bg-light); }

/* ------------------------------------------------------------
   Horizontal overflow

   Wide lists (the users table carries 13 columns for a superuser) were cut
   off at the viewport edge with no way to reach the far columns.

   DataTables lays its wrapper out as three rows -- controls, table, footer --
   with the table alone in a .col-sm-12. Scrolling that column, rather than a
   container added in the template, keeps the search box and pager still while
   only the grid moves, and applies to every dataTable list without touching
   any template.
   ------------------------------------------------------------ */
.integra-ui .dataTables_wrapper > .row > .col-sm-12 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.integra-ui .dataTables_wrapper > .row > .col-sm-12 > table.dataTable { min-width: 100%; }

/* ============================================================
   FIELD LEFTOVERS

   Three field types that kept browser or library defaults inside otherwise
   themed forms. All three show up on the user form, and all three appear
   elsewhere too, so they are fixed here rather than per page.
   ============================================================ */

/* ------------------------------------------------------------
   Empty multi-select pickers

   A Select2 multi-select with nothing chosen renders as an empty bordered box:
   no chevron, no placeholder, nothing to say it opens a list. On the user form
   the three role/group pickers read as dead inputs. Give them the same chevron
   the single selects carry, and a click target wide enough to hit.
   ------------------------------------------------------------ */
.integra-ui .select2-container--default .select2-selection--multiple {
  position: relative;
  padding-right: 34px;
  cursor: pointer;
}
.integra-ui .select2-container--default .select2-selection--multiple::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: transform 0.15s ease;
}
.integra-ui .select2-container--default.select2-container--open .select2-selection--multiple::after {
  transform: rotate(180deg);
}
/* The inline search field is where typing happens — make it a real target
   rather than a few pixels wide next to the last chip. */
.integra-ui .select2-container--default .select2-selection--multiple .select2-search--inline {
  flex: 1 1 90px;
  min-width: 90px;
  display: flex;
}
.integra-ui .select2-container--default .select2-selection--multiple .select2-search__field {
  width: 100% !important;
  min-height: 30px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.integra-ui .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: #94A3B8;
}

/* ------------------------------------------------------------
   Help-block lists

   Django's password validators emit a raw <ul> inside .help-block, which lands
   with default disc bullets and default indentation in the middle of otherwise
   designed hint text.
   ------------------------------------------------------------ */
.integra-ui .help-block ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.integra-ui .help-block ul > li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 3px;
  font-size: 12.5px;
  line-height: 1.5;
}
.integra-ui .help-block ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.integra-ui .help-block ul > li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Oversized textareas

   Several textareas carry rows="10" from the form definition, which makes them
   ~240px tall and lets one notes field dominate its card.

   Set `height` rather than `max-height`: a CSS height overrides the height the
   rows attribute implies, and unlike a cap it still lets `resize: vertical`
   drag the field both taller and shorter.
   ------------------------------------------------------------ */
.integra-ui textarea.form-control {
  min-height: 96px;
  height: 150px;
  resize: vertical;
}

/* ============================================================
   LIST PAGE COMPONENT (.integra-lp)

   Shared shell for the admin's table pages: a header card carrying the record
   count and the primary action, then a panel holding a dataTable, with pill
   row actions, chip sets and boolean flags.

   Lives here rather than in each template so sibling list pages (users, user
   groups, and any future one) stay identical without duplicating ~180 lines of
   page CSS each time.
   ============================================================ */

/* ---------- Header card ---------- */
.integra-lp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.integra-lp-head-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.integra-lp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary);
  font-weight: 800;
  font-size: 16px;
}
.integra-lp-head-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-brand-secondary);
}
.integra-lp-head-title p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---------- Table panel ---------- */
.integra-lp-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 20px;
}
.integra-lp table.dataTable { margin: 0 !important; }
.integra-lp table.dataTable > thead > tr > th {
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle;
}
.integra-lp table.dataTable > tbody > tr > td {
  vertical-align: middle;
  font-size: 13.5px;
  border-top-color: var(--color-border) !important;
}
/* Primary identifier in a row */
.integra-lp-name {
  font-weight: 700;
  color: var(--color-brand-secondary);
  white-space: nowrap;
}
.integra-lp-muted {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------- Row actions ---------- */
.integra-lp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.integra-lp-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.integra-lp-act:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
.integra-lp-act.integra-lp-act--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
}
/* Placeholder so rows the current user cannot act on keep their column width
   instead of collapsing and misaligning the grid. */
.integra-lp-act-none {
  display: inline-block;
  width: 30px;
  height: 30px;
}

/* ---------- Chip sets ---------- */
.integra-lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.integra-lp-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Authority reads as weight of the brand, not as unrelated hues. */
.integra-lp-chip--strong {
  background: var(--color-brand-secondary);
  color: #fff;
}
.integra-lp-chip--accent {
  background: rgba(69, 119, 216, 0.18);
  color: var(--color-brand-primary-dark);
}
.integra-lp-chip--plain {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}
.integra-lp-chip--warm {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
/* Chips that are links (a user, a macro group) */
a.integra-lp-chip {
  background: var(--color-bg-secondary);
  color: var(--color-brand-secondary);
  font-weight: 600;
  transition: var(--transition);
}
a.integra-lp-chip:hover {
  background: var(--color-brand-primary);
  color: #fff;
}

/* ---------- Boolean flags ----------
   A dot in both states reads faster in a dense grid than a check that simply
   vanishes when false, and it keeps the columns aligned. The theme's *-bg
   tints are near-white, so these use a stronger wash of the same hue. */
.integra-lp-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
}
.integra-lp-flag--on {
  background: rgba(22, 163, 74, 0.14);
  color: var(--color-success);
}
.integra-lp-flag--priv {
  background: rgba(217, 119, 6, 0.16);
  color: var(--color-warning);
}
.integra-lp-flag--off {
  background: var(--color-bg-secondary);
  color: var(--color-border-strong);
}

/* ---------- Empty state ----------
   One composed card, not a header card plus a full-width panel: on an empty
   list those were two mostly-blank boxes stating the same fact twice. The card
   is width-constrained so the copy reads at a sensible measure and the block
   sits centred in the page instead of stretching across it. */
.integra-lp-empty {
  display: flex;
  justify-content: center;
}
.integra-lp-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  color: var(--color-text-muted);
}
.integra-lp-empty h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-brand-secondary);
}
.integra-lp-empty p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.integra-lp-empty .btn { margin-top: 5px; }

/* Mini-diagram: member chips held inside one dashed container — the thing a
   group is, drawn rather than stated a second time in words. */
.integra-lp-empty-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 15px;
  margin-bottom: 3px;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: 14px;
  background: var(--color-bg-light);
}
.integra-lp-empty-art > span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  position: relative;
}
/* a simple head-and-shoulders glyph, drawn with two pseudo-elements */
.integra-lp-empty-art > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.integra-lp-empty-art > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 7px;
  margin-left: -7px;
  border-radius: 7px 7px 0 0;
  background: var(--color-border-strong);
}
/* The middle member takes the accent, so the trio reads as a set with a lead
   rather than three identical repeats. */
.integra-lp-empty-art > span:nth-child(2) {
  width: 32px;
  height: 32px;
}
.integra-lp-empty-art > span:nth-child(2)::before { background: var(--color-brand-primary); }
.integra-lp-empty-art > span:nth-child(2)::after  { background: var(--color-brand-primary); }

@media (max-width: 575px) {
  .integra-lp-panel { padding: 14px; }
}

/* ============================================================
   PROJECT LIST (.integra-pl)

   The projects table of a cartographic group. Lives here rather than in the
   template because that template is an AJAX fragment: a <style> block inside
   it would be re-inserted, and stack up, on every reload.
   ============================================================ */

.integra-pl {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.integra-pl-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.integra-pl-head .btn { margin: 0; }
.integra-pl-body { padding: 4px 18px 18px; }

/* ---------- Tabs ---------- */
.integra-pl-tabs.nav-tabs-custom {
  background: transparent;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}
.integra-pl-tabs > .nav-tabs {
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  margin: 0 0 4px;
  display: flex;
  gap: 4px;
}
.integra-pl-tabs > .nav-tabs > li { margin: 0; float: none; }
/* Layout only. The active/inactive treatment comes from the theme's NAV TABS
   section, so these tabs match every other tab in the app instead of
   introducing a third, competing style. */
.integra-pl-tabs > .nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin: 0;
  font-size: 13.5px;
}
.integra-pl-tabs > .nav-tabs > li > a > .fa { color: var(--color-brand-primary); }
.integra-pl-tabcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.integra-pl-tabs > .nav-tabs > li.active > a .integra-pl-tabcount {
  background: rgba(69, 119, 216, 0.16);
  color: var(--color-brand-primary-dark);
}
.integra-pl-tabs > .tab-content { padding: 14px 0 0; }

/* ---------- Table ---------- */
/* Nine row actions plus thumbnails make this table wide; scroll it in place
   rather than letting it run off the page. */
.integra-pl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.integra-pl table { margin: 0 !important; }
.integra-pl table > thead > tr > th {
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle;
  padding: 10px 12px;
}
.integra-pl table > tbody > tr > td {
  vertical-align: middle;
  font-size: 13.5px;
  padding: 12px;
  border-top-color: var(--color-border) !important;
}
.integra-pl table.table-hover > tbody > tr:hover { background: var(--color-bg-light); }
/* Sortable placeholder for the drag-to-reorder rows */
.integra-ui .sort-highlight-project {
  background: rgba(69, 119, 216, 0.08);
  outline: 2px dashed var(--color-brand-primary);
  outline-offset: -2px;
  height: 84px;
}

/* ---------- Panoramic radio ---------- */
.integra-pl-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}
.integra-pl-radio:hover { border-color: var(--color-brand-primary); }
.integra-pl-radio:checked {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
}
.integra-pl-radio:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
.integra-pl-radio:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Bookmark ----------
   The stock markup carried style="color:red" inline. A bookmark is a saved
   state, not a warning, so it takes the brand accent when on and stays quiet
   when off. */
.integra-pl-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-border-strong);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
}
.integra-pl-bookmark:hover {
  background: var(--color-bg-secondary);
  color: var(--color-brand-primary);
}
.integra-pl-bookmark.is-on { color: var(--color-accent-coral); }
.integra-pl-bookmark.is-on:hover { color: var(--color-accent-coral-dark); }

/* ---------- Row actions ----------
   The stock template wrapped each icon in <span class="col-xs-2 icon">, using
   Bootstrap grid columns as icon holders — nine of them floated into a ragged
   3x3 blob. A wrapping flex row with a fixed track keeps them on a tidy grid. */
.integra-pl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  /* 5 tracks of 30px plus 4 gaps of 5px = 170px; the extra few pixels absorb
     sub-pixel rounding so the ninth action does not fall to a third row. */
  max-width: 176px;
}
.integra-pl-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.integra-pl-act:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
/* Opening the map is the main thing you come here to do */
.integra-pl-act--map {
  background: rgba(69, 119, 216, 0.12);
  border-color: rgba(69, 119, 216, 0.35);
  color: var(--color-brand-primary-dark);
}
.integra-pl-act--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
}
/* Restore carries a label: it is the reason the trash tab gets opened. */
.integra-pl-restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  background: var(--color-success);
  border: 1px solid var(--color-success);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.integra-pl-restore:hover { filter: brightness(1.08); color: #fff; }

/* ---------- Thumbnail ---------- */
.integra-pl-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  overflow: hidden;
  transition: var(--transition);
}
a.integra-pl-thumb:hover { border-color: var(--color-brand-primary); }
.integra-pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Local fallback, so a missing thumbnail does not depend on an external
   placeholder image service being reachable. */
.integra-pl-thumb-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-border-strong);
  font-size: 18px;
}

/* ---------- Cell content ---------- */
.integra-pl-title {
  font-weight: 700;
  color: var(--color-brand-secondary);
}
a.integra-pl-title:hover { color: var(--color-brand-primary); }
.integra-pl-title.is-plain { color: var(--color-text-muted); }
.integra-pl-alias {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-brand-primary-dark);
  white-space: nowrap;
}
.integra-pl-alias.is-plain { color: var(--color-text-muted); }
.integra-pl-dash { color: var(--color-border-strong); }
.integra-pl-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.integra-pl-dates em {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-faint, #94A3B8);
  margin-right: 4px;
}

/* ---------- Empty states ---------- */
.integra-pl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 24px;
  text-align: center;
  color: var(--color-text-muted);
}
.integra-pl-empty-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  color: var(--color-border-strong);
  font-size: 22px;
}
.integra-pl-empty h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-brand-secondary);
}
.integra-pl-empty p { margin: 0; font-size: 13px; max-width: 44ch; line-height: 1.6; }

@media (max-width: 575px) {
  .integra-pl-body { padding: 4px 14px 14px; }
}

/* ============================================================
   LAYERS LIST (.integra-ll)

   The layers table of a QGIS project. Most of the row actions are rendered by
   the {% g3wadmin_layer_actions %} tag from other apps' templates, so the
   levers here are the shared classes those templates emit -- .layer-action,
   .label-action-layer and the col-xs-1 icon wrappers -- rather than markup.
   ============================================================ */

/* ---------- Project header card ---------- */
.integra-ll-project {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.integra-ll-project-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  object-fit: cover;
}
.integra-ll-project-text { min-width: 0; margin-right: auto; }
.integra-ll-project-text h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-brand-secondary);
  word-break: break-word;
}
.integra-ll-project-desc {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.integra-ll-project-desc p:last-child { margin-bottom: 0; }
.integra-ll-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.integra-ll-project-actions .btn {
  height: 36px;
  width: auto;
  margin: 0;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
  box-shadow: none;
}
.integra-ll-project-actions .btn > .fa { font-size: 13px; color: var(--color-brand-primary); }
.integra-ll-project-actions .btn:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
.integra-ll-project-actions .btn:hover > .fa { color: #fff; }
/* Opening the map is the primary thing here, so it carries the accent */
.integra-ll-project-actions .integra-ll-btn-map {
  background: rgba(69, 119, 216, 0.12);
  border-color: rgba(69, 119, 216, 0.4);
  color: var(--color-brand-primary-dark);
}

/* ---------- Toolbar above the table ---------- */
.integra-ll-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.integra-ll-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: auto;
}
.integra-ll-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Those actions come from the tag as bare icon links */
.integra-ll-toolbar-actions .col-xs-1,
.integra-ll-toolbar-actions .icon { width: auto; float: none; padding: 0; }

/* ---------- Table ---------- */
.integra-ll table.dataTable { margin: 0 !important; }
.integra-ll table.dataTable > thead > tr > th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle;
  padding: 10px 10px;
  line-height: 1.35;
}
.integra-ll table.dataTable > tbody > tr > td {
  vertical-align: middle;
  font-size: 13px;
  padding: 12px 10px;
  border-top-color: var(--color-border) !important;
}
/* Layer label: the stock markup carried an inline font-size and colour */
.integra-ll-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--color-brand-secondary);
}
/* Layer type icon: the include ships an unsized SVG */
.integra-ll-type svg,
.integra-ll-type img { width: 20px; height: 20px; display: block; }

/* WFS / boolean flag, replacing an inline style="color: orange" check */
.integra-ll-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.14);
  color: var(--color-success);
  font-size: 10px;
}

/* ---------- Row actions ----------
   Each action arrives as <span class="col-xs-1 icon"><a class="layer-action">.
   Those are Bootstrap grid columns used as icon holders: at 8.33% width each,
   a dozen of them float into a ragged blob. Neutralise the grid and lay them
   out as a wrapping row of pill buttons instead. */
.integra-ll-actions-cell > span.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  max-width: 216px;
}
.integra-ll-actions-cell .col-xs-1,
.integra-ll-actions-cell .icon {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}
/* The tag emits an empty badge as a sibling of each action; it renders as a
   stray coloured block and takes a grid slot. */
.integra-ll-actions-cell > span.label:empty { display: none; }

.integra-ll-actions-cell .layer-action,
.integra-ll-toolbar-actions .layer-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.integra-ll-actions-cell .layer-action:hover,
.integra-ll-toolbar-actions .layer-action:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
.integra-ll-actions-cell .layer-action > .fa,
.integra-ll-actions-cell .layer-action > .ion { margin: 0; }
/* Inline SVG icons some actions use (the QGIS expression glyph) */
.integra-ll-actions-cell .layer-action svg { width: 16px; height: 16px; }

/* Count badge: the stock markup drops it inline inside the link, which pushed
   the icon aside and overlapped its neighbour. Pin it to the corner. */
.integra-ll-actions-cell .label-action-layer {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-coral);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-white);
}
/* A zero count carries no information worth a coral badge; the template hides
   the ones it can, this covers the tag-rendered leftovers. */
.integra-ll-actions-cell .label-action-layer:empty { display: none; }

/* ---------- Download / Hide dropdowns ---------- */
.integra-ll .dropdown > .btn.dropdown-toggle {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark) !important;
  white-space: nowrap;
}
.integra-ll .dropdown > .btn.dropdown-toggle > .fa { color: var(--color-brand-primary); }
.integra-ll .dropdown > .btn.dropdown-toggle:hover {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border-strong) !important;
}
.integra-ll .dropdown-menu { padding: 6px; min-width: 210px; }
.integra-ll .dropdown-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.integra-ll .dropdown-menu .menu > li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--color-text-dark);
  white-space: nowrap;
}
.integra-ll .dropdown-menu .menu > li:hover { background: var(--color-bg-secondary); }
.integra-ll .dropdown-menu .menu > li > input[type="checkbox"] { margin: 0; flex: none; }

/* Preview-fields number input */
.integra-ll .max_preview_fields {
  width: 68px;
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Structure tab (treeview) ---------- */
.integra-ll #tree { padding: 6px 0; }
.integra-ll #tree .list-group-item {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--color-text-dark);
  background: transparent;
}
.integra-ll #tree .list-group-item:hover { background: var(--color-bg-light); }
.integra-ll #tree .list-group-item .icon { color: var(--color-brand-primary); }

@media (max-width: 575px) {
  .integra-ll-project { padding: 14px; }
  .integra-ll-project-actions { width: 100%; }
}

/* ============================================================
   MODALS & EXPANDABLE DETAIL ROWS

   Every action on the layers page opens one of two things: a Bootstrap modal
   built by ga.tpl.dialog, or a DataTables child row injected under the layer
   (the geo-constraint / constraint / column-ACL / style / scale-visibility
   managers all use the child-row form, not a modal).

   The modal shell comes from JS, so it is styled here by its fixed classes:
   .modal-dialog[.modal-danger|.modal-warning] > .modal-content >
   .modal-header (.close + .modal-title) / .modal-body / .modal-footer
   (.modal-button-close + .modal-button-confirm).
   ============================================================ */

/* ---------- Shell ---------- */
.integra-ui .modal-dialog { margin: 34px auto; }
.integra-ui .modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.integra-ui .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.integra-ui .modal-header .modal-title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-brand-secondary);
  line-height: 1.35;
}
/* The dismiss X: Bootstrap floats it, which fights the flex header */
.integra-ui .modal-header .close {
  order: 2;
  float: none;
  margin: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: var(--transition);
}
.integra-ui .modal-header .close:hover,
.integra-ui .modal-header .close:focus {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-brand-secondary);
  opacity: 1;
}

.integra-ui .modal-body {
  padding: 20px;
  /* Some of these bodies hold whole forms or tables; keep the dialog on screen
     and scroll the content instead of the page. */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.integra-ui .modal-body > .row:first-child > [class*="col-"] > .alert:first-child { margin-top: 0; }
.integra-ui .modal-body > *:last-child { margin-bottom: 0; }

.integra-ui .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-light);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.integra-ui .modal-footer .btn { margin: 0 !important; }

/* ---------- Footer buttons ----------
   ga.tpl.dialog hard-codes btn-default for close and btn-success for confirm.
   Confirm is the primary action here, so it takes the theme's primary colour
   rather than a generic green. */
.integra-ui .modal-footer .modal-button-close,
.integra-ui .modal-footer .btn-default {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark) !important;
  font-weight: 600;
  box-shadow: none;
}
.integra-ui .modal-footer .modal-button-close:hover,
.integra-ui .modal-footer .btn-default:hover {
  background: var(--color-bg-secondary) !important;
}
.integra-ui .modal-footer .modal-button-confirm,
.integra-ui .modal-footer .btn-success {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  background: var(--color-accent-coral) !important;
  border: 1px solid var(--color-accent-coral) !important;
  border-radius: var(--radius-sm);
  color: #fff !important;
  font-weight: 600;
  box-shadow: none;
}
.integra-ui .modal-footer .modal-button-confirm:hover,
.integra-ui .modal-footer .btn-success:hover {
  background: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
}
.integra-ui .modal-footer .btn[disabled],
.integra-ui .modal-footer .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Danger / warning variants ----------
   AdminLTE paints the entire dialog in the status colour, which shouts. Mark
   the dialog with a coloured rule and a matching icon-tinted title instead,
   and colour only the confirming button. */
.integra-ui .modal-dialog.modal-danger > .modal-content,
.integra-ui .modal-dialog.modal-warning > .modal-content { border: 1px solid var(--color-border); }
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-header,
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-header {
  background: var(--color-white) !important;
  border-top: 3px solid var(--color-danger);
  /* AdminLTE colours the header's bottom border #c23321 too; without this the
     dialog ends up with several competing red rules instead of one accent. */
  border-bottom-color: var(--color-border) !important;
  color: var(--color-brand-secondary) !important;
}
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-header {
  border-top-color: var(--color-warning);
}
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-header .modal-title,
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-header .modal-title,
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-header .close,
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-header .close {
  color: var(--color-brand-secondary) !important;
}
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-body,
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-body,
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-footer,
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-footer {
  background: var(--color-white) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border) !important;
}
.integra-ui .modal-dialog.modal-danger > .modal-content > .modal-footer { background: var(--color-danger-bg) !important; }
.integra-ui .modal-dialog.modal-warning > .modal-content > .modal-footer { background: var(--color-warning-bg) !important; }
/* A destructive confirmation should not be coral like an ordinary save */
.integra-ui .modal-dialog.modal-danger .modal-button-confirm {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
.integra-ui .modal-dialog.modal-warning .modal-button-confirm {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

/* ---------- Content patterns inside a modal ---------- */
/* Forms arrive from crispy and are already themed; only the wrapper grid needs
   taming so fields are not clipped by Bootstrap's negative row margins. */
.integra-ui .modal-body > form > .row,
.integra-ui .modal-body > .row { margin-left: 0; margin-right: 0; }
.integra-ui .modal-body > form > .row > [class*="col-"],
.integra-ui .modal-body > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.integra-ui .modal-body .form-group:last-child { margin-bottom: 0; }
/* A table inside a modal should not carry the page's outer spacing */
.integra-ui .modal-body > .table:last-child,
.integra-ui .modal-body > .dataTables_wrapper:last-child { margin-bottom: 0; }
/* Error payload rendered by ga.tpl.ajaxError */
.integra-ui .modal-body > h3 {
  margin-top: 0;
  font-size: 17px;
  color: var(--color-danger);
}

/* ---------- DataTables child rows (the manager panels) ----------
   The list widgets inject their table into a DataTables child row rather than
   a modal. The builder wraps it in <div style="margin-left:40px"> and gives the
   inner table a bare .table class. */
.integra-ui table.dataTable > tbody > tr.details > td { background: rgba(69, 119, 216, 0.07); }
.integra-ui table.dataTable > tbody > tr.details + tr > td,
.integra-ui table.dataTable > tbody > tr > td.child {
  background: var(--color-bg-light);
  border-top: 0 !important;
  padding: 0 !important;
}
/* Neutralise the inline left margin and give the panel a real container */
.integra-ui table.dataTable > tbody > tr > td.child > div,
.integra-ui table.dataTable > tbody > tr.details + tr > td > div {
  margin: 0 !important;
  padding: 16px 18px;
  border-left: 3px solid var(--color-brand-primary);
}
/* The "New ..." button that opens each manager's form */
.integra-ui td.child .btn.btn-sm,
.integra-ui tr.details + tr .btn.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  margin-bottom: 12px;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--color-brand-secondary) !important;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
.integra-ui td.child .btn.btn-sm:hover,
.integra-ui tr.details + tr .btn.btn-sm:hover {
  background: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: #fff !important;
}
.integra-ui td.child .btn.btn-sm .ion,
.integra-ui td.child .btn.btn-sm .fa { color: var(--color-brand-primary); }
.integra-ui td.child .btn.btn-sm:hover .ion,
.integra-ui td.child .btn.btn-sm:hover .fa { color: #fff; }

/* The nested manager table */
.integra-ui td.child > div > .table,
.integra-ui tr.details + tr > td > div > .table {
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.integra-ui td.child .table > thead > tr > th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border) !important;
  padding: 8px 10px;
  white-space: nowrap;
}
.integra-ui td.child .table > tbody > tr > td {
  font-size: 12.5px;
  padding: 9px 10px;
  vertical-align: middle;
  border-top-color: var(--color-border) !important;
}
.integra-ui td.child .table > tbody > tr:hover { background: var(--color-bg-light); }
.integra-ui td.child .table:empty { display: none; }

/* Row actions inside the manager tables use the same icon-link pattern */
.integra-ui td.child .table .col-xs-1,
.integra-ui td.child .table .icon { width: auto; float: none; padding: 0; }
.integra-ui td.child .table td > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  transition: var(--transition);
}
.integra-ui td.child .table td > a:not(.btn):hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}

/* The builders emit boolean flags as <span class="fa fa-check-circle"
   style="color: orange">. An inline style can only be beaten with !important;
   the alternative is patching several apps' JS. */
.integra-ui td.child .fa-check-circle,
.integra-ui .modal-body .fa-check-circle {
  color: var(--color-success) !important;
  font-size: 14px;
}

/* ------------------------------------------------------------
   Alert headings

   The form templates put their own icon inside the heading
   (<h4><i class="icon fa fa-warning"></i> Important!</h4>), and the theme adds
   one through .alert::before — so every alert showed two identical glyphs.
   Keep the themed one and drop the markup's.
   ------------------------------------------------------------ */
.integra-ui .alert > h4 > i.icon,
.integra-ui .alert > h4 > i.fa.icon { display: none; }
.integra-ui .alert > h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: inherit;
}
.integra-ui .alert > h4:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Modal stacking

   cookieconsent ships at z-index 9999, well above Bootstrap's modal (1050),
   so while the banner is on screen it covered the modal header. A modal is a
   focused task and must sit above page furniture.
   ------------------------------------------------------------ */
.integra-ui .modal-backdrop { z-index: 10040; }
.integra-ui .modal { z-index: 10050; }

/* ============================================================
   DASHBOARD (.integra-dash)
   ============================================================ */

.integra-dash { display: flex; flex-direction: column; gap: 28px; }

/* ---------- Stat boxes ---------- */
.integra-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.integra-dash-stats .small-box { margin-bottom: 0; }

/* ---------- Section headings ----------
   The stock template used a bare <h3> in a full-width column, which read as
   loose body text rather than a section divider. */
.integra-dash-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-brand-secondary);
}
.integra-dash-heading > .fa { color: var(--color-brand-primary); font-size: 13px; }
.integra-dash-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bookmarked project cards ---------- */
.integra-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.integra-dash-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.integra-dash-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-brand-primary);
}

/* Thumbnail rail. The stock markup sized the image with style="height:90px"
   inside an AdminLTE .info-box-icon, which cropped it oddly. */
.integra-dash-thumb {
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}
.integra-dash-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.integra-dash-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}
/* AdminLTE's .info-box-text uppercased the title; a project name is a name. */
.integra-dash-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand-secondary);
  text-transform: none;
  line-height: 1.3;
  word-break: break-word;
}
.integra-dash-card-group {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.integra-dash-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
}
.integra-dash-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.integra-dash-act:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
.integra-dash-act--map {
  background: rgba(69, 119, 216, 0.12);
  border-color: rgba(69, 119, 216, 0.35);
  color: var(--color-brand-primary-dark);
}
/* The bookmark is the state that put the card here, so it stays marked; the
   stock markup did it with style="cursor:pointer; color:red" inline. */
.integra-dash-act--bookmark {
  margin-left: auto;
  background: transparent;
  border-color: transparent;
  color: var(--color-border-strong);
}
.integra-dash-act--bookmark.is-on { color: var(--color-accent-coral); }
.integra-dash-act--bookmark:hover {
  background: var(--color-danger-bg);
  border-color: transparent;
  color: var(--color-danger);
}

@media (max-width: 400px) {
  .integra-dash-card { flex-direction: column; }
  .integra-dash-thumb {
    flex: 0 0 96px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ============================================================
   FORM ACTION BAR

   {% g3wadmin_add_button_form %} emits the same pair on every form page:

     <div class="row"><div class="col-md-12">
       <button class="btn btn-lg btn-success" type="submit">Save</button>
       <a class="btn btn-lg btn-default" data-widget-type="backHistory">Back</a>
     </div></div>

   btn-success renders green, which is the theme's semantic success colour, not
   its primary action colour — so the main button on most forms disagreed with
   every other primary button in the app. Styled by that exact pair so it is
   fixed once for every form page, whether or not the page wraps it in a bar.
   ============================================================ */

.integra-ui form .btn.btn-lg.btn-success[type="submit"],
.integra-form-actions .btn.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-accent-coral) !important;
  border: 1px solid var(--color-accent-coral) !important;
  border-radius: var(--radius-sm);
  color: #fff !important;
  box-shadow: none;
}
.integra-ui form .btn.btn-lg.btn-success[type="submit"]:hover,
.integra-form-actions .btn.btn-success:hover {
  background: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
}

.integra-ui form .btn.btn-lg.btn-default[data-widget-type="backHistory"],
.integra-form-actions .btn.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark) !important;
  box-shadow: none;
}
.integra-ui form .btn.btn-lg.btn-default[data-widget-type="backHistory"]:hover,
.integra-form-actions .btn.btn-default:hover {
  background: var(--color-bg-secondary) !important;
}

/* Standalone action bar, so any form page can wrap the tag's output in it.
   .integra-userform keeps its own, more specific rules; the values match. */
.integra-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.integra-form-actions > .row { margin: 0; }
.integra-form-actions > .row > [class*="col-"] {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.integra-form-actions .btn { margin: 0 !important; }

/* ============================================================
   PROJECT MESSAGE LEVEL CHIPS

   MSG_LEVELS is (20 Info, 30 Warning, 40 Error, 50 Critical) — a real severity
   scale, so it reads as one: the same hue family rising in weight rather than
   four unrelated colours.
   ============================================================ */
.integra-msg-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}
.integra-msg-level--20 {
  background: rgba(14, 165, 233, 0.14);
  color: #0369A1;
}
.integra-msg-level--30 {
  background: rgba(217, 119, 6, 0.16);
  color: var(--color-warning);
}
.integra-msg-level--40 {
  background: rgba(220, 38, 38, 0.13);
  color: var(--color-danger);
}
.integra-msg-level--50 {
  background: var(--color-danger);
  color: #fff;
}

/* ============================================================
   COOKIE CONSENT BANNER

   A dark slate bar with a bright green button, sharing no colour with the rest
   of the interface — and the single most-seen component in the product. The
   map client gets the same treatment in client.css.
   ============================================================ */
body.integra-ui .cc-window {
  background: var(--color-brand-secondary) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  box-shadow: 0 -2px 14px rgba(16, 24, 40, 0.14);
}
body.integra-ui .cc-window .cc-message {
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.5;
}
body.integra-ui .cc-window .cc-btn {
  background: var(--color-accent-coral) !important;
  border: 1px solid var(--color-accent-coral) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  transition: var(--transition);
}
body.integra-ui .cc-window .cc-btn:hover {
  background: var(--color-accent-coral-dark) !important;
  border-color: var(--color-accent-coral-dark) !important;
}
body.integra-ui .cc-window a:not(.cc-btn) {
  color: var(--color-brand-primary) !important;
}

/* ============================================================
   GENERAL SUITE DATA form (core/generalsuitedata_form.html)

   Crispy emits seven .col-md-6 boxes in one row. A 2-col grid left an
   orphan card and mismatched heights. Same fix as the user form: one
   centered column of full-width cards. Short related fields sit as
   pairs inside a card; editors and uploads stay full width.
   ============================================================ */
.integra-gsd { max-width: 800px; margin: 0 auto; }
.integra-gsd #generalsuitedata-form > .alert { margin-bottom: 22px; }

.integra-gsd #generalsuitedata-form > .row {
  display: block;
  margin: 0;
}
.integra-gsd #generalsuitedata-form > .row > [class*="col-"] {
  width: 100%;
  max-width: none;
  float: none;
  padding: 0;
  min-width: 0;
  display: block;
}

.integra-gsd .box {
  margin: 0 0 22px 0;
  border-radius: var(--radius-lg) !important;
}
.integra-gsd .box > .box-header,
.integra-gsd .box-header.with-border {
  background: var(--color-bg-light) !important;
  display: flex;
  align-items: center;
  padding: 15px 20px !important;
}
.integra-gsd .box-header .box-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}
.integra-gsd .box-header .box-title > .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary) !important;
  font-size: 15px;
  flex: 0 0 auto;
}

.integra-gsd .box-body {
  padding: 22px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  align-items: start;
}
.integra-gsd .box-body::before,
.integra-gsd .box-body::after { content: none; display: none; }
.integra-gsd .box-body > * { grid-column: 1 / -1; min-width: 0; }

.integra-gsd #div_id_title,
.integra-gsd #div_id_sub_title,
.integra-gsd #div_id_about_title,
.integra-gsd #div_id_about_name,
.integra-gsd #div_id_about_tel,
.integra-gsd #div_id_about_email,
.integra-gsd #div_id_facebook_url,
.integra-gsd #div_id_twitter_url,
.integra-gsd #div_id_googleplus_url,
.integra-gsd #div_id_youtube_url,
.integra-gsd #div_id_instagram_url,
.integra-gsd #div_id_flickr_url,
.integra-gsd #div_id_tripadvisor_url { grid-column: span 1; }

.integra-gsd .form-group { margin-bottom: 0; }
.integra-gsd .control-label { font-weight: 600; margin-bottom: 6px; }
.integra-gsd .select2-container { width: 100% !important; }
.integra-gsd .input-group-addon {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
  color: var(--color-brand-primary);
}
.integra-gsd .img-thumbnail {
  display: block;
  max-width: 220px;
  margin: 0;
  border-radius: var(--radius);
  border-color: var(--color-border);
}
.integra-gsd .translatable_fields { color: var(--color-brand-primary); }

@media (max-width: 575px) {
  .integra-gsd .box-body { grid-template-columns: 1fr; }
  .integra-gsd .box-body > * { grid-column: 1 / -1 !important; }
}

/* ============================================================
   403 / access-denied cards inside the admin shell
   (core/403_MGC.html, core/403_MPC.html)
   ============================================================ */
.integra-denied {
  display: flex;
  justify-content: center;
  padding: 12px 0 24px;
}
.integra-denied-card {
  width: 100%;
  max-width: 520px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
  text-align: center;
}
.integra-denied-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: rgba(69, 119, 216, 0.12);
  position: relative;
  margin-bottom: 16px;
}
.integra-denied-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 16px;
  height: 10px;
  border: 3px solid var(--color-brand-primary);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
}
.integra-denied-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  width: 22px;
  height: 16px;
  background: var(--color-brand-secondary);
  border-radius: 4px;
  transform: translateX(-50%);
}
.integra-denied-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-brand-secondary);
}
.integra-denied-card p {
  margin: 0 0 22px;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* ============================================================
   HEADER = chrome only. Page title lives in .content-header.
   Reset the 64px stacked app-bar experiment back to AdminLTE 50px.
   ============================================================ */
.integra-ui .main-header {
  height: 50px;
  max-height: 50px;
}
.integra-ui .main-header .logo,
.integra-ui .main-header .navbar,
.integra-ui .main-header .navbar-static-top {
  height: 50px !important;
  min-height: 50px !important;
}
.integra-ui .main-header .logo {
  line-height: 50px !important;
  background: var(--color-white) !important;
  border-right: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.integra-ui .main-header .logo img { max-height: 42px; }
.integra-ui .content-wrapper,
.integra-ui .right-side { padding-top: 50px !important; }
.integra-ui .main-sidebar,
.integra-ui .left-side { padding-top: 50px !important; }

.integra-ui .main-header .navbar {
  background: var(--color-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}
.integra-ui .main-header .navbar::after { display: none !important; }

.integra-ui .main-header .sidebar-toggle {
  height: 50px !important;
  width: 50px;
  padding: 15px !important;
  margin: 0;
  color: var(--color-brand-secondary) !important;
}
.integra-ui .main-header .sidebar-toggle:hover,
.integra-ui .main-header .sidebar-toggle:focus {
  background: var(--color-bg-light) !important;
  color: var(--color-brand-primary) !important;
}
.integra-ui .main-header .sidebar-toggle::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f060" !important; /* arrow-left: collapse open sidebar */
  width: auto;
  height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  line-height: inherit;
}
.integra-ui.sidebar-collapse .main-header .sidebar-toggle::before,
.sidebar-collapse.integra-ui .main-header .sidebar-toggle::before {
  content: "\f061" !important; /* arrow-right: expand collapsed sidebar */
}

.integra-ui .navbar-custom-menu,
.integra-ui .navbar-custom-menu > .navbar-nav {
  height: 50px;
}
.integra-ui .navbar-custom-menu > .navbar-nav {
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  gap: 6px;
  margin: 0;
}
.integra-ui .navbar-custom-menu > .navbar-nav > li {
  float: none;
  display: flex;
  align-items: center;
}

.integra-ui .main-header .navbar .navbar-custom-menu .has-feedback {
  position: relative;
  margin: 0 !important;
}
.integra-ui .main-header .navbar .navbar-custom-menu .has-feedback > form {
  position: relative;
}
.integra-ui .main-header .navbar .search-admin-input {
  width: 200px;
  height: 34px;
  line-height: 34px;
  padding: 0 12px 0 36px;
  border-radius: var(--radius-pill) !important;
}
.integra-ui .main-header .navbar .search-admin-input:focus { width: 200px; }
.integra-ui .main-header .navbar .has-feedback .glyphicon-search.form-control-feedback,
.integra-ui .main-header .navbar .has-feedback .glyphicon-search {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 36px;
  height: 16px;
  line-height: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.integra-ui .main-header .navbar .has-feedback .glyphicon-search::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
  content: "\f002";
  line-height: 1;
}

.integra-ui .main-header .navbar .user-menu > a {
  height: 34px;
  margin: 0;
  padding: 2px 10px 2px 3px;
  border-radius: var(--radius-pill);
}
.integra-ui .main-header .navbar .user-menu > a > .fa-user {
  width: 26px;
  height: 26px;
}

.integra-ui .main-header .navbar .navbar-form {
  margin: 0 !important;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.integra-ui .main-header .navbar .navbar-form .form-group { margin: 0; }
.integra-ui .main-header .navbar .integra-header-lang .select2-container {
  width: 188px !important;
}
.integra-ui .main-header .navbar select.form-control,
.integra-ui .main-header .navbar .integra-header-lang .select2-container--default .select2-selection--single {
  height: 40px !important;
  min-width: 188px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px;
  font-weight: 600;
}
.integra-ui .main-header .navbar .integra-header-lang .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center;
  gap: 8px;
  line-height: 38px !important;
  padding-left: 12px !important;
  padding-right: 30px !important;
  font-size: 14px;
}
.integra-ui .main-header .navbar .integra-header-lang .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  width: 26px;
}
.integra-ui .main-header .navbar .integra-header-lang .img-flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 24px;
}
/* Language list is appended to <body> by select2 — match the larger pill. */
body.integra-ui .select2-container--open .select2-dropdown {
  min-width: 188px;
  border-radius: 12px;
  overflow: hidden;
}
body.integra-ui .select2-results__option {
  padding: 10px 14px;
  font-size: 14px;
}
body.integra-ui .select2-results__option .img-flag,
body.integra-ui .select2-selection__rendered .img-flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.integra-ui .main-header .navbar .nav > li.integra-header-gear > a,
.integra-ui .main-header .navbar .nav > li > a[data-toggle="control-sidebar"] {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
}
.integra-header-gear-spacer { display: inline-block; width: 34px; }

.integra-ui .content-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 22px 26px 8px;
}
.integra-ui .content-header > h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.integra-ui .content-header .breadcrumb.is-empty,
.integra-ui .content-header .breadcrumb > li.is-dup { display: none; }
.integra-ui .content { padding: 12px 26px 26px; }

/* Cartographic group form — two columns, packed like masonry.
   CSS columns (not a 2-col grid) so a short card does not leave a
   hole next to a tall neighbour. Cards keep overflow:visible so
   select2 / colorpicker / Summernote can still open. */
.integra-gform { max-width: none; margin: 0; }
.integra-gform #group-form > .alert,
.integra-gform #macrogroup-form > .alert { margin-bottom: 22px; }
.integra-gform-projects { margin-bottom: 22px; }

.integra-gform-masonry {
  column-count: 2;
  column-gap: 22px;
  column-fill: balance;
}
.integra-gform-masonry > .row {
  display: contents;
}
.integra-gform-masonry > .row > [class*="col-"] {
  float: none;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 0 22px;
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: visible;
}

.integra-gform .box {
  margin: 0;
  overflow: visible;
  border: 1px solid var(--color-border) !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--color-white) !important;
}
.integra-gform .box.box-success,
.integra-gform .box.box-danger,
.integra-gform .box.box-primary,
.integra-gform .box.box-default,
.integra-gform .box.box-solid.bg-purple,
.integra-gform .box.bg-purple {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}
.integra-gform .box.bg-purple label,
.integra-gform .box.bg-purple .control-label,
.integra-gform .box.bg-purple .checkbox,
.integra-gform .box.bg-purple p { color: var(--color-text-dark) !important; }

.integra-gform .box > .box-header,
.integra-gform .box-header.with-border {
  background: var(--color-bg-light) !important;
  border-bottom: 1px solid var(--color-border) !important;
  display: flex;
  align-items: center;
  padding: 15px 20px !important;
}
.integra-gform .box-header .box-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-secondary) !important;
}
.integra-gform .box-header .box-title > .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(69, 119, 216, 0.12);
  color: var(--color-brand-primary) !important;
  font-size: 15px;
  flex: 0 0 auto;
}

.integra-gform .box-body {
  padding: 22px !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  overflow: visible;
}
.integra-gform .box-body::before,
.integra-gform .box-body::after { content: none; display: none; }
.integra-gform .box-body > * { grid-column: 1 / -1; min-width: 0; }
.integra-gform .box-body > .row {
  display: block;
  margin: 0;
}
.integra-gform .box-body > .row > [class*="col-"],
.integra-gform .box-body > [class*="col-"] {
  float: none;
  width: 100%;
  padding: 0;
}

.integra-gform #div_id_form_id,
.integra-gform #div_id_upload_url,
.integra-gform #div_id_delete_url { display: none !important; }

.integra-gform .box.acl-box .box-body,
.integra-gform .box.bg-purple .box-body {
  grid-template-columns: 1fr;
}

.integra-gform .form-group { margin-bottom: 0; }
.integra-gform .control-label { font-weight: 600; margin-bottom: 6px; }
.integra-gform .help-block { margin-top: 6px; margin-bottom: 0; }
.integra-gform .select2-container { width: 100% !important; }
.integra-gform .translatable_fields { color: var(--color-brand-primary); }

.integra-gform .checkbox { padding-left: 0; margin: 0; }
.integra-gform .checkbox > label {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
}

.integra-gform .input-group-addon {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
  color: var(--color-brand-primary);
}
.integra-gform .colorpicker-element .input-group-addon i,
.integra-gform .colorpicker-element .input-group-addon {
  min-width: 38px;
}
.integra-gform .img-thumbnail,
.integra-gform .img-responsive.img-thumbnail {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 8px 0 0;
  border-radius: var(--radius);
  border-color: var(--color-border);
}

.integra-gform .note-editor.note-frame { width: 100%; }
.integra-gform textarea.wys5 { min-height: 140px; }

.integra-gform .integra-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 8px;
}

@media (max-width: 991px) {
  .integra-gform-masonry { column-count: 1; }
}

/* ============================================================
   LOGIN — designed split, not a lonely card on a grey slab.
   ============================================================ */
body.integra-ui.login-page {
  background: var(--color-brand-secondary) !important;
}
.integra-login-brand {
  flex: 1 1 48%;
  padding: 64px 48px;
  background: var(--color-brand-secondary);
  align-items: center;
  text-align: center;
}
.integra-login-brand::before {
  top: -80px;
  right: -60px;
  width: 420px;
  height: 420px;
  background: rgba(69, 119, 216, 0.16);
}
.integra-login-brand::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 107, 74, 0.10);
  pointer-events: none;
}
.integra-login-brand-inner {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.integra-login-brand .integra-login-logo {
  margin-bottom: 36px;
  text-align: center;
}
.integra-login-brand .integra-login-logo img {
  max-width: 200px;
}
.integra-login-kicker {
  margin: 0 0 10px;
  color: var(--color-brand-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.integra-ui .integra-login-tagline {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: #fff;
}
.integra-login-subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.55;
  max-width: 400px;
  margin: 0 auto 28px;
}
.integra-login-points {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
  text-align: left;
}
.integra-login-points li {
  position: relative;
  padding: 8px 0 8px 28px;
  color: #e8ecf8;
  font-size: 14.5px;
  font-weight: 500;
}
.integra-login-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 4px rgba(69, 119, 216, 0.18);
}

.integra-login-panel {
  flex: 1 1 52%;
  background: #eef3f8;
  padding: 48px 40px;
}
.integra-login-panel .login-box,
.integra-login-card.login-box {
  max-width: 440px !important;
}
.integra-login-card .login-box-body {
  padding: 40px 36px 32px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(17, 13, 67, 0.06);
  box-shadow: 0 18px 50px rgba(17, 13, 67, 0.12) !important;
}
body.integra-ui.login-page .login-box-msg {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-brand-secondary);
  margin: 0 0 28px;
  padding: 0;
}
.integra-login-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand-secondary);
  letter-spacing: 0.02em;
}
body.integra-ui.login-page .form-group.has-feedback { position: relative; }
body.integra-ui.login-page .login-box-body .form-control {
  height: 48px;
  min-height: 48px;
  padding: 0 16px 0 44px;
  border-radius: 12px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  font-size: 15px;
}
body.integra-ui.login-page .login-box-body .form-control:focus {
  background: #fff;
  border-color: var(--color-brand-primary);
  box-shadow: var(--ring);
}
body.integra-ui.login-page .has-feedback .form-control-feedback {
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  width: 44px;
  height: 48px;
  line-height: 48px;
  color: var(--color-brand-primary);
}
body.integra-ui.login-page .login-box-body .btn-primary {
  height: 48px;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(255, 107, 74, 0.28);
}
body.integra-ui.login-page .login-box-body .btn-info {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-brand-primary) !important;
  font-weight: 600;
  padding: 8px 0;
  text-align: center;
}
body.integra-ui.login-page .login-box-body .btn-info:hover {
  color: var(--color-brand-primary-dark) !important;
  background: transparent !important;
}
body.integra-ui.login-page .login-box-body .alert {
  margin: 0 0 22px;
  padding: 12px 40px 12px 44px;
  border: 1px solid #fecaca !important;
  border-radius: 12px;
  box-shadow: none !important;
  background: var(--color-danger-bg) !important;
  color: #991B1B !important;
}
body.integra-ui.login-page .login-box-body .alert::before {
  top: 50%;
  transform: translateY(-50%);
  left: 14px;
}
body.integra-ui.login-page .login-box-body .alert .close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  opacity: 0.4;
}

@media (max-width: 900px) {
  .integra-login-brand { padding: 40px 28px 36px; }
  .integra-ui .integra-login-tagline { font-size: 28px; }
  .integra-login-points { display: none; }
  .integra-login-card .login-box-body { padding: 28px 22px !important; }
}