:root {
  --bg: #161513;
  --surface: #1e1d1a;
  --surface-alt: #25231f;
  --surface-strong: #2f2b24;
  --text: #ece8df;
  --text-muted: #b8b1a4;
  --border: #3a362f;
  --primary: #b0895a;
  --primary-hover: #c39b68;
  --primary-ink: #16120d;
  --danger: #d4847a;
  --warning: #d6b06e;
  --info: #9ea6a8;
  --focus: #d0aa76;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Bahnschrift", "Franklin Gothic Book", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--primary);
}

input,
select,
textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input::placeholder,
textarea::placeholder {
  color: #938b7d;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

textarea {
  resize: vertical;
}

button {
  border: 1px solid transparent;
}

.app-shell {
  display: grid;
  grid-template-columns: 328px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 18px;
  border-right: 1px solid var(--border);
  background: #1a1815;
  overflow: auto;
}

.main-content {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(370px, 400px) minmax(580px, 1fr);
  gap: 16px;
}



.brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  margin-bottom: 14px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  display: block;
  margin-bottom: 0;
  object-fit: contain;
  grid-row: 1;
}

.brand h1 {
  grid-column: 2;
  line-height: 1.05;
}

.brand .subtitle {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

.brand h1,
.panel h2,
.detail-header h2,
.filters h2,
.summary h2,
.detail-card h3 {
  margin: 0;
  font-family: "Bahnschrift", "Franklin Gothic Demi", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand h1 {
  font-size: 20px;
}

.subtitle,
.metric-label,
label span,
dt,
.save-status,
.hotel-meta,
.empty-state p,
.empty-state .detail-region {
  color: var(--text-muted);
}

.detail-region {
  margin: 0 0 4px;
  font-size: 12px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.filters,
.summary,
.list-panel,
.detail-panel {
  padding: 14px;
}

.filters h2,
.summary h2 {
  margin-bottom: 12px;
  font-size: 15px;
}

.filters label,
.block-field {
  display: block;
  margin-bottom: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metric {
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
}

.panel-header,
.detail-header,
.detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.toolbar {
  display: flex;
  gap: 8px;
}

.ghost-button,
.primary-button {
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}

.ghost-button {
  background: var(--surface-strong);
  color: var(--text);
  border-color: var(--border);
}

.ghost-button.active-sort {
  border-color: var(--primary);
  color: #f3debc;
}

.primary-button {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: #9f7747;
}

.primary-button:hover {
  background: var(--primary-hover);
}

.hotel-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  margin-top: 10px;
  padding-right: 2px;
}

.hotel-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  cursor: pointer;
  color: var(--text);
  text-align: left;
}

.hotel-card.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(176, 137, 90, 0.45);
}

.hotel-card h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.hotel-meta,
.hotel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tag,
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
}

.badge.priority-high,
.tag.priority-high {
  background: rgba(212, 132, 122, 0.15);
  color: var(--danger);
}

.badge.priority-medium,
.tag.priority-medium {
  background: rgba(214, 176, 110, 0.16);
  color: var(--warning);
}

.badge.priority-low,
.tag.priority-low {
  background: rgba(158, 166, 168, 0.14);
  color: #bbc2c4;
}

.detail-panel {
  min-height: calc(100vh - 36px);
  overflow: auto;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.detail-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}

.detail-card h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.info-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.info-grid div,
.insight-row {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(236, 232, 223, 0.09);
}

dt {
  font-size: 12px;
  margin-bottom: 2px;
}

dd {
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.block-field textarea {
  margin-top: 6px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 100%;
  text-align: center;
  padding: 30px 10px;
}

.hidden {
  display: none;
}

@media (max-width: 1280px) {
  .app-shell,
  .main-content,
  .detail-grid,
  .form-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .detail-panel {
    min-height: auto;
  }
}

/* force-fixes-v2 */
label span {
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
}

input,
select,
textarea {
  margin-top: 0;
}

.hotel-card {
  display: block;
  width: 100%;
}

.hotel-card.active {
  box-shadow: none;
}

.hotel-card .tag.priority-high {
  border-color: #8a5f36;
  box-shadow: inset 0 0 0 1px rgba(138, 95, 54, 0.35);
}

.summary {
  border: 1px solid var(--border);
  background: var(--surface);
}

textarea#proposalNotes,
textarea#salesNotes {
  background: #1f1c18;
  border-color: #3a362f;
}

.primary-button {
  background: #c6a173;
  border-color: #a27b49;
  color: #17120d;
}

.primary-button:hover {
  background: #d2ae82;
}

.hotel-list,
.sidebar,
.detail-panel,
.custom-select-menu,
textarea {
  scrollbar-color: #3a362f #181614;
}

.hotel-list::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar,
.custom-select-menu::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 10px;
}

.hotel-list::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track,
.custom-select-menu::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  background: #181614;
}

.hotel-list::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb,
.custom-select-menu::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  background: #3a362f;
  border: 2px solid #181614;
}

/* force-fixes-v3 */
select,
select option {
  background: #25231f;
  color: #ece8df;
}

select:hover,
select:focus {
  background: #2b2721;
  border-color: #b0895a;
  color: #f3debc;
}

.ghost-button:hover,
.ghost-button:focus {
  background: #393329;
  border-color: #8a5f36;
  color: #f3debc;
}

