/* Changed: Raise CDK overlay above sidebar (z-index: 1030) so dialogs are not covered by the nav */
.cdk-overlay-container {
  z-index: 1050 !important;
}

/* Tiny icons for chip remove buttons */
.mat-mdc-chip .mat-icon,
.mat-mdc-chip-remove .mat-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* Exception: spa-groups chips should have larger icons */
spa-groups .mat-mdc-chip .mat-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding-top: 3px !important;
  margin-right: 6px !important;
}

spa-groups .mat-mdc-chip .chip-additional-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Tiny icons in option components - removed padding and reduced button size */
.tin-row .mat-mdc-icon-button,
.tin-row .mat-icon-button {
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 14px !important;
}

.tin-row .mat-mdc-icon-button .mat-icon,
.tin-row .mat-icon-button .mat-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* Centralized suffix-icons styling for consistency across all components */
.suffix-icons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.suffix-icons button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

:hover .suffix-icons button {
  opacity: 1;
}

/* Override tin-row styles when inside suffix-icons to maintain consistency */
.tin-row .suffix-icons .mat-mdc-icon-button,
.tin-row .suffix-icons .mat-icon-button,
.suffix-icons .mat-mdc-icon-button,
.suffix-icons .mat-icon-button {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  line-height: 20px !important;
  margin: 0 !important;
  display: inline-flex !important; /* Changed: Center icon within button */
  align-items: center !important; /* Changed: Vertical centering */
  justify-content: center !important; /* Changed: Horizontal centering */
  overflow: hidden !important; /* Changed: Clip oversized touch target to button bounds */
}

/* Changed: Constrain touch target to match button size so clicks align with visible icon */
.suffix-icons .mat-mdc-button-touch-target {
  width: 100% !important;
  height: 100% !important;
}

.tin-row .suffix-icons .mat-mdc-icon-button .mat-icon,
.tin-row .suffix-icons .mat-icon-button .mat-icon,
.suffix-icons .mat-mdc-icon-button .mat-icon,
.suffix-icons .mat-icon-button .mat-icon,
.suffix-icons > .mat-icon, /* Changed: Size standalone icons in suffix (e.g. bitwise selected icons) */
.tinyIcon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
}

/* Tiny datepicker calendar icon */
.mat-datepicker-toggle {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0 !important;
}

.mat-datepicker-toggle button,
.mat-mdc-icon-button.mat-datepicker-toggle-default-icon {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mat-datepicker-toggle .mat-icon,
.mat-datepicker-toggle-default-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
}

/* Set datepicker calendar popup background to white */
.mat-datepicker-content,
.mat-datepicker-content-container {
  background-color: white !important;
}

/* Keep filter refresh icon at normal size - exclude from tiny icon styling */
.filter-container .mat-icon-button,
.filter-container .mat-mdc-icon-button {
  width: 40px !important;
  height: 40px !important;
  padding: 8px !important;
}

.filter-container .mat-icon-button .mat-icon,
.filter-container .mat-mdc-icon-button .mat-icon,
.refreshIcon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
}

/* Exception: Keep clear icon in filter suffix tiny */
.filter-container .suffix-icons .mat-icon-button,
.filter-container .suffix-icons .mat-mdc-icon-button {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
}

.filter-container .suffix-icons .mat-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* Keep search button at normal size - same styling as filter refresh button */
.tin-between .tin-end .mat-icon-button,
.tin-between .tin-end .mat-mdc-icon-button {
  width: 40px !important;
  height: 40px !important;
  padding: 8px !important;
}

.tin-between .tin-end .mat-icon-button .mat-icon,
.tin-between .tin-end .mat-mdc-icon-button .mat-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
}

/* Set html and body to fill viewport and remove default margins */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Apply modern thin font weight to all headings globally */
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

table {
  width: 100%;
}

