/* ============================================================
   Aareal Styleguide — DMP Frontend
   Colors, typography, and component overrides for Bootstrap 5
   ============================================================ */

:root {
  --aa-blue: #002A5F;
  --aa-blue-80: #1B376C;
  --aa-blue-60: #31467A;
  --aa-blue-40: #475788;
  --aa-blue-20: #5D6A98;
  --aa-lightblue: #79BFE8;
  --aa-lightblue-70: #79BFE8B3;
  --aa-lightblue-25: #79bfe840;
  --aa-beige: #F6F5EE;
  --aa-beige-dark: #EDEBDD;
  --aa-red: #B71C3E;
  --aa-red-70: #D06980;
  --aa-red-40: #B71C3E66;
  --aa-green: #59C18F;
  --aa-white: #FFFFFF;
  --aa-grayblue-50: #7f94af80;
  --aa-navbar-height: 56px;
  --aa-footer-height: 52px;

  --bs-primary: var(--aa-blue);
  --bs-secondary: var(--aa-lightblue);
  --bs-danger: var(--aa-red);
  --bs-success: var(--aa-green);
  --bs-body-bg: var(--aa-white);
  --bs-code-color: var(--aa-red);
  --bs-form-invalid-border-color: var(--aa-red);
  --bs-form-valid-border-color: var(--aa-green);
}


/* --- Typography --- */

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  color: #333;
  background-color: var(--aa-beige);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--aa-blue);
  font-weight: 600;
}

.alert-info {
  --bs-alert-color: var(--aa-blue);
  --bs-alert-bg: var(--aa-beige-dark);
  --bs-alert-border-color: var(--aa-beige-dark);
  --bs-alert-link-color: var(--aa-blue);
}

.alert-danger {
  --bs-alert-color: var(--aa-white);
  --bs-alert-bg: var(--aa-red);
  --bs-alert-border-color: var(--aa-red);
  --bs-alert-link-color: var(--aa-blue);
}

.alert-success {
  --bs-alert-color: var(--aa-white);
  --bs-alert-bg: var(--aa-green);
  --bs-alert-border-color: var(--aa-green);
  --bs-alert-link-color: var(--aa-blue);
}
/* --- Top Navbar --- */

.aa-navbar {
  background-color: var(--aa-blue);
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.aa-navbar .navbar-brand {
  color: var(--aa-white);
  font-weight: 600;
}

.aa-navbar .erp-active-banner {
  font-weight: 600;
  color: var(--aa-white);
}

.aa-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}

.aa-navbar .nav-link:hover,
.aa-navbar .nav-link:focus {
  color: var(--aa-lightblue);
}