input[type="date"] {
  background: #1f1c18 !important;
  color: #ece8df !important;
  border-color: #3a362f !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(9%) saturate(627%) hue-rotate(352deg) brightness(88%) contrast(88%);
}

textarea#proposalNotes,
textarea#salesNotes {
  background: #2b2721 !important;
  color: #f3ede2 !important;
  border-color: #4a4339 !important;
}

/* force-fixes-v4: no orange/blue highlight on selectors */
:root {
  --focus: #4a4339;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 1px solid #4a4339;
  outline-offset: 0;
  box-shadow: none;
}

select,
select:hover,
select:focus,
select:active {
  background: #25231f !important;
  color: #ece8df !important;
  border-color: #3a362f !important;
}

/* neutral custom arrow for browser selects */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, #7e776c 50%),
    linear-gradient(135deg, #7e776c 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select option,
select option:checked,
select option:hover {
  background: #25231f !important;
  color: #ece8df !important;
}

/* force-fixes-v5: HTML selectors + dark scrollbars */
.filters select,
.form-grid select,
#proposalFilter,
#regionFilter,
#starsFilter,
#priorityFilter,
#proposalStatus,
#reminderType {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #25231f !important;
  color: #ece8df !important;
  border: 1px solid #3a362f !important;
  padding-right: 34px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #a79f91 50%),
    linear-gradient(135deg, #a79f91 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

.filters select:hover,
.filters select:focus,
.form-grid select:hover,
.form-grid select:focus,
#proposalFilter:hover,
#regionFilter:hover,
#starsFilter:hover,
#priorityFilter:hover,
#proposalStatus:hover,
#reminderType:hover,
#proposalFilter:focus,
#regionFilter:focus,
#starsFilter:focus,
#priorityFilter:focus,
#proposalStatus:focus,
#reminderType:focus {
  background-color: #25231f !important;
  color: #ece8df !important;
  border-color: #4a4339 !important;
  outline: none !important;
  box-shadow: none !important;
}

.filters select option,
.form-grid select option,
#proposalFilter option,
#regionFilter option,
#starsFilter option,
#priorityFilter option,
#proposalStatus option,
#reminderType option {
  background: #25231f !important;
  color: #ece8df !important;
}

* {
  scrollbar-color: #3a362f #181614;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #181614;
}

*::-webkit-scrollbar-thumb {
  background: #3a362f;
  border: 2px solid #181614;
}

/* force-fixes-v6: subtle lighter hover for dropdowns */
.filters select:hover,
.filters select:focus,
.form-grid select:hover,
.form-grid select:focus,
#proposalFilter:hover,
#regionFilter:hover,
#starsFilter:hover,
#priorityFilter:hover,
#proposalStatus:hover,
#reminderType:hover,
#proposalFilter:focus,
#regionFilter:focus,
#starsFilter:focus,
#priorityFilter:focus,
#proposalStatus:focus,
#reminderType:focus {
  background-color: #302b24 !important;
  border-color: #4f483d !important;
  color: #eee6d8 !important;
}





/* force-fixes-v7: html-only decision maker vertical + compact + notes under it */
body:not(.hta) .decision-maker-card,
body:not(.hta) .notes-card {
  grid-column: 2;
}

body:not(.hta) .decision-maker-card {
  padding: 8px 10px;
}

body:not(.hta) .decision-maker-card .form-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

body:not(.hta) .decision-maker-card .form-grid label {
  margin-bottom: 0;
}

body:not(.hta) .decision-maker-card input {
  padding: 7px 10px;
}

body:not(.hta) .notes-card textarea {
  min-height: 88px;
}

/* force-fixes-v8: html-only explicit card geometry + save spacing */
body:not(.hta) .detail-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-auto-rows: min-content;
  gap: 10px;
}

body:not(.hta) .info-card {
  grid-column: 1;
  grid-row: 1 / span 2;
}

body:not(.hta) .decision-maker-card {
  grid-column: 2;
  grid-row: 1;
}

body:not(.hta) .notes-card {
  grid-column: 2;
  grid-row: 2;
}

body:not(.hta) .sales-activity-card {
  grid-column: 1;
  grid-row: 3;
}

body:not(.hta) .proposal-card {
  grid-column: 2;
  grid-row: 3;
}

body:not(.hta) .detail-actions {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #3a362f;
}

body:not(.hta) .detail-actions .primary-button {
  order: 1;
}

body:not(.hta) .detail-actions .save-status {
  order: 2;
}

/* force-fixes-v9: dark manual date fields (no native white picker) */
body:not(.hta) .date-field {
  background: #1f1c18 !important;
  color: #ece8df !important;
  border: 1px solid #3a362f !important;
}

body:not(.hta) .date-field::placeholder {
  color: #9a9183 !important;
}

