/**
 * Custom overrides for Metro CSS
 * Primary color: #7E6100
 * Form inputs use default MetroUI gray styling; primary color only for headings/buttons.
 */

@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Headings h1–h3: Gentium Plus */
h1, h2, h3 {
  font-family: 'Gentium Plus', serif;
  font-weight: 400;
  color: #7E6100;
}

h2, .h2 {
  font-size: calc(clamp(1.25rem, 4vw, 1.5rem) + 2px);
}

h3, .h3 {
  font-size: calc(clamp(1.1rem, 3vw, 1.25rem) + 2px);
}

.cabinet-page-title {
  margin-top: 0 !important;
  margin-bottom: 16px;
}

:root {
  /* Accent color palette */
  --accent-color: #7E6100;
  --accent-light: #B8860B;
  --accent-dark: #6B5300;
  --color-light-accent: color-mix(in srgb, var(--accent-light) 25%, white);

  --selected-color: #7E6100;
  /* Required fields: accent dashed border */
  --input-required-color: #7E6100;
  /* Focused field: light-accent glow */
  --input-box-shadow: rgba(184, 134, 11, 0.42);

  /* Tables: no light-gray bar behind header row (Metro default #fafafa on thead) */
  --table-header-background: transparent;
}

/* Required fields: accent dashed border, light-accent focus glow */
input.required:focus,
textarea.required:focus,
select.required:focus,
.input.required:focus,
.textarea.required:focus,
.select.required:focus,
.metro-input.required:focus,
input.required.focused,
textarea.required.focused,
select.required.focused,
.input.required.focused,
.textarea.required.focused,
.select.required.focused,
.metro-input.required.focused {
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.42) !important;
}

/* Progress bar: accent fill by default */
.progress-component .bar {
  background-color: var(--accent-color) !important;
}

/* Status badges: muted, solid colors instead of bright */
.badge.success {
  background-color: hsl(140, 38%, 42%) !important;
  border-color: hsl(140, 38%, 42%) !important;
}
.badge.alert {
  background-color: hsl(348, 45%, 42%) !important;
  border-color: hsl(348, 45%, 42%) !important;
}
.badge.warning {
  background-color: hsl(39, 65%, 45%) !important;
  border-color: hsl(39, 65%, 45%) !important;
}
.badge.info {
  background-color: hsl(215, 55%, 42%) !important;
  border-color: hsl(215, 55%, 42%) !important;
}
.badge.dark {
  background-color: hsl(0, 0%, 35%) !important;
  border-color: hsl(0, 0%, 35%) !important;
}