.aa-navbar .dropdown-menu {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Sidebar --- */

.aa-sidebar {
  background-color: var(--aa-white);
  border-right: 1px solid var(--aa-beige-dark);
  min-height: calc(100vh - var(--aa-navbar-height) - var(--aa-footer-height));
  width: 90px;
  transition: width 0.2s;
}

/* Bootstrap's own .nav-pills selector sets --bs-nav-pills-link-active-bg/-color directly on the
   .nav-pills element, so overriding those vars on an ancestor isn't enough — it must be
   redeclared on .nav-pills itself (at higher specificity) to take effect, same pattern already
   used for --bs-primary/--bs-btn-bg elsewhere in this file. */
.aa-sidebar .nav-pills {
  --bs-nav-pills-link-active-bg: var(--aa-blue);
  --bs-nav-pills-link-active-color: var(--aa-white);
}

@media (min-width: 1200px) {
  .aa-sidebar {
    width: 320px;
  }
}

/* Extra breathing room on large desktop monitors */
@media (min-width: 1600px) {
  .aa-sidebar {
    width: 360px;
  }
}

.sidebar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  color: var(--aa-blue);
  border-radius: 8px;
  margin-bottom: 2px;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar-link i {
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}

.sidebar-link:hover {
  background-color: var(--aa-beige-dark);
  color: var(--aa-blue);
}

.sidebar-label {
  display: none;
}

@media (min-width: 1200px) {
  .sidebar-label {
    display: inline;
  }

  .sidebar-link {
    flex-direction: row;
    gap: 0.75rem;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
  }

  .sidebar-link i {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

}

/* --- Sidebar submenus --- */

.submenu {
  margin-bottom: 2px;
}

/* Redeclares the active-background var on the nested .nav-pills itself (see .aa-sidebar
   .nav-pills above) so the active submenu item renders in the lighter brand blue (matching
   .btn-primary) instead of the dark blue used for top-level active items. Must come after the
   .aa-sidebar .nav-pills rule so equal specificity resolves in this rule's favor for the
   submenu's nested <ul class="nav-pills">. */
.submenu .nav-pills {
  --bs-nav-pills-link-active-bg: var(--aa-lightblue);
}

.sidebar-sublink {
  font-size: 0.7rem;
  padding: 0.6rem 0.25rem;
}

/* Submenu items carry their own small icon (see SidebarMenuDefinition). In icon-only (narrow)
   mode the text labels are hidden, so these icons are the only way to tell submenu rows apart;
   they are sized noticeably smaller than the top-level icons (1.25rem) to signal at a glance that
   they belong to a nested level. Higher specificity (.sidebar-link i.sidebar-subicon) so it wins
   over the generic .sidebar-link i sizing. */
.sidebar-link i.sidebar-subicon {
  font-size: 0.95rem;
}

/* Plain "has a submenu" indicator; hidden in icon-only (narrow) mode. Once its submenu is open
   it fades away for good (no more need to point at something already showing) — the static
   opacity:0 rule below covers every subsequent page load of an already-open parent (no JS
   needed, so it can't flicker back in), while .sidebar-chevron-animate (added by app.js only on
   the genuine "just opened" transition — see app.js) plays the fade-out once as it happens. */
.sidebar-chevron {
  margin-left: auto;
  font-size: 0.7rem;
}

.sidebar-link-toggle[aria-expanded="true"] .sidebar-chevron {
  opacity: 0;
}

.sidebar-chevron-animate {
  animation: sidebar-chevron-fade 0.4s ease-in-out forwards;
}

@keyframes sidebar-chevron-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (min-width: 1200px) {
  .submenu {
    padding-left: 1.25rem;
  }

  .sidebar-sublink {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }

  /* Wide mode already differentiates submenu items by their visible label and indent, so keep
     them icon-less as before. Use visibility (not display:none) so the marker still occupies its
     box and the row's spacing/alignment matches the previous label-only layout. */
  .sidebar-link i.sidebar-subicon {
    visibility: hidden;
  }

  /* Items grouped under a section label (e.g. Administration's "Users"/"Property Groups")
     get the same extra indent step the submenu itself already gets from the top-level menu,
     so the group reads as nested under its heading even though there's no extra collapse
     level. Must come after .sidebar-sublink so this padding-left wins the (equal-specificity)
     cascade for items that have both classes. */
  .sidebar-in-section {
    padding-left: 2.25rem;
  }
}

/* Plain (non-clickable) heading grouping leaves within one submenu — e.g. "Users" /
   "Property Groups" under Administration — instead of nesting another collapsible level.
   Hidden in icon-only (narrow) mode like every other label; there's no icon to pair it with. */
.sidebar-section-label {
  display: none;
}

@media (min-width: 1200px) {
  .sidebar-section-label {
    display: block;
    padding: 0.5rem 1rem 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--aa-blue-20);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* --- Custom Aareal Icons (behave like Bootstrap Icons — scale with font-size) --- */

.aa-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -.125em;
  line-height: 1;
}

.aa-icon-dashboard {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.d1,.d2{fill:none;stroke:%23002a5c;}.d1,.d3{stroke-linecap:round;}.d1,.d2,.d3{stroke-width:2.3px;}.d3{fill:%2371b7e2;stroke:%2371b7e2;stroke-linejoin:round;}%3C/style%3E%3C/defs%3E%3Cpath class='d1' d='M68.54,52.28A27.26,27.26,0,1,0,59,64.66'/%3E%3Cline class='d2' x1='42.56' y1='14.68' x2='42.56' y2='70.25'/%3E%3Cline class='d1' x1='66.2' y1='30.18' x2='20.05' y2='30.18'/%3E%3Cline class='d1' x1='69.69' y1='42' x2='16.51' y2='42'/%3E%3Cline class='d1' x1='53.36' y1='53.86' x2='18.79' y2='53.86'/%3E%3Cpath class='d1' d='M57.8,49.56a47.7,47.7,0,0,0,.51-7c0-15-6.78-27.23-15.13-27.23S28.05,27.53,28.05,42.55s6.79,27.22,15.13,27.22c4.56,0,8.85-3.72,11.77-10.2'/%3E%3Cpath class='d3' d='M57.58,54.11l6.66,11.54,2.57-3.55s3.49,2.67,5.42,4.06c1,.69,1.6.43,2-.06s.47-1.22-.6-2c-2.14-1.58-5.32-4-5.32-4l2.4-3.3Z'/%3E%3C/svg%3E");
}

.aa-icon-contract {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.cls-1,.cls-3%7Bfill:none%7D.cls-1,.cls-2%7Bstroke:%23002a5c%7D.cls-1,.cls-2,.cls-3%7Bstroke-linecap:round;stroke-linejoin:round;stroke-width:2.3px%7D.cls-2%7Bfill:%23002a5c%7D.cls-3%7Bstroke:%2371b7e2%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25.83,53.48H36.2s7.85,2.83,10.22,3.72,3.63,6.33-3.9,4.34L33.6,59.16'/%3E%3Cpath class='cls-1' d='M25.86,67l14.06,2.68,14.33-4.72s9.13-6.89,12.11-9.06-.27-6-4.22-4-13.41,7-13.41,7'/%3E%3Crect class='cls-2' x='18.36' y='51.31' width='6.14' height='17.67'/%3E%3Crect class='cls-3' x='32.53' y='15.26' width='22.79' height='30.96'/%3E%3Cline class='cls-3' x1='39.6' y1='24.5' x2='48.25' y2='24.5'/%3E%3Cline class='cls-3' x1='39.6' y1='30.74' x2='48.25' y2='30.74'/%3E%3Cline class='cls-3' x1='39.6' y1='36.97' x2='48.25' y2='36.97'/%3E%3C/svg%3E");
}

.aa-icon-property {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.p1{fill:none;stroke-linecap:round;stroke-linejoin:round;}.p1,.p3{stroke:%23002a5c;}.p1,.p2,.p3{stroke-width:2.3px;}.p2{fill:%2371b7e2;stroke:%2371b7e2;}.p2,.p3{stroke-miterlimit:10;}.p3{fill:%23002a5c;}%3C/style%3E%3C/defs%3E%3Cpath class='p1' d='M19.43,38.56v31.1H45.34V55.4H55.71V69.66H66.07V38.56'/%3E%3Cpath class='p2' d='M29.72,47.63H35a1.23,1.23,0,0,1,1.23,1.23v5.33A1.22,1.22,0,0,1,35,55.4H29.72a1.22,1.22,0,0,1-1.22-1.22V48.85A1.22,1.22,0,0,1,29.72,47.63Z'/%3E%3Cpath class='p3' d='M23.24,22.67a3.05,3.05,0,0,0-2,.93L15,30.81a3.83,3.83,0,0,0-.8,2.15v4a1.24,1.24,0,0,0,1.23,1.23H70A1.24,1.24,0,0,0,71.26,37V33a3.83,3.83,0,0,0-.8-2.15L64.28,23.6a3.05,3.05,0,0,0-2-.93Z'/%3E%3Cpath class='p3' d='M22,23V16.46a1.22,1.22,0,0,1,1.22-1.22h39a1.22,1.22,0,0,1,1.22,1.22V23'/%3E%3C/svg%3E");
}

.aa-icon-property-group {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.g1,.g3{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.3px;}.g1{stroke:%23002a5c;}.g2{fill:%23002a5c;}.g3{stroke:%2371b7e2;}%3C/style%3E%3C/defs%3E%3Cline class='g1' x1='44.29' y1='52.6' x2='33.5' y2='58.87'/%3E%3Cline class='g1' x1='38.03' y1='31.54' x2='44.47' y2='36.07'/%3E%3Cpath class='g1' d='M22.89,33l.09-1.1c0-2.55,2.73-3.32,2.73-3.32s1.89,1.45,2.51,2a1.74,1.74,0,0,0,2.18,0c.61-.5,2.22-2,2.22-2s2.73.77,2.73,3.32v1.22'/%3E%3Cpath class='g2' d='M32.57,24.23a3.26,3.26,0,1,0-3.26,3.26A3.26,3.26,0,0,0,32.57,24.23Z'/%3E%3Cpath class='g1' d='M46.32,53.94l.11-1.34c0-3.13,3.34-4.07,3.34-4.07s2.32,1.78,3.08,2.4a2.12,2.12,0,0,0,2.67,0c.75-.61,2.71-2.4,2.71-2.4s3.35.94,3.35,4.07v1.49'/%3E%3Cpath class='g2' d='M58.15,43.24a4,4,0,1,0-4,4A4,4,0,0,0,58.15,43.24Z'/%3E%3Cpath class='g3' d='M36.21,18.24a10,10,0,1,1-14.18,0A10,10,0,0,1,36.21,18.24Z'/%3E%3Ccircle class='g3' cx='53.95' cy='44.59' r='12.28'/%3E%3Ccircle class='g3' cx='26.33' cy='62.22' r='7.52'/%3E%3C/svg%3E");
}

.aa-icon-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.a1,.a4{fill:%23002a5c;}.a2,.a3{fill:none;}.a2,.a3,.a4{stroke:%23002a5c;stroke-miterlimit:10;}.a2,.a3,.a4,.a5{stroke-width:2.3px;}.a3,.a5{stroke-linecap:round;}.a5{fill:%2371b7e2;stroke:%2371b7e2;stroke-linejoin:round;}%3C/style%3E%3C/defs%3E%3Cpath class='a1' d='M46.63,25.73c6.36,0,11.52-2.35,11.52-5.24S53,15.26,46.63,15.26,35.12,17.6,35.12,20.49s5.15,5.24,11.51,5.24'/%3E%3Cpath class='a2' d='M46.63,25.73c6.36,0,11.52-2.35,11.52-5.24S53,15.26,46.63,15.26,35.12,17.6,35.12,20.49,40.27,25.73,46.63,25.73Z'/%3E%3Cpath class='a3' d='M54,53.84A21.47,21.47,0,0,1,46.63,55c-6.35,0-11.51-2.34-11.51-5.23V42.47m18.84,4a21.22,21.22,0,0,1-7.33,1.2c-6.35,0-11.51-2.35-11.51-5.24V35.14m18.84,4a21.22,21.22,0,0,1-7.33,1.2c-6.35,0-11.51-2.35-11.51-5.24V27.82m23-7.33v7.33c0,2.89-5.16,5.23-11.52,5.23s-11.51-2.34-11.51-5.23V20.49'/%3E%3Cellipse class='a4' cx='65.47' cy='34.1' rx='11.51' ry='5.23'/%3E%3Cpath class='a3' d='M77,48.75v7.33c0,2.89-5.16,5.23-11.52,5.23S54,59,54,56.08V48.75m23-7.33v7.33C77,51.64,71.83,54,65.47,54S54,51.64,54,48.75V41.42M77,34.1v7.32c0,2.89-5.16,5.24-11.52,5.24S54,44.31,54,41.42V33.24'/%3E%3Cpath class='a5' d='M53,69.5H10.3a.92.92,0,0,1-.92-.92v-19a.92.92,0,0,1,.92-.91H53a.92.92,0,0,1,.92.92v19A.92.92,0,0,1,53,69.5Z'/%3E%3Cline class='a3' x1='18.83' y1='54.12' x2='18.83' y2='64.01'/%3E%3Cpath class='a3' d='M23.06,54.12V64m-7.88-9.89V64'/%3E%3Cline class='a3' x1='26.98' y1='54.12' x2='26.98' y2='64.01'/%3E%3Cpath class='a3' d='M48.33,54.12V64m-5.07-9.89V64m-9.83-9.89V64'/%3E%3Cline class='a3' x1='38.04' y1='54.12' x2='38.04' y2='64.01'/%3E%3C/svg%3E");
}

.aa-icon-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cdefs%3E%3Cstyle%3E.u1{fill:%2371b7e2;}.u2,.u3{fill:none;stroke:%23002a5c;stroke-linejoin:round;stroke-width:2.3px;}.u3{stroke-linecap:round;}%3C/style%3E%3C/defs%3E%3Cpath class='u1' d='M54.19,23.52a4.66,4.66,0,1,0-4.67-4.66,4.66,4.66,0,0,0,4.67,4.66'/%3E%3Cpath class='u2' d='M57.77,25.94a15.37,15.37,0,0,1-3.53,3.7,15.48,15.48,0,0,1-3.51-3.7,4.21,4.21,0,0,0-4.21,4.47l-.18,14.16,2.23,1.84V56.56h2.1l1.68,13.17h3.8l1.67-13.17h2.11V46.45l2.24-1.88L62,30.41A4.21,4.21,0,0,0,57.77,25.94Z'/%3E%3Cpath class='u1' d='M35.55,18.8A4.54,4.54,0,1,0,31,23.34,4.53,4.53,0,0,0,35.55,18.8Z'/%3E%3Cpath class='u3' d='M35.23,24.83a14.11,14.11,0,0,1-4.13,3.79,14.79,14.79,0,0,1-3.9-3.79s-4.73,0-4.73,4.58V43.59L25,45.85l3.55,23.88H34l3-23.88,2.53-2.26V29.41A4.34,4.34,0,0,0,35.23,24.83Z'/%3E%3C/svg%3E");
}