body:not(.hta) .date-field:hover,
body:not(.hta) .date-field:focus {
  background: #2b2721 !important;
  border-color: #4f483d !important;
  color: #eee6d8 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* force-fixes-v10: html-only rebalance columns (1+2 wider, 3 narrower) */
body:not(.hta) .app-shell {
  grid-template-columns: 388px 1fr;
}

body:not(.hta) .main-content {
  grid-template-columns: minmax(440px, 470px) minmax(500px, 1fr);
}

/* force-fixes-v11: dark calendar popover */
body:not(.hta) .date-popover {
  position: absolute;
  z-index: 9999;
  width: 252px;
  padding: 10px;
  border: 1px solid #3a362f;
  border-radius: 10px;
  background: #1f1c18;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

body:not(.hta) .date-popover.hidden {
  display: none;
}

body:not(.hta) .date-popover-header {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

body:not(.hta) .date-popover-header strong {
  text-align: center;
  font-size: 13px;
  color: #ece8df;
}

body:not(.hta) .date-popover .date-nav {
  width: 28px;
  height: 28px;
  border: 1px solid #3a362f;
  border-radius: 6px;
  background: #2a2620;
  color: #d6cfbf;
  cursor: pointer;
}

body:not(.hta) .date-popover .date-nav:hover {
  background: #332e26;
}

body:not(.hta) .date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

body:not(.hta) .date-weekdays span {
  text-align: center;
  font-size: 11px;
  color: #9f9688;
}

body:not(.hta) .date-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

body:not(.hta) .date-day {
  height: 28px;
  border: 1px solid #3a362f;
  border-radius: 6px;
  background: #25221d;
  color: #ece8df;
  font-size: 12px;
  cursor: pointer;
}

body:not(.hta) .date-day.blank {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

body:not(.hta) .date-day:hover {
  background: #312c24;
}

body:not(.hta) .date-day.selected {
  border-color: #4f483d;
  background: #3a342b;
  color: #f2ece1;
}

body:not(.hta) .date-popover-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

body:not(.hta) .date-popover-actions .ghost-button {
  flex: 1;
  padding: 6px 8px;
}

/* force-fixes-v12: html-only +1cm on bar 1 and bar 2 */
body:not(.hta) .app-shell {
  grid-template-columns: 426px 1fr;
}

body:not(.hta) .main-content {
  grid-template-columns: minmax(478px, 510px) minmax(420px, 1fr);
}

/* force-fixes-v13: html-only +1cm extra on bar 1 and bar 2 */
body:not(.hta) .app-shell {
  grid-template-columns: 464px 1fr;
}

body:not(.hta) .main-content {
  grid-template-columns: minmax(516px, 548px) minmax(360px, 1fr);
}

/* force-fixes-v14: datepicker launcher + stable anchor */
body:not(.hta) .date-picker-anchor {
  position: relative;
}

body:not(.hta) .date-picker-anchor .date-field {
  padding-right: 42px !important;
}

body:not(.hta) .date-picker-anchor .date-launch {
  position: absolute;
  right: 8px;
  top: 29px;
  width: 26px;
  height: 26px;
  border: 1px solid #3a362f;
  border-radius: 6px;
  background: #2b2721;
  color: #cfc6b6;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  padding: 0;
}

body:not(.hta) .date-picker-anchor .date-launch:hover {
  background: #363027;
}

/* force-fixes-v15: centered dark datepicker (always visible when opened) */
body:not(.hta) .date-popover {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483000 !important;
  width: 280px !important;
}

/* force-fixes-v16: save confirmation message */
body:not(.hta) .detail-actions {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #3a362f;
}

body:not(.hta) .save-status {
  font-size: 12px;
  color: #b8b1a4;
  min-height: 18px;
  margin: 0;
  opacity: 0;
  transition: opacity 140ms ease;
  white-space: nowrap;
}

body:not(.hta) .save-status.success {
  color: #7fcf9f;
  font-weight: 600;
  opacity: 1;
}

/* force-fixes-v17: proposal spacing + notes emphasis */
body:not(.hta) .proposal-card .block-field {
  margin-top: 12px;
}

body:not(.hta) .notes-card h3 {
  font-size: 16px;
  color: #d79a56;
  font-weight: 700;
}

body:not(.hta) .notes-card textarea {
  background: #2f281f;
  border: 1px solid #6f4f2c;
  color: #f2e7d8;
}

body:not(.hta) .notes-card textarea:focus {
  background: #352c22;
  border-color: #8a6133;
}



/* force-fixes-v18: place save message right next to button (left side) */
body:not(.hta) .detail-actions .save-status {
  order: 2;
}

body:not(.hta) .detail-actions .primary-button {
  order: 1;
}




/* force-fixes-v19: add spacing between Hotel Search and Overview */
body:not(.hta) .summary {
  margin-top: 16px !important;
}


/* force-fixes-v20: native date picker always available + dark scheme */
body:not(.hta) input[type="date"] {
  background: #1f1c18 !important;
  color: #ece8df !important;
  border: 1px solid #3a362f !important;
  color-scheme: dark;
}

body:not(.hta) input[type="date"]:hover,
body:not(.hta) input[type="date"]:focus {
  background: #2b2721 !important;
  border-color: #4f483d !important;
  outline: none !important;
  box-shadow: none !important;
}

/* force-fixes-v21: brighter Smart Hotels title */
body:not(.hta) .brand h1 {
  color: #f0c96b;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* force-fixes-v22: save controls in detail header */
body:not(.hta) .header-save {
  display: flex;
  align-items: center;
  gap: 10px;
}

body:not(.hta) .header-save .save-status {
  margin: 0;
  min-width: 56px;
  text-align: right;
}

/* force-fixes-v23: more vertical space under sort toolbar */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 18px !important;
}

/* force-fixes-v24: save status blue + lower save controls */
body:not(.hta) .save-status.success {
  color: #6ea8ff !important;
}

body:not(.hta) .header-save {
  margin-top: 10px;
  align-self: flex-start;
}

/* force-fixes-v25: move save controls lower in header */
body:not(.hta) .header-save {
  align-self: flex-end !important;
  margin-top: 0 !important;
  position: relative;
  top: 12px;
}

/* force-fixes-v26: lower save controls with breathing space */
body:not(.hta) .detail-header {
  padding-bottom: 10px !important;
}

body:not(.hta) .header-save {
  position: relative;
  top: 8px !important;
  margin-bottom: 6px !important;
}

/* force-fixes-v27: ~1cm extra space under sort toolbar in hotel list */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 38px !important;
}

/* force-fixes-v28: alignment and breathing based on visual guide */
body:not(.hta) .sidebar,
body:not(.hta) .main-content {
  padding-top: 22px;
  padding-bottom: 22px;
}

body:not(.hta) .brand {
  margin-top: 6px;
  margin-bottom: 20px;
}

body:not(.hta) .filters {
  margin-bottom: 22px;
}

body:not(.hta) .summary {
  margin-top: 0 !important;
}

body:not(.hta) .panel {
  border-radius: 9px;
}

/* force-fixes-v29: unify orange section labels + lower Hotels title */
body:not(.hta) .filters h2,
body:not(.hta) .summary h2,
body:not(.hta) .list-panel .panel-header h2,
body:not(.hta) .detail-card h3 {
  color: #d79a56 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* only Hotels title in hotel list panel: move it lower */
body:not(.hta) .list-panel .panel-header > div h2 {
  margin-top: 24px !important;
}




/* force-fixes-v30: traffic-light borders for proposal status */
body:not(.hta) .hotel-card.status-accepted {
  border-color: #5fbf86 !important;
}

body:not(.hta) .hotel-card.status-rejected {
  border-color: #c86b6b !important;
}

body:not(.hta) .hotel-card.status-pending {
  border-color: #d1a74d !important;
}

body:not(.hta) .hotel-card.status-accepted.active {
  border-color: #5fbf86 !important;
  box-shadow: 0 0 0 2px rgba(95, 191, 134, 0.22) !important;
}

body:not(.hta) .hotel-card.status-rejected.active {
  border-color: #c86b6b !important;
  box-shadow: 0 0 0 2px rgba(200, 107, 107, 0.22) !important;
}

body:not(.hta) .hotel-card.status-pending.active {
  border-color: #d1a74d !important;
  box-shadow: 0 0 0 2px rgba(209, 167, 77, 0.22) !important;
}

/* force-fixes-v31: client status (blue border) */
body:not(.hta) .hotel-card.status-client {
  border-color: #5f8dff !important;
}

body:not(.hta) .hotel-card.status-client.active {
  border-color: #5f8dff !important;
  box-shadow: 0 0 0 2px rgba(95, 141, 255, 0.22) !important;
}

/* force-fixes-v32: quick status filter in toolbar */
body:not(.hta) .toolbar {
  align-items: center;
}

body:not(.hta) .toolbar-status {
  color: #d79a56;
  font-size: 13px;
  font-weight: 600;
  margin-left: 6px;
}

body:not(.hta) .toolbar-select {
  min-width: 122px;
  height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #3a362f;
  border-radius: 8px;
  background: #2b2721;
  color: #ece8df;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #a89f91 50%), linear-gradient(135deg, #a89f91 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

body:not(.hta) .toolbar-select:hover,
body:not(.hta) .toolbar-select:focus {
  background-color: #332d24;
  border-color: #504838;
  outline: none;
  box-shadow: none;
}

body:not(.hta) .toolbar-select option {
  background: #241f19;
  color: #ece8df;
}

/* force-fixes-v33: clickable phone for direct call */
body:not(.hta) .phone-link {
  color: #f0c96b;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

body:not(.hta) .phone-link:hover {
  color: #ffd98a;
}

/* force-fixes-v34: unified toolbar frame with asymmetric controls */
body:not(.hta) .list-panel .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #3a362f;
  border-radius: 10px;
  background: #24201b;
}

body:not(.hta) .list-panel .toolbar .ghost-button {
  height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a362f;
  background: #2b2721;
}

body:not(.hta) #sortPriority {
  min-width: 98px;
}

body:not(.hta) #sortRooms {
  min-width: 134px;
}

body:not(.hta) .status-segment {
  min-width: 172px;
  height: 38px;
  border: 1px solid #3a362f;
  border-radius: 8px;
  background: #2b2721;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

body:not(.hta) .status-segment .toolbar-status {
  margin: 0;
  font-size: 13px;
  color: #d79a56;
  font-weight: 600;
  line-height: 1;
}

body:not(.hta) .status-segment .toolbar-select {
  margin: 0;
  height: 28px;
  min-width: 78px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #ece8df;
  padding: 0 18px 0 4px;
  line-height: 28px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #a89f91 50%), linear-gradient(135deg, #a89f91 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 7px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

body:not(.hta) .status-segment .toolbar-select:hover,
body:not(.hta) .status-segment .toolbar-select:focus {
  background-color: #332d24;
  outline: none;
  box-shadow: none;
}

/* force-fixes-v35: toolbar cleanup + sort-by layout */
body:not(.hta) .list-panel .panel-header > div h2 {
  margin-top: 10px !important;
}

body:not(.hta) .list-panel .toolbar {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 8px;
}

body:not(.hta) .sort-by-label {
  color: #d79a56;
  font-size: 14px;
  font-weight: 700;
  line-height: 38px;
  margin-right: 2px;
}

body:not(.hta) #sortPriority {
  min-width: 88px !important;
}

body:not(.hta) #sortRooms {
  min-width: 108px !important;
}

body:not(.hta) .status-segment {
  min-width: 124px !important;
  padding: 0 8px !important;
  gap: 6px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 46px !important;
  width: 52px !important;
  padding: 0 14px 0 4px !important;
}

/* force-fixes-v36: hotels/header alignment + wider status all */
body:not(.hta) .list-panel .panel-header {
  align-items: flex-start;
}

body:not(.hta) .list-panel .panel-header > div h2 {
  margin-top: 2px !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 14px;
}

body:not(.hta) .status-segment {
  min-width: 146px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 66px !important;
  width: 72px !important;
}

/* force-fixes-v37: compact status box + wider dropdown list feel + no blue highlight */
body:not(.hta) #sortPriority {
  min-width: 86px !important;
}

body:not(.hta) #sortRooms {
  min-width: 104px !important;
}

body:not(.hta) .status-segment {
  min-width: 132px !important;
  padding: 0 6px !important;
  gap: 4px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 74px !important;
  width: 80px !important;
  padding: 0 16px 0 6px !important;
}

body:not(.hta) #statusQuickFilter option {
  background: #241f19 !important;
  color: #ece8df !important;
  padding: 6px 12px !important;
}