.list-group {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.tin-input {
  display: flex;
  flex-direction: column;
}

.tin-input , .tin-col > * {
  width: 100%;
}

.tin-bg-color {
  background-color: #f2f7ff;
  background-size: 100%;
  background-size: 100%;
  min-height: 100vh; /* Use 100vh instead of 100% to fill viewport */
  height: auto;
}



.tin-side-image {
  /* background-image: url("~/assets/sidebar.jpg"); */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Crect width='200' height='400' fill='%23ffffff'/%3E%3Cpath d='M20 0 Q40 50, 20 100 T20 200 T20 300 T20 400' stroke='%234a90e2' fill='none' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M60 0 Q90 80, 60 160 T60 320 T60 400' stroke='%2350e3c2' fill='none' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M100 0 Q140 100, 100 200 T100 400' stroke='%23b8e986' fill='none' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M140 0 Q180 120, 140 240 T140 400' stroke='%239013fe' fill='none' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='20' cy='100' r='2' fill='%234a90e2' opacity='0.5'/%3E%3Ccircle cx='60' cy='160' r='2' fill='%2350e3c2' opacity='0.5'/%3E%3Ccircle cx='100' cy='200' r='2' fill='%23b8e986' opacity='0.5'/%3E%3Ccircle cx='140' cy='240' r='2' fill='%239013fe' opacity='0.5'/%3E%3Cpath d='M20 100 H140' stroke='%234a90e2' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M60 160 H180' stroke='%2350e3c2' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M20 200 H100' stroke='%23b8e986' stroke-width='1' opacity='0.2'/%3E%3Cpath d='M60 240 H140' stroke='%239013fe' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  /* background-size: 100%;
  background-repeat: repeat-y;
  background-size: 100%;
  min-height: 100%;
  height: auto; */

  min-height: 100%;
  /* opacity: 0.5; */
  background-size: cover;
  /* background-position: center; */
  /* background-attachment: fixed; */
}




.tin-input-row {
  display: flex;
  flex-direction: row !important;
  align-content: center !important;
  align-items: center !important;
  gap: 1em;
}

.tin-grid button {
  width: 100%;
}

.tin-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tin-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tin-between {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.tin-row {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
}

.tin-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tin-col button{
  min-width: 50%;
}

.highlight{
  box-shadow: 0 0 0 1px red;
}

.tin-grid {
  display: grid;
  gap: 1rem;
  row-gap: 10px;
  grid-template-columns: 1fr 1fr;
  /* grid-auto-columns:auto; */
  /* grid-template-columns: minmax(auto, 100px) auto; */
  align-items: start; /* Changed: Align fields to top for consistent alignment when hints/errors appear */
}

.tin-grid > * {
  width: 100%;
}

.tin-grid button {
  width: 50%;
}

.span-col,
.span-col-2 {
  grid-column: span 2;
}

.span-col-center {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}




@media (max-width: 600px) {
  .tin-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Changed: Add spacing between components on small screens */
  }

  .tin-grid,
  .tin-grid button,
  .tin-col button,
  .tin-grid-auto button {
    width: 100%;
  }
}

.tin-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tin-grid-auto {
  --min-col-size: 22rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col-size), 100%), 1fr)
  );
}

.tin-reel {
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: calc(30% - (var(--gap) / 2));
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--gap);
}

.reel > * {
  scroll-snap-align: start;
}

.tin-main-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
}

.tin-main-sidebar > :first-child {
  flex-basis: 500px;
  flex-grow: 9999;
}

.tin-main-sidebar > :last-child {
  flex-basis: 300px;
  flex-grow: 1;
}

/* Global font-size for all Angular Material form fields (Material 3) */
.mat-mdc-form-field {
  font-size: 14px !important;
}

.mat-mdc-text-field-wrapper {
  font-size: 14px !important;
}

.mat-mdc-form-field .mat-mdc-input-element {
  font-size: 14px !important;
  
}

.mat-mdc-form-field .mat-mdc-floating-label {
  font-size: 14px !important;
}

/* Global font-size for mat-select dropdown components */
.mat-mdc-select {
  font-size: 14px !important;
}

.mat-mdc-select-value {
  font-size: 14px !important;
}

.mat-mdc-select-placeholder {
  font-size: 14px !important;
}

.mat-mdc-select-trigger {
  font-size: 14px !important;
}

/* Dropdown panel and options */
.mat-mdc-select-panel {
  font-size: 14px !important;
  background-color: white !important;
}

.mat-mdc-option {
  font-size: 14px !important;
}

.mat-mdc-option .mdc-list-item__primary-text {
  font-size: 14px !important;
}

/* Global icon size for buttons and tables */
button mat-icon,
.mat-mdc-button mat-icon,
.mat-mdc-icon-button mat-icon,
.mat-mdc-fab mat-icon,
.mat-mdc-mini-fab mat-icon,
table mat-icon,
.mat-mdc-table mat-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
}

.mat-mdc-form-field-infix {
  padding-top: 8px !important; /* Compact top padding */
  padding-bottom: 8px !important; /* Compact bottom padding */
  min-height: auto !important; /* Remove default min-height */
}

.mat-mdc-text-field-wrapper {
  
  padding-top: 0px !important; /* Remove extra padding above input */
  padding-bottom: 0px !important; /* Remove extra padding below input */
}

/* Center floating label vertically only when empty and not focused */
.mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.mat-mdc-form-field-subscript-wrapper {
  margin-top: 0px !important; /* Minimal top margin from hint area */
  margin-bottom: 5px !important; /* Minimal top margin from hint area */
}