/* Invert custom icon to white when sidebar is active.*/
.sidebar-link.active .aa-icon,
.sidebar-sublink.active .aa-icon {
  filter: brightness(0) invert(1);
}

/* --- Content Area --- */

.content-area {
  background-color: var(--aa-white);
  min-height: calc(100vh - var(--aa-navbar-height) - var(--aa-footer-height));
  min-width: 0;
}

/* --- Footer --- */

.aa-footer {
  background-color: var(--aa-blue);
  color: var(--aa-white);
  font-size: 0.8rem;
}

.footer-logo {
  filter: brightness(0) invert(1);
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin-left: 1rem;
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--aa-lightblue);
}

/* --- Modal Header --- */

.aa-modal-header {
  background-color: var(--aa-blue);
  color: var(--aa-white) !important;
}

/* --- Buttons --- */

.btn-primary {
  --bs-btn-color: var(--aa-blue);
  --bs-btn-bg: var(--aa-lightblue);
  --bs-btn-border-color: var(--aa-lightblue);
  --bs-btn-hover-color: var(--aa-white);
  --bs-btn-hover-bg: var(--aa-lightblue-70);
  --bs-btn-hover-border-color: var(--aa-lightblue-70);
  --bs-btn-focus-shadow-rgb: 0 0 0 0.25rem var(--aa-grayblue-50);
  --bs-btn-active-color: var(--aa-white);
  --bs-btn-active-bg: var(--aa-blue);
  --bs-btn-active-border-color: var(--aa-blue);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--aa-blue);
  --bs-btn-disabled-bg: var(--aa-lightblue-25);
  --bs-btn-disabled-border-color: var(--aa-lightblue);
}