body:not(.hta) #statusQuickFilter option:checked,
body:not(.hta) #statusQuickFilter option:hover,
body:not(.hta) #statusQuickFilter option:focus {
  background: #3a3125 !important;
  color: #f0c96b !important;
}

/* force-fixes-v38: sort row position + compact All + neutral dropdown hover */
body:not(.hta) .list-panel .toolbar {
  margin-top: 38px !important;
  margin-left: 0;
}

body:not(.hta) #sortPriority {
  min-width: 84px !important;
}

body:not(.hta) #sortRooms {
  min-width: 102px !important;
}

body:not(.hta) .status-segment {
  min-width: 116px !important;
  padding: 0 6px !important;
  gap: 4px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 36px !important;
  width: 40px !important;
  padding: 0 12px 0 2px !important;
  color: #ece8df !important;
}

body:not(.hta) #statusQuickFilter option {
  background: #221d18 !important;
  color: #ece8df !important;
}

body:not(.hta) #statusQuickFilter option:checked,
body:not(.hta) #statusQuickFilter option:hover,
body:not(.hta) #statusQuickFilter option:focus {
  background: #342d24 !important;
  color: #ece8df !important;
}

/* force-fixes-v39: wider status dropdown menu/readability */
body:not(.hta) .status-segment {
  min-width: 144px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 92px !important;
  width: 92px !important;
  padding: 0 16px 0 6px !important;
}