/* Accent utilities */
.bd-accent { border-color: var(--accent-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.fg-accent { color: var(--accent-color) !important; }

.bd-light-accent { border-color: var(--accent-light) !important; }
.bg-light-accent { background-color: var(--color-light-accent) !important; }
.fg-light-accent { color: var(--accent-light) !important; }

.bd-dark-accent { border-color: var(--accent-dark) !important; }
.bg-dark-accent { background-color: var(--accent-dark) !important; }
.fg-dark-accent { color: var(--accent-dark) !important; }

/* Primary button (Metro uses .primary, not .btn-primary) */
button.primary,
.button.primary,
.button.btn-primary,
.button.bg-primary {
  background-color: #7E6100 !important;
  color: #fff !important;
  border-color: #7E6100 !important;
}
button.primary:hover,
.button.primary:hover,
.button.btn-primary:hover,
.button.bg-primary:hover {
  background-color: #6B5300 !important;
  border-color: #6B5300 !important;
  color: #fff !important;
}
button.primary:active,
button.primary:focus,
.button.primary:active,
.button.primary:focus,
.button.btn-primary:active,
.button.btn-primary:focus,
.button.bg-primary:active,
.button.bg-primary:focus {
  background-color: #7E6100 !important;
  border-color: #7E6100 !important;
  outline-color: #7E6100 !important;
}

/* Primary outline button: accent instead of default red */
button.primary.outline,
.button.primary.outline,
.button.outline.primary {
  color: #7E6100 !important;
  border-color: #7E6100 !important;
  background-color: transparent !important;
}
button.primary.outline .dropdown-caret,
.button.primary.outline .dropdown-caret,
.button.outline.primary .dropdown-caret {
  fill: #7E6100 !important;
}
button.primary.outline:hover,
.button.primary.outline:hover,
.button.outline.primary:hover {
  color: #fff !important;
  background-color: #7E6100 !important;
  border-color: #7E6100 !important;
}
button.primary.outline:active,
.button.primary.outline:active,
.button.outline.primary:active,
button.primary.outline:focus,
.button.primary.outline:focus,
.button.outline.primary:focus {
  color: #fff !important;
  background-color: #6B5300 !important;
  border-color: #6B5300 !important;
  outline-color: #7E6100 !important;
}

/* Skill-box for projects: dark-gray outer border, light divider, subtle shadow, badges white on accent */
.skill-box-project {
  --skill-box-border-radius: 6px;
  --skill-box-border-color: hsl(0, 0%, 55%); /* dark-gray */
  --skill-box-background: transparent;
  --skill-box-header-background: transparent;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.1);
  --skill-box-color: inherit;
  --skill-box-header-color: inherit;
}
.skill-box-project .header {
  border-bottom-color: var(--border-color, #e8e8e8) !important;
}
.skill-box-project .header .avatar { display: none; }
.skill-box-project .header .subtitle { display: none; }
.skill-box-project .header .title { margin-left: 0; }
.skill-box-project .title a { text-decoration: none; }
.skill-box-project .title a:hover { text-decoration: underline; }
.skill-box-project .badge.bg-accent {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

/* Compact skill-box: small Metro icon and compact title/body text */
.skill-box.skill-box-compact .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding: 10px 14px;
}
.skill-box.skill-box-compact .header .avatar {
  float: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 11px;
}
.skill-box.skill-box-compact .header .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.skill-box.skill-box-compact .header .subtitle {
  flex: 0 0 100%;
  margin: 2px 0 0 28px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
}
.skill-box.skill-box-compact .content {
  padding: 12px 14px 12px;
  font-size: 12px;
  line-height: 1.45;
}
.skill-box.skill-box-compact .content p,
.skill-box.skill-box-compact .content li {
  font-size: 12px;
  color: #555;
}
.skill-box.skill-box-compact .content p {
  margin: 0;
}

/* Hide segment dialog until Metro initializes; remove preload class when opening */
.segment-dialog-preload {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Segment add/edit dialog: white background, 2px primary border, 4px radius */
.segment-dialog {
  background-color: #fff !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.segment-dialog .dialog-title,
.segment-dialog .dialog-content {
  background-color: #fff !important;
}
.segment-dialog .dialog-actions {
  display: none !important;
}
.segment-dialog .closer:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

/* Add contacts tabs: 1px gray bottom line, 3px accent underline on active only */
.contacts-add-tabs {
  --tabs-item-marker: var(--accent-color);
  --tabs-item-marker-height: 3px;
  --tabs-item-color-active: var(--accent-color);
  border: none !important;
  border-bottom: 1px solid #999 !important;
  position: relative;
  z-index: 0;
}
/* Prevent inactive li from overlapping the bottom line (Metro uses margin-bottom: -1px) */
.contacts-add-tabs.tabs-list > li,
.contacts-add-tabs .tabs-expand > ul.tabs-list > li,
.contacts-add-tabs ul.tabs-list > li {
  margin-bottom: 0 !important;
}
/* Hide underline on inactive items */
.contacts-add-tabs.tabs-list > li:not(.active)::before,
.contacts-add-tabs .tabs-expand > ul.tabs-list > li:not(.active)::before,
.contacts-add-tabs ul.tabs-list > li:not(.active)::before {
  display: none !important;
}
.contacts-add-tabs.tabs-list > li.active::before,
.contacts-add-tabs .tabs-expand > ul.tabs-list > li.active::before,
.contacts-add-tabs ul.tabs-list > li.active::before {
  background-color: var(--accent-color) !important;
  height: 3px !important;
}

/* File drop zone: light-gray border instead of default dark */
#filetools-root .drop-zone {
  --file-drop-zone-border-color: hsl(0, 0%, 95%);
  --file-drop-zone-hover-color: hsl(0, 0%, 87%);
}

/* Tabs with 1px accent bottom line (filetools, etc.) */
.tabs-accent-bottom {
  --tabs-item-marker: var(--accent-color);
  --tabs-item-marker-height: 3px;
  --tabs-item-color-active: var(--accent-color);
  border: none !important;
  border-bottom: 1px solid var(--accent-color) !important;
  position: relative;
  z-index: 0;
}
.tabs-accent-bottom.tabs-list > li,
.tabs-accent-bottom .tabs-expand > ul.tabs-list > li,
.tabs-accent-bottom ul.tabs-list > li {
  margin-bottom: 0 !important;
}
.tabs-accent-bottom.tabs-list > li:not(.active)::before,
.tabs-accent-bottom .tabs-expand > ul.tabs-list > li:not(.active)::before,
.tabs-accent-bottom ul.tabs-list > li:not(.active)::before {
  display: none !important;
}
.tabs-accent-bottom.tabs-list > li.active::before,
.tabs-accent-bottom .tabs-expand > ul.tabs-list > li.active::before,
.tabs-accent-bottom ul.tabs-list > li.active::before {
  background-color: var(--accent-color) !important;
  height: 3px !important;
}

body {
  background: #f3f3f3;
  min-height: 100vh;
}

/* Auth pages (sign in, register, password reset) */
.auth-page-body {
  background: #f3f3f3;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
  box-sizing: border-box;
}

.auth-page__logo-wrap {
  margin-bottom: 28px;
  text-align: center;
}

.auth-page__logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.auth-card__title {
  margin: 0 0 20px;
  text-align: center;
  font-size: 1.5rem;
}

.auth-form__field {
  margin-bottom: 12px;
}

.auth-form__field .input,
.auth-form__field input {
  width: 100%;
}

.auth-form__rules {
  margin: 0 0 12px;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.auth-form__actions {
  margin-top: 8px;
}

.auth-form__submit {
  width: 100%;
}

.auth-form__links {
  margin-top: 16px;
  text-align: center;
  font-size: 0.9rem;
}

.auth-form__links--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.auth-form__links a {
  color: var(--accent-color);
  text-decoration: none;
  white-space: nowrap;
}

.auth-form__links a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .auth-page {
    padding-left: 0;
    padding-right: 0;
  }

  .auth-card {
    width: 80%;
    max-width: none;
  }

  .auth-form__links--split {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .auth-form__links--split a {
    white-space: normal;
  }
}

body > .container {
  max-width: 100%;
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 12px;
}

main > .row,
.cabinet-layout-row {
  min-width: 0;
  margin-right: 0;
}

.main-topbar {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-bottom: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
}

.cabinet-topbar {
  gap: 18px;
}

.cabinet-topbar .dropdown-button > ul.d-menu {
  display: none !important;
}

.cabinet-topbar .dropdown-button.active-container > ul.d-menu {
  display: block !important;
}

.main-topbar-menu-col {
  flex: 0 0 52px;
  max-width: 52px;
  min-width: 52px;
  transition: flex-basis 0.3s ease-in-out, max-width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

main:has(.main-sidenav.expanded) .main-topbar-menu-col {
  flex-basis: 230px;
  max-width: 230px;
  min-width: 230px;
}

.main-topbar-content-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.main-topbar-logo {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: padding 0.3s ease-in-out;
}

main:has(.main-sidenav.expanded) .main-topbar-logo {
  justify-content: flex-start;
  padding-left: 12px;
}

.main-topbar-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

main:has(.main-sidenav.expanded) .main-topbar-logo a {
  justify-content: flex-start;
}

.main-topbar-logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.main-topbar-logo__compact {
  display: block !important;
}

.main-topbar-logo__expanded {
  display: none !important;
  max-width: 234px;
}

main:has(.main-sidenav.expanded) .main-topbar-logo__compact {
  display: none !important;
}

main:has(.main-sidenav.expanded) .main-topbar-logo__expanded {
  display: block !important;
}

.main-topbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.main-sidenav-toggle {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
}

.main-sidenav-toggle:hover,
.main-sidenav-toggle:focus,
.main-sidenav-toggle:active {
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
}

.main-sidenav-toggle .mif-menu {
  font-size: 14px;
  line-height: 1;
}

.cabinet-layout-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

.main-menu-shell {
  flex: 0 0 52px !important;
  max-width: 52px !important;
  min-width: 52px !important;
  position: sticky;
  top: 76px;
  align-self: flex-start;
  max-height: calc(100vh - 92px);
  overflow: visible;
  padding-top: 2px;
  padding-bottom: 12px;
  z-index: 2;
  transition: flex-basis 0.3s ease-in-out, max-width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

.main-menu-shell:has(.main-sidenav.expanded) {
  flex: 0 0 230px !important;
  max-width: 230px !important;
  min-width: 230px !important;
  height: calc(100vh - 92px);
  max-height: calc(100vh - 92px);
}

.main-content-shell {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.main-content-card {
  min-height: calc(100vh - 96px);
  border-color: #dddddd !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  margin-bottom: 10px;
}

.main-sidenav {
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 92px);
}

.main-sidenav.expanded {
  height: 100%;
  max-height: 100%;
}

.main-sidenav > li:not(.client-projects-sidenav__scroll-host) {
  flex: 0 0 auto;
}

.client-projects-sidenav__scroll-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 6px !important;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

.main-sidenav > li.client-projects-sidenav__scroll-host,
.main-sidenav > li.client-projects-sidenav__scroll-host:hover,
.main-sidenav > li.client-projects-sidenav__scroll-host:active,
.main-sidenav > li.client-projects-sidenav__scroll-host:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.client-projects-sidenav__scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: #c4c4c4 transparent;
}

.client-projects-sidenav__scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.client-projects-sidenav__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.client-projects-sidenav__scroll::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 4px;
}

.client-projects-sidenav__scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

.client-projects-sidenav__scroll::-webkit-scrollbar-button,
.client-projects-sidenav__scroll::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

.client-projects-sidenav__scroll-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.client-projects-sidenav__scroll-list > li + li {
  margin-top: 6px;
}

.client-projects-sidenav__scroll-list li::before,
.client-projects-sidenav__scroll-list li::after {
  display: none !important;
  content: none !important;
}

.main-sidenav .icon {
  font-size: 18px;
}

.main-sidenav .badge {
  min-width: 16px;
  min-height: 16px;
  height: auto;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 4px;
}

.main-sidenav:not(.expanded) > li > a {
  overflow: visible !important;
}

.main-sidenav:not(.expanded) .badge {
  top: 3px;
  right: 3px;
  border-radius: 4px !important;
  clip-path: none !important;
}

.main-sidenav:not(.expanded) .client-projects-sidenav__projects-block {
  display: none !important;
}

.client-projects-sidenav__projects-badge--toggle {
  cursor: pointer;
}

.client-projects-sidenav__projects-badge--toggle:hover,
.client-projects-sidenav__projects-badge--toggle:focus {
  filter: brightness(0.92);
  outline: none;
}

.main-sidenav > li > a,
.main-sidenav .sidenav-sublist > li > a {
  border-radius: 12px;
}

.main-sidenav > li + li {
  margin-top: 6px;
}

.main-sidenav > li.client-projects-sidenav__scroll-host {
  margin-top: 6px;
}

.main-sidenav .sidenav-title {
  padding: 10px 12px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #666;
}

.main-sidenav ul,
.main-sidenav li {
  list-style: none !important;
}

.main-sidenav li::before,
.main-sidenav li::after,
.main-sidenav ul::before,
.main-sidenav ul::after {
  display: none !important;
  content: none !important;
}

.main-sidenav .disabled > a,
.main-sidenav .disabled > a:hover {
  color: #9a9a9a !important;
  background: transparent !important;
  cursor: default;
  pointer-events: none;
}

.main-sidenav__title-only {
  margin-top: 12px !important;
  margin-bottom: 4px;
}

.main-sidenav .divider {
  height: 1px;
  margin: 12px 12px;
  background: #dfdfdf;
  border: 0;
  padding: 0;
}

.client-projects-sidenav__item > a,
.client-projects-sidenav__toggle {
  margin-left: 0;
  margin-right: 0;
}

.client-projects-sidenav__projects-block .icon {
  font-size: 16px;
}

.client-projects-sidenav__item.client-projects-sidenav__projects-block .caption {
  font-size: 12px;
}

.client-projects-sidenav__toggle-wrap .client-projects-sidenav__toggle-label {
  font-size: 10px;
}

.client-projects-sidenav__toggle-wrap .client-projects-sidenav__toggle-icon {
  font-size: 14px;
  line-height: 1;
}

.client-projects-sidenav__toggle-wrap[hidden] {
  display: none !important;
}

.client-projects-sidenav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.client-projects-sidenav__toggle .icon {
  position: static;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
}

.client-projects-sidenav__toggle-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-projects-sidenav__item {
  background: transparent !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.client-projects-sidenav__item.active {
  background: transparent !important;
}

.client-projects-sidenav__item > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
}

.client-projects-sidenav__item > a:hover,
.client-projects-sidenav__item > a:focus {
  background: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
}

.client-projects-sidenav__item.active > a {
  background: #fff !important;
}

.client-projects-sidenav__item .caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.client-projects-sidenav__item--extra[hidden] {
  display: none !important;
}

.client-projects-sidenav__toggle:hover,
.client-projects-sidenav__toggle:focus {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

.client-projects-sidenav__empty {
  padding: 6px 12px 12px;
  color: #888;
}

.project-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.project-toolbar__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #666;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.project-toolbar__item:hover,
.project-toolbar__item:focus {
  border-color: #c5c5c5;
  background: #f7f7f7;
  color: #222;
  text-decoration: none !important;
}

.project-toolbar__item.active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 8%, white);
  color: var(--accent-color);
}

.project-toolbar__item span {
  font-size: 18px;
  line-height: 1;
}

.project-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #444;
  text-decoration: none !important;
}

.project-toolbar__chip-icon {
  font-size: 16px;
  line-height: 1;
}

.project-toolbar__chip:hover,
.project-toolbar__chip:focus {
  background: #f7f7f7;
  color: #111;
  text-decoration: none !important;
}

.project-toolbar__chip.active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 8%, white);
  color: var(--accent-color);
}

