html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  min-height: 100%;
}

body {
  background-color: #f2f4f7;
}

/* --- Navbar styling --- */
header .navbar {
  padding: 0.25rem 1rem;
  background: #2b3444;
  border-bottom: 3px solid #0d6efd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

header .navbar-nav {
  gap: 0.15rem;
}

header .navbar-nav .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition:
    background 0.15s,
    color 0.15s;
}

header .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
}

header .navbar-nav .nav-link.active,
header .navbar-nav .nav-item.active .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15);
}

header .dropdown-menu {
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  padding: 0.375rem;
  margin-top: 0.25rem;
}

header .dropdown-item {
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  color: #495057;
}

header .dropdown-item:hover {
  background: #f0f2f4;
  color: #212529;
}

header .dropdown-item:active {
  background: #e8f0fe;
  color: #0d6efd;
}

header .dropdown-divider {
  margin: 0.25rem 0;
  border-color: #e9ecef;
}

/* --- Navbar collapsed: inline dropdowns on mobile --- */
@media (max-width: 575.98px) {
  header .navbar-collapse .dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0.25rem 1rem;
    margin-top: 0;
  }

  header .navbar-collapse .dropdown-item {
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    padding: 0.4rem 0.75rem;
  }

  header .navbar-collapse .dropdown-item:hover,
  header .navbar-collapse .dropdown-item:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  header .navbar-collapse .dropdown-item:active,
  header .navbar-collapse .dropdown-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }

  header .navbar-collapse .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* User/Language row at bottom of collapsed nav */
  header .navbar-collapse > ul.navbar-nav:last-child {
    flex-direction: row;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
}

.gallery {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.gallery .thumb {
  position: relative;
}

.gallery .thumb:hover .remove-picture-btn {
  display: block;
}

.gallery .remove-picture-btn {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.child-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 1rem;
}

.child-grid .card {
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.child-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-img-wrapper {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child-grid .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100%;
  color: #b0b8c1;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.child-grid .card-title {
  color: #212529;
}

.card {
  box-shadow: 0 10px 24px rgba(15, 39, 31, 0.06);
  background: #fff;
  border: 0.5px solid #d0d1d5;
  border-radius: 0.875rem;
}

/* --- Nested cards: alternating backgrounds --- */
.card .card {
  box-shadow: none;
  background: #f2f4f7;
  border: 0.5px solid #d0d1d5;
  border-radius: 0.625rem;
}

.card .card .card {
  background: #fff;
  border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
  .card .card .card-body {
    padding: 0.625rem;
  }
}

/* --- Details page: document & field lists --- */
#object-card ul.m-0,
.page-content ul.m-0 {
  list-style: none;
  padding-left: 0;
}

#object-card ul.m-0 > li,
.page-content ul.m-0 > li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #d0d1d5;
}

#object-card ul.m-0 > li:last-child,
.page-content ul.m-0 > li:last-child {
  border-bottom: none;
}

/* --- Details page: description spacing --- */
#object-card .description,
.page-content .description {
  margin-bottom: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
}

/* --- Details page: label styling --- */
#object-card .card-body strong,
.page-content .card-body strong {
  color: #6c757d;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 575.98px) {
  #object-card .card-body strong,
  .page-content .card-body strong {
    font-size: 0.875rem;
    letter-spacing: 0;
  }
}

/* --- Form sections for Edit page --- */
.form-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid #d0d1d5;
}

.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.form-section:first-child {
  padding-top: 0;
}

.form-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin-bottom: 1rem;
}

/* --- Profile / account form blocks ---------------------------------
   Dedicated styling for the user profile form (_AccountFields +
   _UserProfileFields). Uses its own class namespace (.form-block*) so
   the global .form-section* convention used elsewhere stays untouched. */

.form-block {
  padding: 0;
}

/* Spacing between adjacent blocks — uses ~ (general sibling) instead of +
   because hidden <input> elements from model bindings may sit between
   partials, which would break an adjacent-sibling selector. */
.form-block ~ .form-block {
  margin-top: 1.75rem;
}