.btn-secondary, .btn-outline-primary {
  --bs-btn-color: var(--aa-blue);
  --bs-btn-bg: var(--aa-white);
  --bs-btn-border-color: var(--aa-lightblue);
  --bs-btn-hover-color: var(--aa-white);
  --bs-btn-hover-bg: var(--aa-lightblue-70);
  --bs-btn-hover-border-color: var(--aa-lightblue-70);
  --bs-btn-focus-shadow-rgb: 0 0 0 0.25rem var(--aa-grayblue-50);
  --bs-btn-active-color: var(--aa-blue);
  --bs-btn-active-bg: var(--aa-white);
  --bs-btn-active-border-color: var(--aa-blue);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--aa-blue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--aa-blue);
  --bs-gradient: none;
}

.btn-danger {
  --bs-btn-color: var(--aa-blue);
  --bs-btn-bg: var(--aa-red-70);
  --bs-btn-border-color: var(--aa-red-70);
  --bs-btn-hover-color: var(--aa-white);
  --bs-btn-hover-bg: var(--aa-red-70);
  --bs-btn-hover-border-color: var(--aa-red);
  --bs-btn-focus-shadow-rgb: 0 0 0 0.25rem var(--aa-grayblue-50);
  --bs-btn-active-color: var(--aa-white);
  --bs-btn-active-bg: var(--aa-red);
  --bs-btn-active-border-color: var(--aa-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--aa-blue);
  --bs-btn-disabled-bg: var(--aa-red-40);
  --bs-btn-disabled-border-color: var(--aa-red-70);
}