.project-toolbar__chip .badge {
  min-width: 16px;
  min-height: 16px;
  height: auto;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 4px;
}

.project-toolbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.project-toolbar__item--disabled,
.project-toolbar__item--disabled:hover,
.project-toolbar__item--disabled:focus {
  border-color: #dddddd !important;
  background: #f7f7f7 !important;
  color: #b0b0b0 !important;
  cursor: default;
  pointer-events: none;
}

.project-content-shell {
  min-width: 0;
}

@media (max-width: 991px) {
  body > .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .cabinet-topbar {
    gap: 12px;
  }

  main:has(.main-sidenav.expanded) .main-topbar-menu-col {
    flex-basis: 52px;
    max-width: 52px;
    min-width: 52px;
  }

  main:has(.main-sidenav.expanded) .main-topbar-logo__compact {
    display: block !important;
  }

  main:has(.main-sidenav.expanded) .main-topbar-logo__expanded {
    display: none !important;
  }

  main:has(.main-sidenav.expanded) .main-topbar-logo {
    justify-content: center;
    padding-left: 0;
  }

  .cabinet-layout-row {
    display: block;
    flex-direction: column;
  }

  .main-menu-shell:not(:has(.main-sidenav.expanded)) {
    display: none !important;
  }

  .main-menu-shell:has(.main-sidenav.expanded) {
    display: block;
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 12px;
  }

  .main-menu-shell .main-sidenav.expanded {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .client-projects-sidenav__scroll {
    max-height: min(42vh, 360px);
  }

  .main-content-shell {
    width: 100%;
  }

  .main-content-card {
    min-height: auto;
  }
}

/* Campaign Planner — desktop layout */
.cabinet-layout-row:has(.campaign-planner-page) {
  align-items: stretch;
}

.main-content-shell:has(.campaign-planner-page) {
  display: flex;
  flex-direction: column;
}

.main-content-shell:has(.campaign-planner-page) .main-content-card {
  flex: 1 1 auto;
}

.main-content-card:has(.campaign-planner-page) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: calc(100vh - 96px);
}