.form-block-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin: 0 0 1.125rem;
  line-height: 1.3;
}

.form-block-heading > .bi {
  color: #0d6efd;
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Collapsible block — the toggle looks like a proper clickable button bar.
   Tighter gap than regular blocks so stacked toggles feel like a group.
   Declared after the generic rule so it wins on equal specificity. */
.form-block ~ .form-block-collapsible {
  margin-top: 0.75rem;
}

a.form-block-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8125rem 1.125rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  color: #212529;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

a.form-block-toggle:hover,
a.form-block-toggle:focus {
  background: #eef2f7;
  border-color: #c5ced9;
  color: #0d6efd;
  text-decoration: none;
  outline: none;
}

a.form-block-toggle:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

a.form-block-toggle:not(.collapsed) {
  background: #e7f1ff;
  border-color: #bedcff;
}

.form-block-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.form-block-toggle-label > .bi {
  color: #0d6efd;
  font-size: 1.1875rem;
  flex-shrink: 0;
  line-height: 1;
}

.form-block-chevron {
  font-size: 1rem;
  color: #6c757d;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.25s ease;
}

a.form-block-toggle:not(.collapsed) .form-block-chevron {
  color: #0d6efd;
}

a.form-block-toggle.collapsed .form-block-chevron {
  transform: rotate(-90deg);
}

.form-block-collapsible > .collapse.show,
.form-block-collapsible > .collapsing {
  padding: 1.125rem 0.25rem 0.25rem;
}

/* --- Objective form: private section visual treatment -----------------
   Used on sections that hold company-internal ("private") data in the
   objective edit form. Amber left border + warm background so the user
   can see at a glance which blocks are only visible to their own company.
   These classes compose with the existing .form-section convention —
   do NOT mix with the .form-block* classes from the user profile form. */

.form-section.form-section-private {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 0.375rem 0.375rem 0;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -0.25rem;
  border-bottom-color: #f3e1a9;
}

/* Smaller private block variant — used inside an existing .form-section
   (e.g. the "Medien" section) to highlight a private sub-block without
   starting a brand new form-section. */
.form-private-block {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.875rem 1rem;
  margin-top: 1rem;
}

/* Clickable title bar for collapsible private sections */
a.form-section-private-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: #92400e;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  line-height: 1.3;
}

a.form-section-private-toggle:hover,
a.form-section-private-toggle:focus {
  color: #78350f;
  text-decoration: none;
  outline: none;
}

.form-section-private-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.form-section-private-label > .bi {
  color: #f59e0b;
  font-size: 0.9375rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Non-clickable private heading — used inside a .form-private-block when
   the block is not collapsible (e.g. the private pictures upload area). */
.form-private-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #92400e;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.form-private-heading > .bi {
  color: #f59e0b;
  font-size: 0.9375rem;
  line-height: 1;
  flex-shrink: 0;
}

.form-section-private-chevron {
  font-size: 0.8125rem;
  color: #92400e;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

a.form-section-private-toggle.collapsed .form-section-private-chevron {
  transform: rotate(-90deg);
}

/* Gap between toggle bar and the content below when open */
.form-section-private > .collapse.show,
.form-section-private > .collapsing,
.form-private-block > .collapse.show,
.form-private-block > .collapsing {
  margin-top: 0.875rem;
}

/* Private pictures — amber outline on thumbnails so privacy state is
   visible beyond the lock button alone (which sits in the corner). */
.thumb.picture-is-private {
  outline: 2px solid #f59e0b;
  outline-offset: -1px;
  border-radius: 0.25rem;
}

/* Row-highlight pulse: applied for 1s after a field/document is moved
   between the normal and private containers so the user can see where
   it landed without scrolling. Same color as the private-section accent. */
@keyframes form-row-private-pulse {
  0% {
    box-shadow:
      0 0 0 2px #f59e0b,
      0 0 0 5px rgba(245, 158, 11, 0.25);
    background-color: #fff7d6;
  }
  100% {
    box-shadow:
      0 0 0 2px transparent,
      0 0 0 5px transparent;
    background-color: transparent;
  }
}

.form-row-highlight {
  animation: form-row-private-pulse 1s ease-out;
  border-radius: 0.25rem;
}

.object-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.object-header .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
}