.btn-outline-danger {
  --bs-btn-color: var(--aa-blue);
  --bs-btn-bg: var(--aa-white);
  --bs-btn-border-color: var(--aa-red-70);
  --bs-btn-hover-color: var(--aa-white);
  --bs-btn-hover-bg: var(--aa-red-70);
  --bs-btn-hover-border-color: var(--aa-red-70);
  --bs-btn-focus-shadow-rgb: 0 0 0 0.25rem var(--aa-grayblue-50);
  --bs-btn-active-color: var(--aa-red);
  --bs-btn-active-bg: var(--aa-white);
  --bs-btn-active-border-color: var(--aa-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--aa-blue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--aa-red-40);
  --bs-gradient: none;
}

.btn-success {
  background-color: var(--aa-green);
  border-color: var(--aa-green);
}

/* --- Pagination ---
   Bootstrap's compiled bootstrap.min.css sets --bs-pagination-* directly on .pagination/
   .page-link rather than deriving them from --bs-primary, so overriding --bs-primary above
   doesn't reach here — same pattern as .nav-pills further up. */
.pagination {
  --bs-pagination-color: var(--aa-blue);
  --bs-pagination-hover-color: var(--aa-white);
  --bs-pagination-hover-bg: var(--aa-lightblue-70);
  --bs-pagination-hover-border-color: var(--aa-lightblue-70);
  --bs-pagination-focus-color: var(--aa-blue);
  --bs-pagination-focus-bg: var(--aa-beige);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--aa-grayblue-50);
  --bs-pagination-active-color: var(--aa-white);
  --bs-pagination-active-bg: var(--aa-blue);
  --bs-pagination-active-border-color: var(--aa-blue);
  --bs-pagination-disabled-color: var(--aa-blue-40);
}