/* force-fixes-v40: asymmetric trio with reduced status/all width */
body:not(.hta) #sortPriority {
  min-width: 88px !important;
}

body:not(.hta) #sortRooms {
  min-width: 112px !important;
}

body:not(.hta) .status-segment {
  min-width: 104px !important;
  padding: 0 5px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 56px !important;
  width: 56px !important;
  padding: 0 12px 0 4px !important;
}

/* force-fixes-v41: sidebar quick views + favorite toggle */
body:not(.hta) .summary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

body:not(.hta) .quick-filter-button {
  height: 34px;
  border: 1px solid #3a362f;
  border-radius: 8px;
  background: #2b2721;
  color: #ece8df;
  font-weight: 600;
  cursor: pointer;
}

body:not(.hta) .quick-filter-button:hover {
  background: #332d24;
}

body:not(.hta) .quick-filter-button.active {
  border-color: #b0895a;
  color: #f0c96b;
  background: #31281f;
}

body:not(.hta) .detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body:not(.hta) .favorite-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid #3a362f;
  border-radius: 6px;
  background: #2b2721;
  color: #b8b1a4;
  line-height: 1;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

body:not(.hta) .favorite-toggle:hover {
  background: #332d24;
  color: #e4d3b4;
}

body:not(.hta) .favorite-toggle.active {
  border-color: #b0895a;
  color: #f0c96b;
  background: #31281f;
}

/* force-fixes-v42: favorite star visible on hotel cards */
body:not(.hta) .hotel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body:not(.hta) .card-favorite {
  color: #8d877c;
  font-size: 14px;
  line-height: 1;
}

body:not(.hta) .card-favorite.active {
  color: #f0c96b;
}

/* force-fixes-v43: client desk panel layout */
body:not(.hta) .client-hub {
  margin-top: 10px;
}

body:not(.hta) .client-hub h2 {
  margin-bottom: 0;
}

body:not(.hta) .client-hub .summary-actions {
  margin-top: 0;
}

body:not(.hta) .client-hub-proposal {
  display: block;
  margin-top: 10px;
}

body:not(.hta) .client-hub-proposal span {
  display: block;
  margin-bottom: 2px;
}

/* force-fixes-v44: client desk visual parity with overview */
body:not(.hta) .client-hub {
  border-color: #3a362f;
  background: #1f1c18;
}