.campaign-planner-page {
  min-height: 0;
  width: 100%;
}

.campaign-planner-page > .row {
  margin-right: 0;
}

@media (min-width: 992px) {
  .campaign-planner-page [data-planner-scope="day"].campaign-planner-panel {
    margin-right: 8px;
  }

  .campaign-planner-page [data-planner-scope="week"].campaign-planner-panel {
    margin-left: 4px;
    margin-right: 4px;
  }

  .campaign-planner-page [data-planner-scope="month"].campaign-planner-panel {
    margin-left: 4px;
  }
}

.campaign-planner-page .flex-grow-self {
  min-height: 0;
}

.campaign-planner-day-host {
  width: 100%;
}

.campaign-planner-day-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.campaign-planner-day-table thead {
  border-bottom: 1px solid #bdbdbd !important;
}

.campaign-planner-day-table thead th {
  padding: 0 4px 5px 0;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 200 !important;
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}

.campaign-planner-day-table thead th.campaign-planner-day-table__col-list,
.campaign-planner-day-table thead th.campaign-planner-day-table__col-template {
  text-align: center;
  padding: 0 0 5px 0;
}

.campaign-planner-day-table thead th.campaign-planner-day-table__col-actions {
  text-align: left;
  padding: 0 0 5px 0;
}