/* --- Cards --- */

.card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  background-color: var(--aa-blue);
  color: var(--aa-white);
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600;
}

/* Headings inside a card header inherit the white header color
   instead of the global h1–h6 blue. */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: var(--aa-white);
}

.card-header-secondary {
  background-color: var(--aa-lightblue);
  color: var(--aa-blue);
  border-radius: 4px 4px 0 0 !important;
  font-weight: 400;
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

.card-body {
  background-color: var(--aa-white);
}

/* Collapsible list toggle (e.g. property groups on the user edit page):
   rotates the chevron based on aria-expanded instead of relying on
   Bootstrap's accordion-only ".collapsed" class. */
.property-groups-toggle {
  text-decoration: none;
}

.property-groups-toggle .bi-chevron-down {
  transition: transform 0.2s ease-in-out;
}

.property-groups-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Wraps property group checkboxes into as many rows as fit the available
   width instead of one entry per row. */
.property-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.property-group-item {
  flex: 1 1 220px;
  max-width: 320px;
}

.card-body-info {
  background-color: var(--aa-beige) !important;
}
/* --- Tables --- */
.table {
  --bs-table-hover-bg: var(--aa-beige);
}

.table thead th {
  background-color: var(--aa-blue);
  color: var(--aa-white);
  font-weight: 600;
  border: none;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: var(--aa-beige);
}

.table-hover > tbody > tr:hover {
  background-color: var(--aa-beige-dark);
}

/* --- Forms --- */

.form-control:focus,
.form-select:focus {
  border-color: var(--aa-lightblue);
  box-shadow: 0 0 0 0.2rem rgba(121, 191, 232, 0.25);
}

/* Prevent browser autofill (Chrome/Edge) from painting a bluish background.
   The UA animates the autofill background-color, so an extremely long transition
   keeps it from ever becoming visible — this preserves the element's own
   background-color and the green validation checkmark (a background-image). */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.form-select:-webkit-autofill:active {
  transition: background-color 600000s 0s, color 600000s 0s;
  -webkit-text-fill-color: var(--bs-body-color, #333);
  caret-color: var(--bs-body-color, #333);
}

/* Browser autofill forces `background-image: none !important` on the input, which
   removes Bootstrap's green validation checkmark. We therefore hide the checkmark on
   the input and draw it on the .form-floating wrapper instead, so it shows for both
   autofilled and typed values. */
.was-validated .form-floating > .form-control:valid:not(.is-invalid),
.form-floating > .form-control.is-valid {
  background-image: none;
}

.was-validated .form-floating:has(> .form-control:valid:not(.is-invalid))::after,
.form-floating:has(> .form-control.is-valid)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: calc(0.75em + 0.375rem);
  height: calc(0.75em + 0.375rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
}

/* Align the checkmark near the top for the taller textarea */
.was-validated .form-floating:has(> textarea.form-control:valid:not(.is-invalid))::after,
.form-floating:has(> textarea.form-control.is-valid)::after {
  top: 1rem;
  transform: none;
}

/* Selected state highlight for form-select (cross-browser compatible, option styling is not supported) */
.form-select {
  color: var(--aa-blue);
}

.form-select:not([multiple]):has(option:checked:not([value=""])) {
  border-color: var(--aa-lightblue);
}

/* Validation state must win over the lightblue "selected" highlight above
   (which has a higher specificity than Bootstrap's default :valid/:invalid rule). */
.was-validated .form-select:not([multiple]):valid:has(option:checked:not([value=""])),
.form-select.is-valid:not([multiple]):has(option:checked:not([value=""])) {
  border-color: var(--bs-form-valid-border-color);
}

.was-validated .form-select:not([multiple]):invalid:has(option:checked:not([value=""])),
.form-select.is-invalid:not([multiple]):has(option:checked:not([value=""])) {
  border-color: var(--bs-form-invalid-border-color);
}

.form-label {
  font-weight: 600;
  color: var(--aa-blue);
  font-size: 0.85rem;
}

/* Read-only floating-label controls in detail views keep the beige fill */
.form-floating > .form-control[readonly],
.form-floating > textarea.form-control[readonly] {
  background-color: var(--aa-beige);
}

/* --- Badges --- */

.badge.bg-primary {
  background-color: var(--aa-lightblue) !important;
  color: var(--aa-blue);
}

.badge.bg-danger {
  background-color: var(--aa-red) !important;
  color: var(--aa-white);
}

.badge.bg-success {
  background-color: var(--aa-green) !important;
  color: var(--aa-white);
}

/* --- Status pills ---
   Used by the three status columns of the contract list. The API reports a
   language-neutral code; the label comes from the message bundles and only the
   modifier class is derived from the code, so a translation never affects the
   colour. Four states, shared across the columns that have them in common. */

.status-pill {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.status-pill--active {
  background-color: var(--aa-green);
  color: var(--aa-white);
}

.status-pill--in-progress {
  background-color: var(--aa-lightblue);
  color: var(--aa-blue);
}

.status-pill--in-closing {
  background-color: var(--aa-beige-dark);
  color: var(--aa-blue);
}

.status-pill--terminated {
  background-color: var(--aa-grayblue-50);
  color: var(--aa-blue);
}

/* A status the API reports as absent: neither an empty cell nor a pill. */
.status-absent {
  color: var(--aa-grayblue-50);
}

/* --- Breadcrumb --- */

.breadcrumb-item a {
  color: var(--aa-blue);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--aa-blue-40);
}

/* --- Spinner --- */

.spinner-border {
  color: var(--aa-lightblue);
}

.modal-title {
  color: var(--aa-white);
}

/* --- Login Page --- */

.login-page {
  background: linear-gradient(135deg, rgba(0, 42, 95, 0.75) 0%, rgba(49, 70, 122, 0.6) 50%, rgba(121, 191, 232, 0.4) 100%),
              url('../img/indexback.jpg') no-repeat center center;
  background-size: cover;
}

.login-card-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 1rem;
}

.login-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.login-card .card-header {
  background-color: var(--aa-blue);
  border-bottom: 3px solid var(--aa-lightblue);
  border-radius: 0;
}

.login-card .card-header h4 {
  color: var(--aa-white);
  font-weight: 600;
}

.login-card .card-body {
  background-color: var(--aa-white);
}

.login-card .btn-primary {
  padding: 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 8px;
}

.login-page .aa-footer {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Backgrounds --- */
.bg-primary {
  background-color: var(--aa-blue) !important;
}

/* --- Checkboxes --- */
.form-check-input:checked {
  background-color: var(--aa-blue);
  border-color: var(--aa-blue);
}

/* Suppress green :valid styling on role and usergroup checkboxes and composite role select (custom JS validation) */
.was-validated .role-checkbox:valid:not(.is-invalid),
.was-validated .usergroup-checkbox:valid:not(.is-invalid),
.was-validated #accessToAllUserGroups:valid:not(.is-invalid) {
  border-color: var(--bs-border-color);
}

.was-validated .role-checkbox:valid:not(.is-invalid):checked,
.was-validated .usergroup-checkbox:valid:not(.is-invalid):checked,
.was-validated #accessToAllUserGroups:valid:not(.is-invalid):checked {
  background-color: var(--aa-blue);
  border-color: var(--aa-blue);
}

.was-validated .role-checkbox:valid:not(.is-invalid) ~ .form-check-label,
.was-validated .usergroup-checkbox:valid:not(.is-invalid) ~ .form-check-label,
.was-validated #accessToAllUserGroups:valid:not(.is-invalid) ~ .form-check-label {
  color: inherit;
}