body:not(.hta) .client-hub h2 {
  color: #d79a56;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

body:not(.hta) .client-hub .summary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

body:not(.hta) .client-hub .quick-filter-button {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid #3a362f;
  border-radius: 8px;
  background: #26221c;
  color: #ece8df;
  font-weight: 700;
  padding: 0 10px;
}

body:not(.hta) .client-hub .quick-filter-button:hover {
  background: #312b23;
}

body:not(.hta) .client-hub .quick-filter-button.active {
  border-color: #b0895a;
  color: #f0c96b;
  background: #31281f;
}

body:not(.hta) .client-hub-proposal {
  margin-top: 10px;
}

body:not(.hta) .client-hub-proposal span {
  color: #d79a56;
  font-weight: 700;
  margin-bottom: 4px;
}

body:not(.hta) .client-hub-proposal select {
  height: 38px;
  border: 1px solid #3a362f;
  border-radius: 8px;
  background: #26221c;
  color: #ece8df;
}

/* force-fixes-v45: strict symmetry between overview and client desk */
body:not(.hta) .sidebar .summary,
body:not(.hta) .sidebar .client-hub {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 14px !important;
  box-sizing: border-box;
}

body:not(.hta) .sidebar .client-hub {
  margin-top: 12px !important;
}

body:not(.hta) .sidebar .summary h2,
body:not(.hta) .sidebar .client-hub h2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:not(.hta) .sidebar .client-hub .summary-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

body:not(.hta) .sidebar .client-hub .quick-filter-button {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

body:not(.hta) .sidebar .client-hub-proposal {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

body:not(.hta) .sidebar .client-hub-proposal select {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* force-fixes-v46: bottom spacing under proposal box in client desk */
body:not(.hta) .sidebar .client-hub {
  padding-bottom: 16px !important;
}

body:not(.hta) .sidebar .client-hub-proposal {
  margin-bottom: 2px !important;
}

/* force-fixes-v47: top breathing room in client desk */
body:not(.hta) .sidebar .client-hub {
  padding-top: 18px !important;
}

body:not(.hta) .sidebar .client-hub h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* force-fixes-v48: lower brand block in sidebar */
body:not(.hta) .sidebar .brand {
  margin-top: 10px !important;
  margin-bottom: 18px !important;
}

body:not(.hta) .sidebar .brand h1 {
  margin-top: 4px !important;
}

body:not(.hta) .sidebar .brand .subtitle {
  margin-top: 8px !important;
}

/* force-fixes-v49: clickable + larger favorite star on list cards */
body:not(.hta) .card-favorite {
  font-size: 17px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

body:not(.hta) .card-favorite:hover {
  background: #332d24;
}

/* force-fixes-v50: favorite star hover micro-interaction */
body:not(.hta) .card-favorite {
  transition: color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

body:not(.hta) .card-favorite:hover {
  color: #f0c96b;
  transform: translateY(-1px);
}

/* force-fixes-v51: smaller overview labels, keep numbers unchanged */
body:not(.hta) .summary .metric-label {
  font-size: 11px !important;
  line-height: 1.2;
}

/* force-fixes-v53: next action input matches proposal notes background */
body:not(.hta) #nextAction {
  background: #2b2721 !important;
  color: #f3ede2 !important;
  border-color: #4a4339 !important;
}

body:not(.hta) #nextAction:focus,
body:not(.hta) #nextAction:hover {
  background: #2b2721 !important;
  color: #f3ede2 !important;
  border-color: #4a4339 !important;
}

/* force-fixes-v54: proposal status label spacing + white color in client desk */
body:not(.hta) .sidebar .client-hub-proposal span {
  color: #ece8df !important;
  margin-bottom: 8px !important;
}

/* force-fixes-v55: tighter and consistent sidebar spacing between Hotel Search, Overview, and Client Desk */
body:not(.hta) .sidebar .filters + .summary {
  margin-top: 4px !important;
}

body:not(.hta) .sidebar .summary + .client-hub {
  margin-top: 10px !important;
}

/* force-fixes-v56: move Sort by block slightly lower (HTML only) */
body:not(.hta) .list-panel .toolbar {
  margin-top: 38px !important;
  transform: translateY(12px) !important;
}




/* force-fixes-v57: unify sidebar/list section title sizes (Hotels = Hotel Search = Overview) */
body:not(.hta) .filters h2,
body:not(.hta) .summary h2,
body:not(.hta) .client-hub h2,
body:not(.hta) .list-panel .panel-header > div h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* force-fixes-v58: symmetric 1cm spacing between Hotel Search, Overview, and Client Desk (HTML only) */
body:not(.hta) .sidebar .filters + .summary,
body:not(.hta) .sidebar .summary + .client-hub {
  margin-top: 38px !important;
}

/* force-fixes-v59: half spacing between Hotel Search, Overview, and Client Desk */
body:not(.hta) .sidebar .filters + .summary,
body:not(.hta) .sidebar .summary + .client-hub {
  margin-top: 19px !important;
}

/* force-fixes-v60: reduce left sidebar width by ~1cm to free space for right area */
body:not(.hta) .app-shell {
  grid-template-columns: 290px 1fr !important;
}

/* force-fixes-v61: softer left sidebar reduction */
body:not(.hta) .app-shell {
  grid-template-columns: 310px 1fr !important;
}

/* force-fixes-v62: bar 1 and bar 2 near-equal width while preserving bar 3 space */
body:not(.hta) .app-shell {
  grid-template-columns: 340px 1fr !important;
}

body:not(.hta) .main-content {
  grid-template-columns: minmax(335px, 355px) minmax(580px, 1fr) !important;
}

/* force-fixes-v63: narrow only Hotel Information and Sales Activity, keep right column cards unchanged */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 14px) !important;
  justify-self: start;
}

/* force-fixes-v64: rebalance columns + fix floating Sort by (HTML only) */
body:not(.hta) .app-shell {
  grid-template-columns: 352px 1fr !important;
}

body:not(.hta) .main-content {
  grid-template-columns: minmax(350px, 370px) minmax(520px, 1fr) !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 16px !important;
  transform: none !important;
}

body:not(.hta) .sort-by-label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* keep right column cards as-is; only left detail cards slightly narrower */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 20px) !important;
  justify-self: start;
}