/* Set default white background for all Material cards */
.mat-mdc-card,
mat-card {
  background-color: white !important;
}

/* Set default white background for Material menu panels */
.mat-mdc-menu-panel,
.mat-menu-panel {
  background-color: white !important;
}

/* Target the button label text within menu items */
.mat-mdc-menu-content button,
.mat-mdc-menu-content .mat-mdc-menu-item,
.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-button-persistent-ripple,
.mat-mdc-menu-content .mat-mdc-menu-item > span {
  font-weight: 400 !important;
}

/* Set default white background for Material tables */
.mat-mdc-table,
mat-table,
.mat-table {
  background-color: white !important;
}

/* Grey table borders and lines */
.mat-mdc-table,
mat-table,
.mat-table {
  border-collapse: collapse !important;
}

.mat-mdc-table th,
.mat-mdc-table td,
mat-table th,
mat-table td,
.mat-table th,
.mat-table td {
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Grey column header text */
.mat-mdc-table th,
.mat-mdc-header-row th,
.mat-mdc-header-cell,
mat-table th,
mat-header-row th,
mat-header-cell,
.mat-table th,
.mat-header-row th,
.mat-header-cell {
  color: #757575 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* Compact table row heights */
.mat-mdc-table tr,
.mat-mdc-table .mat-mdc-row,
.mat-mdc-table .mat-mdc-header-row,
.mat-mdc-row,
.mat-mdc-header-row,
mat-row,
mat-header-row,
.mat-row,
.mat-header-row,
tr.mat-mdc-row,
tr.mat-mdc-header-row {
  height: 50px !important;
  min-height: 40px !important;
  /* max-height: 40px !important; */
}

.mat-mdc-table td,
.mat-mdc-table th,
.mat-mdc-table .mat-mdc-cell,
.mat-mdc-table .mat-mdc-header-cell,
.mat-mdc-cell,
.mat-mdc-header-cell,
mat-cell,
mat-header-cell,
.mat-cell,
.mat-header-cell,
td.mat-mdc-cell,
th.mat-mdc-header-cell {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  height: 40px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
}

/* Add extra left padding to first column cells */
.mat-mdc-table td:first-child,
.mat-mdc-table th:first-child,
.mat-mdc-cell:first-child,
.mat-mdc-header-cell:first-child {
  padding-left: 16px !important;
}

/* Compact chip buttons in table cells */
.mat-mdc-table .mat-stroked-button,
.mat-mdc-table .mat-mdc-outlined-button,
.mat-mdc-cell .mat-stroked-button,
.mat-mdc-cell .mat-mdc-outlined-button {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 12px !important;
  line-height: 35px !important;
  font-size: 13px !important;
}

/* Compact icon buttons in table action columns */
.mat-mdc-table .mat-mdc-icon-button,
.mat-mdc-table .mat-icon-button,
.mat-mdc-cell .mat-mdc-icon-button,
.mat-mdc-cell .mat-icon-button {
  width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
  line-height: 32px !important;
}

.mat-mdc-table .mat-mdc-icon-button .mat-icon,
.mat-mdc-table .mat-icon-button .mat-icon,
.mat-mdc-cell .mat-mdc-icon-button .mat-icon,
.mat-mdc-cell .mat-icon-button .mat-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
}

/* Material 3 compliant elevation classes for backward compatibility */
.mat-elevation-z0 {
  box-shadow: none !important;
}

.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
              0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
}

.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
              0px 5px 8px 0px rgba(0, 0, 0, 0.14),
              0px 1px 14px 0px rgba(0, 0, 0, 0.12) !important;
}

.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
              0px 9px 12px 1px rgba(0, 0, 0, 0.14),
              0px 3px 16px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Align dialog action buttons to the left with wrap support */
.mat-mdc-dialog-actions,
.mat-dialog-actions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important; /* Changed: Allow buttons to wrap on small screens */
  gap: 8px !important; /* Changed: Spacing between button groups when they wrap */
}

/* Changed: Ensure individual buttons inside dialog actions wrap with spacing */
.mat-mdc-dialog-actions > div,
.mat-dialog-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Override for spa-groups chip icons - maintain larger size */
spa-groups .chip-icon,
spa-groups .chip-additional-icon {
  font-size: inherit !important;
  width: inherit !important;
  height: inherit !important;

}

/* Ensure mat-chip icons in spa-groups are not affected by global tiny icon rules */
spa-groups mat-chip .mat-icon {
  font-size: inherit !important;
  width: inherit !important;
  height: inherit !important;

}