/* Override green :valid with red when JS sets .is-invalid (checkboxes are always :valid since not required) */
.was-validated .role-checkbox:valid.is-invalid,
.was-validated .usergroup-checkbox:valid.is-invalid,
.was-validated #accessToAllUserGroups:valid.is-invalid {
  border-color: var(--bs-danger, #dc3545);
}

.was-validated .role-checkbox:valid.is-invalid:checked,
.was-validated .usergroup-checkbox:valid.is-invalid:checked,
.was-validated #accessToAllUserGroups:valid.is-invalid:checked {
  background-color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
}

.was-validated .role-checkbox:valid.is-invalid ~ .form-check-label,
.was-validated .usergroup-checkbox:valid.is-invalid ~ .form-check-label,
.was-validated #accessToAllUserGroups:valid.is-invalid ~ .form-check-label {
  color: var(--bs-danger, #dc3545);
}

.was-validated #compositeRoleSelect:valid {
  border-color: var(--bs-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent;
}

.aa-tooltip {
  --bs-tooltip-bg: var(--aa-blue);
  --bs-tooltip-color: var(--bs-white);
}

/* News / Neuigkeiten rich-text rendering */
.news-content blockquote {
  margin: 0.5rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 4px solid var(--aa-lightblue);
  color: var(--aa-blue-60);
  font-style: italic;
}