.campaign-planner-day-table col.campaign-planner-day-table__col-status {
  width: 100px;
}

.campaign-planner-day-table col.campaign-planner-day-table__col-list,
.campaign-planner-day-table col.campaign-planner-day-table__col-template {
  width: 50px;
}

.campaign-planner-day-table col.campaign-planner-day-table__col-actions {
  width: 40px;
}

.campaign-planner-day-table.table.subcompact th,
.campaign-planner-day-table.table.subcompact td {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.campaign-planner-day-table td {
  vertical-align: middle;
  padding: 0;
  border-bottom: 0;
}

.campaign-planner-day-table__time-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left;
  vertical-align: bottom;
}

.campaign-planner-day-table__time-spacer {
  padding: 0 !important;
}

.campaign-planner-day-table__time-line-cell {
  padding: 0 !important;
}

.campaign-planner-day-table__time {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  padding: 0 0 4px 0;
  text-align: left;
}

.campaign-planner-day-table__time-line {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px solid #d9d9d9;
  margin-bottom: 4px;
}

.campaign-planner-day-table__item-cell {
  padding: 0 0 4px 0 !important;
}

.campaign-planner-day-table__item-cell:last-child,
.campaign-planner-day-table__item-row:last-child .campaign-planner-day-table__item-cell {
  padding-bottom: 0 !important;
}