/* force-fixes-v65: anchor Sort by row lower and stable (HTML only) */
body:not(.hta) .list-panel .panel-header {
  align-items: flex-start !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 28px !important;
  transform: none !important;
  align-self: flex-start !important;
}

body:not(.hta) .sort-by-label {
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* force-fixes-v66: tighten detail column gap + stabilize Sort by row position (HTML only) */
body:not(.hta) .detail-grid {
  gap: 6px !important;
}

body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 8px) !important;
  justify-self: start;
}

body:not(.hta) .list-panel .panel-header {
  align-items: flex-start !important;
  margin-bottom: 8px !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 18px !important;
  margin-bottom: 2px !important;
  transform: none !important;
  align-self: flex-start !important;
}

body:not(.hta) .sort-by-label {
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 8px !important;
}

/* force-fixes-v67: move Hotel Information + Sales Activity to the right (HTML only) */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 8px) !important;
  justify-self: end !important;
  margin-left: auto !important;
}

/* force-fixes-v68: center Sort by row + give bar 2 more width, trim bar 3 slightly (HTML only) */
body:not(.hta) .main-content {
  grid-template-columns: minmax(390px, 420px) minmax(500px, 1fr) !important;
}

body:not(.hta) .list-panel .toolbar {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  transform: none !important;
  flex-wrap: nowrap !important;
}

body:not(.hta) .status-segment {
  min-width: 142px !important;
  padding: 0 8px !important;
}

body:not(.hta) .status-segment .toolbar-status {
  min-width: 44px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 80px !important;
  width: 84px !important;
}

/* nudge left-column detail cards to the right with tighter left slack */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 4px) !important;
  justify-self: end !important;
  margin-left: auto !important;
}

/* force-fixes-v69: align header row and push first hotel card lower for clear Sort by space */
body:not(.hta) .list-panel .panel-header {
  align-items: flex-start !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 18px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 16px !important;
}

/* force-fixes-v70: place Sort by inside boxed row + lower key panels to red-line alignment (HTML only) */
body:not(.hta) .sidebar .filters {
  margin-top: 10px !important;
}

body:not(.hta) .list-panel .panel-header {
  display: block !important;
  margin-bottom: 8px !important;
}

body:not(.hta) .list-panel .panel-header > div h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

body:not(.hta) .list-panel .toolbar {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid #3a362f !important;
  border-radius: 8px !important;
  background: #211f1b !important;
  transform: none !important;
  overflow: visible !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 10px !important;
}

body:not(.hta) .status-segment {
  min-width: 146px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 84px !important;
  width: 88px !important;
}

body:not(.hta) .detail-grid {
  margin-top: 14px !important;
}

/* force-fixes-v71: fix Status placement and increase gap before hotel cards (HTML only) */
body:not(.hta) .list-panel .panel-header {
  overflow: hidden !important;
}

body:not(.hta) .list-panel .toolbar {
  max-width: calc(100% - 6px) !important;
  margin-right: 6px !important;
  justify-content: flex-start !important;
  padding-right: 10px !important;
}

body:not(.hta) .status-segment {
  min-width: 128px !important;
  max-width: 128px !important;
  padding: 0 6px !important;
  gap: 4px !important;
}

body:not(.hta) .status-segment .toolbar-status {
  min-width: 38px !important;
  font-size: 13px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 66px !important;
  width: 66px !important;
  padding: 0 12px 0 4px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 18px !important;
}

/* force-fixes-v72: remove box around Sort by row (HTML only) */
body:not(.hta) .list-panel .toolbar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* force-fixes-v73: make Status + All segment half-width and keep it inside bounds (HTML only) */
body:not(.hta) .status-segment {
  min-width: 96px !important;
  max-width: 96px !important;
  padding: 0 4px !important;
  gap: 3px !important;
}

body:not(.hta) .status-segment .toolbar-status {
  min-width: 30px !important;
  font-size: 12px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 52px !important;
  width: 52px !important;
  padding: 0 10px 0 3px !important;
}

/* force-fixes-v74: panel-3 internal breathing + lower info start + align Sort by lower (HTML only) */
/* keep bar 3 position; only tune inner layout */
body:not(.hta) .detail-grid {
  gap: 12px !important;
  margin-top: 38px !important;
}

body:not(.hta) .detail-card {
  padding: 10px !important;
}

body:not(.hta) .detail-card .form-grid {
  gap: 12px !important;
}

/* keep right-column cards unchanged in width, only make left pair slightly narrower */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 12px) !important;
  justify-self: end !important;
  margin-left: auto !important;
}

/* move Sort by row down to match the new lowered content rhythm */
body:not(.hta) .list-panel .toolbar {
  margin-top: 24px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 20px !important;
}