.news-content ul,
.news-content ol {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.news-content p:last-child {
  margin-bottom: 0;
}

.news-content a {
  color: var(--aa-blue);
  text-decoration: underline;
}


/* ============================================================
   Contract Creation Wizard
   ============================================================ */

/* --- Step indicator ---
   The wizard step indicator (.wizard-indicator / .wizard-step-item /
   .wizard-step-circle / .wizard-step-label) is now styled by the shared
   css/wizard.css (customer design), used by both the contract and customer
   wizards. The former contract-only green-circle styling lived here and was
   retired during the wizard unification. */

/* --- Trustor type selection cards (Step 4) --- */
.trustor-type-card {
  cursor: pointer;
  border: 2px solid #dee2e6;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.trustor-type-card:hover {
  border-color: var(--aa-lightblue);
  box-shadow: 0 0 0 0.15rem var(--aa-lightblue-25);
}

.trustor-type-card.selected {
  border-color: var(--aa-blue);
  background-color: var(--aa-beige);
  box-shadow: 0 0 0 0.2rem rgba(0, 42, 95, 0.15);
}

.trustor-type-card .card-body {
  padding: 1.25rem 0.75rem;
}

.trustor-type-icon {
  font-size: 1.8rem;
  color: var(--aa-blue);
  margin-bottom: 0.5rem;
}

.trustor-type-card.selected .trustor-type-icon {
  color: var(--aa-blue);
}

/* --- Required field marker --- */
.required-marker {
  color: var(--aa-red);
  margin-left: 2px;
}

/* --- Person entry cards (Step 5 participant / owner lists) --- */
.person-entry .card-header {
  background-color: #f8f9fa;
  font-size: 0.85rem;
}

.person-entry .card-body {
  padding: 1rem;
}

.person-entry .person-address-section hr {
  margin: 0.75rem 0;
}

.person-entry .person-address-section h6 {
  font-size: 0.8rem;
  color: #6c757d;
}

.persons-section .person-list:empty::after {
  content: attr(data-empty-label);
  display: block;
  color: #adb5bd;
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.5rem 0;
}

/* 255-character cap: red border when a text field reaches its maximum length.
   Self-contained (own class) so it never conflicts with Bootstrap's .is-invalid state;
   the accompanying .maxlength-feedback message is styled by Bootstrap's .invalid-feedback. */
.form-control.maxlength-reached,
.form-control.maxlength-reached:focus {
  border-color: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}