.campaign-planner-day-table__item {
  min-width: 0;
}

.campaign-planner-day-table__item > .d-flex {
  min-width: 0;
}

.campaign-planner-day-table__item .campaign-planner-day-table__col-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-right: 8px;
}

.campaign-planner-day-table__title-line {
  min-width: 0;
}

.campaign-planner-day-table__item .campaign-planner-day-table__col-status {
  flex: 0 0 100px;
  width: 100px;
  max-width: 100px;
  text-align: left;
}

.campaign-planner-day-table__item .campaign-planner-day-table__col-list,
.campaign-planner-day-table__item .campaign-planner-day-table__col-template {
  flex: 0 0 50px;
  width: 50px;
  max-width: 50px;
  text-align: center;
}

.campaign-planner-day-table__item .campaign-planner-day-table__col-actions {
  flex: 0 0 40px;
  width: 40px;
  max-width: 40px;
  text-align: left;
}

.campaign-planner-day-table__col-title {
  min-width: 0;
  overflow: hidden;
  vertical-align: middle !important;
}

.campaign-planner-day-table__title-cell {
  min-width: 0;
}

.campaign-planner-day-table__title-type {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.2;
  padding: 1px 4px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.campaign-planner-day-table__col-status {
  width: 100px;
  max-width: 100px;
  overflow: hidden;
  text-align: left;
  padding: 0 !important;
  vertical-align: middle !important;
}

.campaign-planner-day-table__col-status .badge,
.campaign-planner-day-table__col-status .campaign-planner-day-status {
  margin: 0;
}

.campaign-planner-day-table__col-list,
.campaign-planner-day-table__col-template {
  width: 50px;
  max-width: 50px;
  overflow: hidden;
  text-align: center;
  padding: 0 !important;
  vertical-align: middle !important;
}

.campaign-planner-day-table__col-actions {
  width: 40px;
  max-width: 40px;
  text-align: left;
  padding: 0 !important;
  vertical-align: middle !important;
}

.campaign-planner-day-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.campaign-planner-day-table__title {
  color: #7E6100;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.campaign-planner-campaign-link,
.campaign-planner-campaign-link:hover,
.campaign-planner-campaign-link:focus,
.campaign-planner-campaign-link:active,
.campaign-planner-campaign-link:visited {
  color: #7E6100 !important;
}

.campaign-planner-campaign-link:hover,
.campaign-planner-campaign-link:focus,
.campaign-planner-campaign-link:active {
  text-decoration: underline;
}

.campaign-planner-day-table__title:hover {
  text-decoration: underline;
}

.campaign-planner-day-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
}

.campaign-planner-day-badges .badge {
  font-size: 10px;
  line-height: 1.2;
  padding: 1px 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-planner-day-empty {
  font-size: 12px;
  color: #bbb;
}

.campaign-planner-day-process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
  vertical-align: middle;
}

.campaign-planner-day-process-icon--not-ready {
  color: #c62828;
}

.campaign-planner-day-process-icon--in-progress {
  color: #ef6c00;
}

.campaign-planner-day-process-icon--ready {
  color: #2e7d32;
}

.campaign-planner-day-status {
  font-size: 10px;
  line-height: 1.2;
  padding: 1px 4px;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.campaign-planner-day-action {
  flex-shrink: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  vertical-align: middle;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.campaign-planner-day-action:hover {
  color: #7E6100 !important;
}

.campaign-planner-range-host {
  width: 100%;
}

[data-planner-scope="week"] > .scroll-y.flex-grow-self,
[data-planner-scope="month"] > .scroll-y.flex-grow-self {
  padding-left: calc(1rem - 3px);
  padding-right: calc(1rem - 3px);
}

.campaign-planner-range-day__header {
  cursor: pointer;
  border-color: transparent !important;
  box-sizing: border-box;
  width: 100%;
}

.campaign-planner-today-badge,
#plannerTodayBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  cursor: default;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  margin-left: 4px;
  margin-right: 0;
  padding: 0 8px;
  min-height: var(--control-height-small, 32px);
  border-radius: calc(var(--control-height-small, 32px) / 2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.campaign-planner-range-day__header.campaign-planner-range-day--selected,
.campaign-planner-range-day__header.bd-accent {
  border-color: var(--accent-color) !important;
}

.campaign-planner-range-day__label {
  display: inline-block;
}

.campaign-planner-range-timeline {
  margin: 0;
}

.campaign-planner-range-timeline .data {
  min-width: 0;
}

.campaign-planner-day-link:hover {
  color: #7E6100;
}

.campaign-planner-range-item__title {
  font-weight: 600;
  text-decoration: none;
}

.campaign-planner-range-item__title:hover {
  text-decoration: underline;
}

.campaign-planner-timeline-host {
  width: 100%;
}

.campaign-planner-timeline {
  margin: 0;
}

.campaign-planner-timeline .data {
  min-width: 0;
}

.campaign-planner-item {
  padding: 10px 0 14px;
  border-bottom: 1px solid #efefef;
}

.campaign-planner-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.campaign-planner-item__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
}

.campaign-planner-item__title {
  color: #7E6100;
  font-weight: 600;
  text-decoration: none;
}

.campaign-planner-item__title:hover {
  text-decoration: underline;
}

.campaign-planner-item__edit {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
}

.campaign-planner-item__edit:hover {
  color: #7E6100;
  text-decoration: underline;
}

.campaign-planner-item__badges {
  margin-right: 0;
}

.campaign-planner-badge-col {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 1.25rem;
}

.campaign-planner-badge-col .badge {
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 6px;
}

.campaign-planner-badge-empty {
  font-size: 12px;
  color: #999;
}

.campaign-planner-view-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.campaign-planner-view-badges .badge {
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 6px;
}

.campaign-planner-view-text {
  white-space: pre-wrap;
}

.campaign-planner-view-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.campaign-planner-view-links li + li {
  margin-top: 6px;
}

.campaign-planner-view-links a {
  color: #7E6100;
  text-decoration: none;
}

.campaign-planner-view-links a:hover {
  text-decoration: underline;
}

.campaign-planner-dialog .dialog-content h3 {
  margin-top: 0;
}

.campaign-planner-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.campaign-planner-dialog .dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.campaign-planner-dialog > .dialog-actions {
  flex-shrink: 0;
  margin-top: 0;
  background-color: #fff;
}

.campaign-planner-form-section {
  font-size: 14px;
  font-weight: 600;
  color: #7E6100;
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e8e8e8;
}

.campaign-planner-form-section:first-of-type {
  margin-top: 0.5rem;
}

.campaign-planner-recipients-mode label {
  cursor: pointer;
}

.campaign-planner-links-list:empty {
  display: none;
}

.campaign-planner-link-row .input,
.campaign-planner-link-row .select {
  width: 100%;
}