.object-header .options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.object-header.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 0.75rem 1.75rem;
  margin: 0 -1rem 0 -1.75rem;
}

/* --- Details page: type badge refinement --- */
.object-header .badge.bg-secondary {
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.3em 0.6em;
  opacity: 0.8;
}

/* Share dropdown */
.dropdown-item .bi-whatsapp {
  color: #25d366;
}
.dropdown-item .bi-telegram {
  color: #0088cc;
}
.dropdown-item .bi-envelope {
  color: #6c757d;
}
.dropdown-item .bi-link-45deg {
  color: #6c757d;
}

.text-bg-0 {
  color: #fff !important;
  background-color: RGBA(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.text-bg-5 {
  color: #fff !important;
  background-color: RGBA(
    var(--bs-primary-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.text-bg-10 {
  color: #fff !important;
  background-color: RGBA(
    var(--bs-success-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.text-bg-15 {
  color: #fff !important;
  background-color: RGBA(
    var(--bs-danger-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

/* Category wrappers — left-border accent instead of background wash.
   Each wrapper exposes --category-color / --category-tint so downstream
   rules (unread rows, icons) pick up the right hue automatically. */
.reports-wrapper {
  --category-color: #f57c00;
  --category-tint: rgba(245, 124, 0, 0.06);
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--category-color);
  border-radius: 4px;
  padding: 1px 6px 6px;
}

.orders-wrapper {
  --category-color: #2e7d32;
  --category-tint: rgba(46, 125, 50, 0.06);
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--category-color);
  border-radius: 4px;
  padding: 1px 6px 6px;
}

.requests-wrapper {
  --category-color: #1976d2;
  --category-tint: rgba(25, 118, 210, 0.06);
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--category-color);
  border-radius: 4px;
  padding: 1px 6px 6px;
}

.followups-wrapper {
  --category-color: #9c27b0;
  --category-tint: rgba(156, 39, 176, 0.06);
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--category-color);
  border-radius: 4px;
  padding: 1px 6px 6px;
}

/* --- Report statistics --- */
.stat-legend {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
}

.stat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.stat-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-chart {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Desktop: keep native table-cell display so the command td always fills
   the full row height. display:flex here would detach the cell from the
   table row, making it shrink to button height — row dividers and any
   tr-level background then stop at the buttons instead of spanning the
   full row. Button spacing is done via margin so we don't need flex gap. */
.k-grid td.k-command-cell {
  text-align: right;
  vertical-align: middle;
}

.k-grid td.k-command-cell .k-button {
  margin: 2px;
}

/* Hide the default pencil icon on the inline edit command — we label
   the button "Status ändern" and the icon is redundant. Kendo renders
   the button with class .k-grid-edit-command (not .k-grid-edit). */
.k-grid .k-grid-edit-command .k-button-icon {
  display: none;
}

/* Grid row action buttons: subtle by default, visible on hover */
.k-grid
  tbody
  .k-command-cell
  .k-button:not(.k-grid-edit):not(.k-grid-update):not(.k-grid-cancel) {
  background: transparent;
  border-color: transparent;
  color: #6c757d;
  font-size: 0.8125rem;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.k-grid
  tbody
  tr:hover
  .k-command-cell
  .k-button:not(.k-grid-edit):not(.k-grid-update):not(.k-grid-cancel) {
  background: #fff;
  border-color: #dee2e6;
  color: #212529;
}

.k-grid
  tbody
  .k-command-cell
  .k-button:not(.k-grid-edit):not(.k-grid-update):not(.k-grid-cancel):hover {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.description {
  font-size: 1rem;
  white-space: pre-wrap;
  font-family: inherit;
}

/* Reset link styles */

a.config-btn {
  color: inherit; /* Inherits the color from the parent element */
  text-decoration: none; /* Removes the default underline */
  cursor: pointer; /* Ensures the hand cursor remains, which is a good default behavior */
}

/* Also reset link pseudo-classes for consistency */
a.config-btn:link,
a.config-btn:visited,
a.config-btn:hover,
a.config-btn:active {
  color: inherit;
  text-decoration: none;
}

.justify-content-between .config-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  max-height: 24px;
}

.justify-content-between:has(.config-btn):hover .config-btn {
  opacity: 1;
  pointer-events: auto;
}

.d-flex:has(.config-btn) {
  gap: 0.5rem;
  align-items: center;
}

/* ------------------------------------------------------------------
   Unified TabStrip — flat underline style.
   Applies identically to Objective details, Report details, Dashboard.
   Active state is marked by a colored bottom bar and bold text,
   not by per-tab background colors.
   ------------------------------------------------------------------ */

/* Pre-init guard. Kendo's MVC HTML helper renders the tabstrip server-side
   as a plain <div> with a <ul> nav and one <div> per tab content stacked
   vertically — the .k-tabstrip class and the panel collapse only happen
   when kendoTabStrip() runs in $(document).ready. Without this rule, the
   first paint shows EVERY tab content (Reports + Orders + Requests +
   FollowUps for objective details), then Kendo collapses to the active
   tab — a large visible jump on every page load. The :not(.k-tabstrip)
   selector matches only before Kendo decorates, so these rules drop off
   automatically once init completes. */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > div:nth-of-type(n + 2) {
  display: none;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
  display: flex;
  gap: 0;
  border-bottom: none;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > ul
  > li {
  padding: 0.625rem 1.125rem;
  color: #6c757d;
  font-weight: 500;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > ul
  > li:first-child {
  color: #212529;
  font-weight: 600;
  position: relative;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > ul
  > li:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--bs-primary, #0d6efd);
}

/* Match the post-init panel padding (see .k-tabstrip-content > .reports-wrapper
   rule below) so the first tab content does not shift horizontally when
   Kendo wraps it in .k-tabstrip-content. */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left):not(.k-tabstrip)
  > div:first-of-type
  > :is(
    .reports-wrapper,
    .orders-wrapper,
    .requests-wrapper,
    .followups-wrapper
  ) {
  padding: 0.75rem 0.875rem;
}

:is(
  #objective-tabstrip,
  #report-tabstrip,
  .dashboard-page #tabstrip-left
).k-tabstrip {
  background: transparent;
  border: none;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-content {
  padding: 0;
  border: none;
  background: transparent;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-content
  > div {
  margin-top: 0 !important;
}

/* Hide panel-internal headings that duplicate the tab label */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  .report-title,
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  .followups-wrapper
  > .d-flex
  > h5 {
  display: none;
}

/* Panel wrappers (direct children of tab content only, so nested
   wrappers inside ReportList keep their pastel grouping). */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-content
  > :is(
    .reports-wrapper,
    .orders-wrapper,
    .requests-wrapper,
    .followups-wrapper
  ) {
  padding: 0.75rem 0.875rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-content
  > *
  .d-flex.gap-2.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Tab bar: no hairline — active tab is marked only by its own
   primary underline bar. Padding-bottom owns the air between the
   bar and the grid below. */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper {
  border-bottom: none;
  background: transparent;
  padding-bottom: 0.5rem;
}

/* Tab items: flat, transparent, no border, muted label */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.625rem 1.125rem !important;
  color: #6c757d !important;
  font-weight: 500;
  position: relative;
  transition: color 0.15s ease;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item:hover {
  color: #212529 !important;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item:focus,
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item.k-focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Active tab: dark label + bold + primary underline bar */
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item.k-active,
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item.k-selected {
  background: transparent !important;
  color: #212529 !important;
  font-weight: 600;
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item.k-active::after,
:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  .k-item.k-selected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--bs-primary, #0d6efd);
}

:is(#objective-tabstrip, #report-tabstrip, .dashboard-page #tabstrip-left)
  > .k-tabstrip-items-wrapper
  + .k-tabstrip-content {
  margin-top: 0;
}

.drop-zone {
  border: 2px dashed #c8cdd3;
  border-radius: 0.625rem;
  padding: 1.5rem 1rem;
  cursor: pointer;
  text-align: center;
  background: #f8f9fa;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.drop-zone:hover {
  border-color: #90a4ae;
  background: #f0f4f7;
}

.drop-zone.dragover {
  background: #e8f0fe;
  border-color: #007bff;
}

.drop-zone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: #6c757d;
  pointer-events: none;
}

.drop-zone-placeholder i {
  font-size: 1.75rem;
  color: #90a4ae;
}

.drop-zone-placeholder span {
  font-size: 0.875rem;
}

.drop-zone:hover .drop-zone-placeholder i {
  color: #607d8b;
}

.drop-zone.has-files .drop-zone-placeholder {
  display: none;
}

.file-list {
  margin-top: 0;
  font-size: 0.8125rem;
  text-align: left;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.file-list:not(:empty) {
  margin-top: 0.5rem;
}

.drop-zone-thumb {
  max-width: 90px;
  max-height: 90px;
  object-fit: cover;
  margin: 0.25rem;
}

/* Gallery Modal */
.gallery-modal .modal-content {
  overflow: hidden;
}

.gallery-modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  opacity: 0.5;
}

.gallery-modal-close:hover {
  opacity: 1;
}

.gallery-modal-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  width: 100%;
  padding: 2.5rem 3rem;
}

.gallery-modal-main img {
  max-height: 70vh;
  object-fit: contain;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  color: #333;
  font-size: 1.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
}

.gallery-nav:hover {
  background: rgba(0, 0, 0, 0.15);
}

.gallery-nav:disabled {
  opacity: 0.2;
  cursor: default;
}

.gallery-nav-prev {
  left: 0.75rem;
}

.gallery-nav-next {
  right: 0.75rem;
}

.gallery-modal-thumbs {
  display: flex;
  gap: 6px;
  padding: 0.75rem;
  overflow-x: auto;
  justify-content: center;
  width: 100%;
  background: #f0f0f0;
  border-top: 1px solid #ddd;
}

.gallery-modal-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

.gallery-modal-thumb:hover {
  opacity: 0.8;
}

.gallery-modal-thumb.active {
  opacity: 1;
  border-color: #0d6efd;
}

@media (max-width: 575.98px) {
  .gallery-modal-main {
    min-height: 200px;
    padding: 1rem 2rem;
  }

  .gallery-nav {
    font-size: 1.25rem;
    padding: 0.25rem 0.35rem;
  }

  .gallery-nav-prev {
    left: 0.25rem;
  }

  .gallery-nav-next {
    right: 0.25rem;
  }

  .gallery-modal-thumb {
    width: 48px;
    height: 48px;
  }
}

.status-dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 50%;
}

.status-dot.badge:empty {
  display: inline-block;
}

/* --- Manage account page --- */
.manage-header {
  border-bottom: 1px solid #d0d1d5;
  padding-bottom: 0.75rem;
}

.manage-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manage-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #495057;
  text-decoration: none;
  font-size: 0.875rem;
  transition:
    background 0.15s,
    color 0.15s;
}

.manage-nav-link:hover {
  background: #f0f2f4;
  color: #212529;
  text-decoration: none;
}

.manage-nav-link.active {
  background: #e8f0fe;
  color: #0d6efd;
  font-weight: 600;
}

.manage-nav-link i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

/* --- Page header --- */
.page-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
  gap: 0.25rem;
}

.page-header-title h4 {
  flex: 1;
  min-width: 0;
}

.page-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.page-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
  .page-toolbar {
    gap: 0.375rem;
  }

  .page-toolbar .btn-sm {
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
  }
}

/* --- Permission tree --- */

/* Custom tri-state checkbox: same base for leaf, section, and master.
   Native appearance is removed so :checked / :indeterminate render as
   distinct, recognisable shapes regardless of OS theme. */
.perm-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #adb5bd;
  border-radius: 0.25rem;
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
  margin: 0;
}

.perm-checkbox:hover {
  border-color: #0d6efd;
}

.perm-checkbox:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.perm-checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>")
    center/85% no-repeat;
}

.perm-checkbox:indeterminate {
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.perm-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8z'/></svg>")
    center/85% no-repeat;
}

.perm-checkbox:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

/* Master variant — bigger box, anchors the entity card */
.perm-checkbox-master {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

/* Tree container */
.permission-tree {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Master node (top-level entity: Objekt, Report, Order, ...) --- */
.permission-master {
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.permission-master:focus-within {
  border-color: #0d6efd;
}

.permission-master-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
}

.permission-master[data-collapsed="true"] .permission-master-header {
  border-bottom-color: transparent;
}

.permission-master-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  margin: 0;
  flex: 1;
  user-select: none;
}

.permission-master-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #212529;
}

.permission-master-children {
  padding: 0.75rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.permission-master[data-collapsed="true"] .permission-master-children {
  display: none;
}

/* --- Section node (objective.read, objective.edit, ...) --- */
.permission-section {
  border-left: 2px solid #dee2e6;
  padding-left: 0.75rem;
}

.permission-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.permission-section-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.permission-section-label {
  font-weight: 500;
  color: #343a40;
}

.permission-section-children {
  padding-left: 1.5rem;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.permission-section[data-collapsed="true"] .permission-section-children {
  display: none;
}

/* --- Leaf node --- */
.permission-leaf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  user-select: none;
  transition: background-color 0.12s ease;
}

.permission-leaf:hover {
  background-color: #f1f3f5;
}

.permission-leaf-label {
  color: #495057;
}

/* --- Collapse chevron button --- */
.permission-collapse-btn {
  background: none;
  border: none;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
}

.permission-collapse-btn:hover {
  color: #212529;
}

.permission-collapse-btn .perm-chevron {
  transition: transform 0.15s ease;
  display: inline-block;
}

[data-collapsed="true"] > .permission-master-header .perm-chevron,
[data-collapsed="true"] > .permission-section-header .perm-chevron {
  transform: rotate(-90deg);
}

/* --- Legend --- */
.permission-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  margin-bottom: 0.75rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #495057;
}

.permission-legend-title {
  font-weight: 600;
  color: #212529;
}

.permission-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.perm-legend-box {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #adb5bd;
  border-radius: 0.25rem;
  background-color: #fff;
  position: relative;
}

.perm-legend-box.perm-legend-checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.perm-legend-box.perm-legend-checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>")
    center/85% no-repeat;
}

.perm-legend-box.perm-legend-indeterminate {
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.perm-legend-box.perm-legend-indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8z'/></svg>")
    center/85% no-repeat;
}

/* --- Mobile: Kendo overrides --- */
@media (max-width: 767.98px) {
  /* Mobile: command buttons stack vertically. Flex is safe here because
     the stacked buttons already make the cell tall enough to fill the
     row, so we don't hit the "shrunk td" issue the desktop rule avoids. */
  .k-grid td.k-command-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .k-grid
    tbody
    .k-command-cell
    .k-button:not(.k-grid-edit):not(.k-grid-update):not(.k-grid-cancel) {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
  }

  .k-tabstrip-items-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .k-tabstrip-items {
    flex-wrap: nowrap;
  }

  .k-tabstrip-items .k-item {
    flex-shrink: 0;
  }

  .justify-content-between .config-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Nested-dropdown ("Benutzerverwaltung" submenu inside Konfiguration).
   Bootstrap 5 ships no built-in nested dropdown; this minimal CSS+JS
   pair adds one. The trigger row uses .dropdown-submenu and its inner
   <ul> becomes the slide-out panel positioned to the right of its
   parent. Hover opens it; click on the trigger also toggles. */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.25rem;
  margin-left: 0.1rem;
}

.dropdown-submenu > .dropdown-submenu-toggle::after {
  content: "\203A";
  float: right;
  margin-left: 0.5rem;
  font-weight: bold;
}

@media (min-width: 768px) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-submenu.show > .dropdown-menu {
  display: block;
}