/* force-fixes-v75: balance panel-3 left/right inner spacing + lower top hotel title block (HTML only) */
body:not(.hta) .detail-panel {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* make left-column cards keep symmetric side breathing instead of hugging right edge */
body:not(.hta) .info-card,
body:not(.hta) .sales-activity-card {
  width: calc(100% - 10px) !important;
  justify-self: center !important;
  margin-left: 0 !important;
}

/* move campaign/name block down from top border */
body:not(.hta) .detail-header {
  margin-top: 8px !important;
}

body:not(.hta) .detail-header .detail-region {
  margin-top: 4px !important;
}

body:not(.hta) .detail-header h2,
body:not(.hta) #detailName {
  margin-top: 3px !important;
}

/* force-fixes-v76: raise panel-3 card grid closer to Save Now (HTML only) */
body:not(.hta) .detail-grid {
  margin-top: 20px !important;
}

/* force-fixes-v77: raise panel-3 card grid even closer to Save Now */
body:not(.hta) .detail-grid {
  margin-top: 10px !important;
}

/* force-fixes-v78: lower panel-2 hotel cards start to align with Hotel Information */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 34px !important;
}

/* force-fixes-v79: lower panel-2 cards further to align with Hotel Information top margin */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 46px !important;
}

/* force-fixes-v80: lower Sort by row closer to hotel cards start */
body:not(.hta) .list-panel .toolbar {
  margin-top: 36px !important;
}

/* force-fixes-v81: lower Sort by ~1cm more and restore hotel-list start alignment */
body:not(.hta) .list-panel .toolbar {
  margin-top: 74px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 34px !important;
}

/* force-fixes-v82: symmetry calibration from visual reference */
/* panel 2: clean header rhythm */
body:not(.hta) .list-panel .panel-header {
  display: block !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}

body:not(.hta) .list-panel .panel-header > div h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Sort by row positioned inside header zone, no overlap */
body:not(.hta) .list-panel .toolbar {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: calc(100% - 6px) !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body:not(.hta) .status-segment {
  min-width: 104px !important;
  max-width: 104px !important;
  padding: 0 4px !important;
  gap: 3px !important;
}

body:not(.hta) .status-segment .toolbar-status {
  min-width: 34px !important;
  font-size: 12px !important;
}

body:not(.hta) .status-segment .toolbar-select {
  min-width: 56px !important;
  width: 56px !important;
  padding: 0 10px 0 3px !important;
}

/* panel 2 cards start line */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 14px !important;
}

/* panel 3: top block aligned and not glued to border */
body:not(.hta) .detail-panel {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body:not(.hta) .detail-header {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
}

body:not(.hta) .detail-header .detail-region {
  margin-top: 2px !important;
}

body:not(.hta) #detailName {
  margin-top: 2px !important;
}

/* align start of info cards with panel 2 card start */
body:not(.hta) .detail-grid {
  margin-top: 14px !important;
  gap: 12px !important;
}

/* force-fixes-v83: lower panel-2 header controls and card-start after v82 overshoot */
body:not(.hta) .list-panel .panel-header > div h2 {
  margin-bottom: 12px !important;
}

body:not(.hta) .list-panel .toolbar {
  margin-top: 24px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 26px !important;
}

/* force-fixes-v84: panel-2 lower by ~0.5cm (Sort by + hotel cards list) */
body:not(.hta) .list-panel .toolbar {
  margin-top: 43px !important;
}

body:not(.hta) .list-panel .hotel-list {
  margin-top: 45px !important;
}

/* force-fixes-v85: raise panel-2 hotel list start to match target red line */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 14px !important;
}

/* force-fixes-v86: lower panel-2 hotel list by ~1mm */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 18px !important;
}

/* force-fixes-v87: lower panel-2 hotel list by another ~1mm */
body:not(.hta) .list-panel .hotel-list {
  margin-top: 22px !important;
}


/* force-fixes-v88: lock detail header layout for long hotel names */
.detail-header > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-header .header-save {
  flex: 0 0 auto;
  margin-left: 12px;
}

.detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.detail-title-row #detailName,
#detailName {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.detail-title-row .favorite-toggle {
  flex: 0 0 auto;
}

body:not(.hta) .detail-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

body:not(.hta) .detail-header > :first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body:not(.hta) .detail-header .header-save {
  flex: 0 0 auto !important;
  margin-left: 12px !important;
  top: 0 !important;
  position: static !important;
  align-self: flex-start !important;
}

body:not(.hta) .detail-title-row,
body:not(.hta) #detailName {
  min-width: 0 !important;
}

body:not(.hta) #detailName {
  overflow-wrap: anywhere !important;
}

.app-footer {
  text-align: center;
  padding: 10px 14px 18px;
  color: #8c7b68;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.app-footer p {
  margin: 2px 0;
}





/* Footer visual polish */
.app-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 14px 14px 18px;
  border-top: 1px solid rgba(224, 176, 120, 0.16);
  background: #13100d;
  color: #b89a76;
  font-size: 12px;
  letter-spacing: 0.15px;
}

.app-footer p {
  margin: 0;
  line-height: 1.4;
}


.footer-link,
.footer-link:link,
.footer-link:visited {
  color: #b89a76;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,154,118,0.35);
}

.footer-link:hover {
  color: #d0a15f;
  border-bottom-color: rgba(208,161,95,0.55);
}