/*
 * TECC Theme for Vaadin 25
 * Migrated from frontend/themes/tecc/
 */

/* ========================================
   FONT FACES
   ======================================== */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   CSS CUSTOM PROPERTIES - LIGHT THEME
   ======================================== */
html {
  --lumo-border-radius-s: 1px;
  --lumo-border-radius-m: 2px;
  --lumo-border-radius-l: 4px;

  /* Compact sizing to match Vaadin 24 */
  --lumo-size-xl: 2.75rem;      /* Was 3rem - reduced for compact mode */
  --lumo-size-l: 2.25rem;       /* Was 2.5rem */
  --lumo-size-m: 1.75rem;       /* Was 2rem */
  --lumo-size-s: 1.5rem;        /* Was 1.75rem */
  --lumo-size-xs: 1.25rem;      /* Was 1.5rem */
  --lumo-size-xxs: 1rem;        /* Was 1.2rem */

  /* Tighter spacing to match Vaadin 24 */
  --lumo-space-xl: 1.5rem;      /* Was 1.875rem - reduced for compact mode */
  --lumo-space-l: 1rem;         /* Was 1.25rem */
  --lumo-space-m: 0.5rem;       /* Was 0.625rem */
  --lumo-space-s: 0.25rem;      /* Was 0.3125rem */
  --lumo-space-xs: 0.125rem;    /* Was 0.1875rem */

  --lumo-font-size: 1rem;
  --lumo-font-size-xxxl: 0.96rem;
  --lumo-font-size-xxl: 0.92rem;
  --lumo-font-size-xl: 0.90rem;
  --lumo-font-size-l: 0.88rem;
  --lumo-font-size-m: 0.86rem;
  --lumo-font-size-s: 0.72rem;
  --lumo-font-size-xs: 0.68rem;
  --lumo-font-size-xxs: 0.64rem;

  /* Tighter line heights to match Vaadin 24 */
  --lumo-line-height-m: 1.3;    /* Was 1.4 - reduced for compact mode */
  --lumo-line-height-s: 1.1;    /* Was 1.2 */
  --lumo-line-height-xs: 1.0;   /* Was 1.1 */

  --lumo-font-family: "Inter", sans-serif;
  --lumo-clickable-cursor: pointer;
  --lumo-error-color-10pct: hsla(300, 100%, 36%, 0.1);
  --lumo-error-color-50pct: hsla(300, 100%, 36%, 0.5);
  --lumo-error-color: hsl(360, 74%, 54%);
  --lumo-error-text-color: hsl(360, 74%, 54%);
  --lumo-primary-color-10pct: hsla(325, 18%, 81%, 1.0);
  --lumo-primary-color: rgb(119, 33, 111);
  --lumo-primary-text-color: rgb(119, 33, 111);
  --lumo-success-color: hsl(131, 53%, 46%);
  --lumo-tecc-badge-approved-background: rgb(233, 242, 237);
  --lumo-tecc-badge-approved-color: rgb(9, 118, 55);
  --lumo-tecc-badge-away-background: rgb(241, 222, 206);
  --lumo-tecc-badge-away-color: rgb(228, 130, 32);
  --lumo-tecc-badge-new-background: rgb(253, 210, 191);
  --lumo-tecc-badge-new-color: rgb(119, 56, 2);
  --lumo-tecc-badge-open-background: rgb(239, 222, 241);
  --lumo-tecc-badge-open-color: rgb(183, 1, 184);
  --lumo-tecc-badge-rejected-background: rgb(243, 224, 226);
  --lumo-tecc-badge-rejected-color: rgb(227, 0, 16);
  --lumo-tecc-button-hover-background-color: hsla(325, 18%, 81%, 1.0);
  --lumo-tecc-button-text-color: rgb(119, 33, 111);
  --lumo-tecc-check-hover: hsl(131, 54%, 65%);
  --lumo-tecc-check: hsl(131, 54%, 40%);
  --lumo-tecc-chevron: rgb(119, 33, 111);
  --lumo-tecc-drawer-background-color: rgb(119, 33, 111);
  --lumo-tecc-drawer-footer-text: rgb(119, 33, 111);
  --lumo-tecc-drawer-icon-color: rgb(119, 33, 111);
  --lumo-tecc-editable-cell: hsl(300, 100%, 36%);
  --lumo-tecc-file-download-hover: hsl(208, 77%, 67%);
  --lumo-tecc-file-download: hsl(208, 77%, 47%);
  --lumo-tecc-header-background: hsla(325, 18%, 81%, 1.0);
  --lumo-tecc-splitter-handler: rgb(119, 33, 111);
  --lumo-tecc-splitter: rgb(255, 168, 168);
  --lumo-tecc-tooltip-background-color: hsl(0, 0%, 92%);
  --lumo-tecc-tooltip-color: hsl(210, 10%, 26%);
  --lumo-tecc-trash-hover: hsl(356, 100%, 70%);
  --lumo-tecc-trash: hsl(356, 100%, 45%);
  --lumo-tecc-uncheck-hover: hsl(35, 100%, 64%);
  --lumo-tecc-uncheck: hsl(35, 100%, 47%);
  --lumo-tertiary-editor-hover: hsl(300, 100%, 75%);
  --lumo-tertiary-editor: hsl(300, 100%, 36%);
  --lumo-warning-color: #e98300;
  --tecc-glow-background-color-main: rgb(255, 255, 255);
  --tecc-glow-background-color: rgb(243, 224, 226);
  --tecc-glow-color: rgb(18, 110, 118);
  --tecc-header-layout: hsla(34, 78%, 86%, 1.0);
  --tecc-save-button-hover: hsl(119, 100%, 24%);
  --tecc-save-button: rgb(119, 33, 111);
  --tecc-tertiary-add-hover: hsl(131, 54%, 65%);
  --tecc-tertiary-add: hsl(131, 54%, 40%);
  --tecc-tertiary-edit-hover: hsl(208, 77%, 67%);
  --tecc-tertiary-edit: hsl(208, 77%, 47%);
  --tecc-board-default: var(--lumo-primary-color);
  --tecc-board-success: var(--lumo-success-color);
  --tecc-board-error: var(--lumo-error-text-color);
  --tecc-board-warning: var(--lumo-warning-color);
  --tecc-board-comment: var(--lumo-tecc-tooltip-color);
  --tecc-board-item-background: #F4F5F7;
  --tecc-board-item-border: var(--lumo-primary-color);
  --tecc-capacities-gray: #626D7C;
  --tecc-sidebar-header: rgba(118, 34, 111, 0.5);
  --lumo-tecc-update-stamp: rgb(119, 33, 111);
  --vaadin-input-field-disabled-value-color: rgb(17, 73, 125);
  --vaadin-input-field-disabled-background: rgb(208, 235, 255);
  --tecc-notification-text-color: white;
}

/* ========================================
   CSS CUSTOM PROPERTIES - DARK THEME
   ======================================== */
[theme~="dark"] {
  --lumo-error-color: hsl(360, 100%, 71%);
  --lumo-error-text-color: hsl(360, 100%, 71%);
  --lumo-primary-color-10pct: hsla(191, 48%, 24%, 1.0);
  --lumo-primary-color: rgba(132, 203, 201, 1.0);
  --lumo-primary-text-color: rgba(132, 203, 201, 1.0);
  --lumo-success-color: hsla(128, 71%, 82%, 1.0);
  --lumo-tecc-badge-approved-background: rgb(37, 71, 78);
  --lumo-tecc-badge-approved-color: rgb(15, 217, 101);
  --lumo-tecc-badge-away-background: rgb(123, 79, 38);
  --lumo-tecc-badge-away-color: rgb(232, 193, 93);
  --lumo-tecc-badge-new-background: rgb(119, 56, 2);
  --lumo-tecc-badge-new-color: rgb(253, 210, 191);
  --lumo-tecc-badge-open-background: rgb(44, 70, 105);
  --lumo-tecc-badge-open-color: rgb(144, 189, 249);
  --lumo-tecc-badge-rejected-background: rgb(72, 66, 84);
  --lumo-tecc-badge-rejected-color: rgb(254, 159, 153);
  --lumo-tecc-button-hover-background-color: hsl(215, 41%, 29%);
  --lumo-tecc-button-text-color: rgba(132, 203, 201, 1.0);
  --lumo-tecc-check-hover: hsl(129, 68%, 60%);
  --lumo-tecc-check: rgb(140, 233, 154);
  --lumo-tecc-chevron: rgba(132, 203, 201, 1.0);
  --lumo-tecc-drawer-background-color: rgb(3, 82, 80);
  --lumo-tecc-drawer-footer-text: rgba(132, 203, 201, 1.0);
  --lumo-tecc-drawer-icon-color: rgba(132, 203, 201, 1.0);
  --lumo-tecc-editable-cell: rgb(140, 233, 154);
  --lumo-tecc-file-download-hover: hsl(208, 77%, 47%);
  --lumo-tecc-file-download: hsl(208, 77%, 67%);
  --lumo-tecc-header-background: hsla(191, 48%, 24%, 1.0);
  --lumo-tecc-splitter-handler: rgb(44, 182, 179);
  --lumo-tecc-splitter: rgba(132, 203, 201, 1.0);
  --lumo-tecc-tooltip-background-color: rgb(3, 82, 80);
  --lumo-tecc-tooltip-color: hsl(210, 17%, 86%);
  --lumo-tecc-trash-hover: hsl(0, 100%, 71%);
  --lumo-tecc-trash: rgb(100, 21, 21);
  --lumo-tecc-uncheck-hover: rgb(250, 176, 5);
  --lumo-tecc-uncheck: rgb(255, 224, 102);
  --lumo-tertiary-editor-hover: hsl(300, 53%, 51%);
  --lumo-tertiary-editor: hsl(300, 100%, 75%);
  --lumo-warning-color: rgb(255, 224, 102);
  --tecc-glow-background-color-main: rgb(34, 51, 73);
  --tecc-glow-background-color: rgb(37, 71, 78);
  --tecc-glow-color: rgb(32, 161, 186);
  --tecc-header-layout: hsl(131, 88%, 6%);
  --tecc-save-button-hover: hsl(119, 100%, 24%);
  --tecc-save-button: hsl(131, 54%, 40%);
  --tecc-tertiary-add-hover: hsl(131, 54%, 40%);
  --tecc-tertiary-add: hsl(131, 54%, 65%);
  --tecc-tertiary-edit-hover: hsl(208, 77%, 47%);
  --tecc-tertiary-edit: hsl(208, 77%, 67%);
  --tecc-board-default: var(--lumo-primary-color);
  --tecc-board-success: var(--lumo-success-color);
  --tecc-board-error: var(--lumo-error-text-color);
  --tecc-board-warning: var(--lumo-warning-color);
  --tecc-board-comment: var(--lumo-tecc-tooltip-color);
  --tecc-board-item-background: #202F44;
  --tecc-board-item-border: var(--lumo-primary-color);
  --tecc-capacities-gray: #A0B1C5;
  --tecc-sidebar-header: rgba(132, 203, 201, 0.5);
  --lumo-tecc-update-stamp: rgba(132, 203, 201, 1.0);
  --vaadin-input-field-disabled-value-color: rgb(208, 235, 255);
  --vaadin-input-field-disabled-background: rgb(17, 73, 125);
  --tecc-notification-text-color: black;
}

/* Dark theme logo override */
[theme~="dark"] .tecc-logo {
  background-image: url('../images/logo_azw_text_white.png');
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  flex-shrink: 0;
  background-size: cover;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.tecc-update-stamp {
  text-align: right;
  font-size: var(--lumo-font-size-xs);
  color: var(--lumo-tecc-update-stamp);
}

.tecc-header-layout {
  background-color: var(--tecc-header-layout);
  padding: 10px;
  border-radius: 5px;
}

.tecc-break-word {
  overflow-wrap: anywhere;
}

.tecc-logo {
  background-image: url('../images/logo_azw_text_black.png');
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  flex-shrink: 0;
  margin: 12px;
  background-size: cover;
}

/* Drawer slot layout: lock the header (logo) and footer (release) at their natural size,
   and let the scroller (navigation) take all remaining space and scroll internally when
   its content overflows. Without this, an expanded side-nav pushes the header out and the
   logo Div overflows downward into the navigation area. */
header[slot="drawer"],
footer[slot="drawer"] {
  flex-shrink: 0;
}

vaadin-scroller[slot="drawer"] {
  flex: 1 1 0;
  min-height: 0;
}

footer.text-secondary {
  color: var(--lumo-tecc-drawer-footer-text);
}

.tecc-hover-green {
  background-color: var(--lumo-tecc-drawer-background-color);
}

.tecc-hover-green:hover {
  background-color: var(--lumo-tecc-trash);
}

.tecc-tertiary-check {
  top: -2px;
  color: var(--lumo-tecc-check);
}

.tecc-tertiary-check:hover {
  color: var(--lumo-tecc-check-hover);
}

.tecc-tertiary-uncheck {
  top: 2px;
  color: var(--lumo-tecc-uncheck);
}

.tecc-tertiary-uncheck:hover {
  color: var(--lumo-tecc-uncheck-hover);
}

.tecc-tertiary-edit {
  color: var(--tecc-tertiary-edit);
}

.tecc-tertiary-edit:hover {
  color: var(--tecc-tertiary-edit-hover);
}

.tecc-tertiary-editor {
  color: var(--lumo-tertiary-editor);
}

.tecc-tertiary-editor:hover {
  color: var(--lumo-tertiary-editor-hover);
}

.tecc-tertiary-add {
  color: var(--tecc-tertiary-add);
}

.tecc-tertiary-add:hover {
  color: var(--tecc-tertiary-add-hover);
}

.tecc-tertiary-trash {
  color: var(--lumo-tecc-trash);
}

.tecc-tertiary-trash:hover {
  color: var(--lumo-tecc-trash-hover);
}

.tecc-file-download {
  background: transparent;
  color: var(--lumo-tecc-file-download);
}

.tecc-file-download:hover {
  background: transparent;
  color: var(--lumo-tecc-file-download-hover);
}

.tecc-badge-open {
  color: var(--lumo-tecc-badge-open-color);
  background-color: var(--lumo-tecc-badge-open-background);
}

.tecc-badge-new {
  color: var(--lumo-tecc-badge-new-color);
  background-color: var(--lumo-tecc-badge-new-background);
}

.tecc-badge-approved {
  color: var(--lumo-tecc-badge-approved-color);
  background-color: var(--lumo-tecc-badge-approved-background);
}

.tecc-badge-done {
  color: var(--lumo-tecc-badge-approved-color);
  background-color: var(--lumo-tecc-badge-approved-background);
}

.tecc-badge-away {
  color: var(--lumo-tecc-badge-away-color);
  background-color: var(--lumo-tecc-badge-away-background);
}

.tecc-badge-rejected {
  color: var(--lumo-tecc-badge-rejected-color);
  background-color: var(--lumo-tecc-badge-rejected-background);
}

.tecc-badge-archived {
  color: var(--lumo-tecc-badge-rejected-color);
  background-color: var(--lumo-tecc-badge-rejected-background);
}

.tecc-citation {
  color: var(--lumo-tecc-drawer-footer-text);
  font-size: var(--lumo-font-size-s);
  font-style: italic;
}

.tecc-font {
  font-family: "Inter", sans-serif;
}

.tecc-capacities-color {
  color: var(--tecc-capacities-gray);
}

.tecc-notify-text-color {
  color: var(--tecc-notification-text-color);
}

.tecc-right-align {
  text-align: right;
}

.tecc-pointer {
  cursor: pointer;
}

.tecc-glow {
  animation: pulse 1s infinite;
}

/* ========================================
   VAADIN COMPONENT CUSTOMIZATION
   ======================================== */

/* App Layout - Remove all backgrounds from base component */
vaadin-app-layout {
  background-color: transparent !important;
  --vaadin-app-layout-drawer-offset: 0 !important;
}

/* Remove padding from main content area */
vaadin-app-layout::part(content) {
  padding: 0 !important;
}

/* Navbar styling (header area only) */
vaadin-app-layout::part(navbar) {
  background-color: transparent !important;
  box-shadow: none;
  padding: 0 !important;
}

/* Drawer should have NO colored background - Force white/transparent! */
vaadin-app-layout::part(drawer) {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Dark mode drawer */
[theme~="dark"] vaadin-app-layout::part(drawer) {
  background-color: var(--lumo-shade-5pct) !important;
  background: var(--lumo-shade-5pct) !important;
}

/* Content area padding to align with grid - REMOVE ALL PADDING */
vaadin-app-layout [slot="drawer"],
vaadin-app-layout [slot="navbar"] {
  padding: 0 !important;  /* No padding - elements handle their own */
}

/* Drawer content wrapper - ensure no colored background or padding */
vaadin-app-layout vaadin-scroller[slot="drawer"] {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Any div or element inside drawer slot */
vaadin-app-layout [slot="drawer"] {
  background-color: transparent !important;
}

vaadin-app-layout [slot="drawer"] footer {
  background-color: var(--lumo-base-color) !important;
}

vaadin-app-layout [slot="drawer"] * {
  background-color: transparent !important;
}

/* Drawer toggle (hamburger menu) color */
vaadin-app-layout vaadin-drawer-toggle {
  color: var(--lumo-primary-text-color);
}

/* Header element - ensure it's a vertical column layout */
vaadin-app-layout header {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  background-color: transparent !important;
  padding: 0 !important;
}

/* H1, H2, H3 headers - ULTRA compact to match Vaadin 24 */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.05 !important;  /* Even tighter */
  margin: 0 !important;
  font-weight: 600 !important;  /* Slightly lighter than bold */
}

h1 {
  font-size: 1rem !important;  /* 16px - same as body text but bold */
  padding: 0.125rem 0.25rem !important;  /* Match grid cell padding exactly */
  margin: 0 !important;
}

h2 {
  font-size: 0.92rem !important;  /* 14.7px */
  padding: 0.125rem 0.25rem !important;  /* Match grid cell padding exactly */
  margin: 0 !important;
}

h3 {
  font-size: 0.86rem !important;  /* 13.8px */
  padding: 0.1rem 0.25rem !important;  /* Match grid cell padding exactly */
  margin: 0 !important;
}

/* Icons in headers - smaller */
h1 vaadin-icon,
h2 vaadin-icon,
h3 vaadin-icon {
  width: 1.125rem !important;  /* 18px - smaller than before */
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  margin-right: 0.25rem !important;
}

/* Page title headers (like "Bewohner*innen") - ultra compact with grid alignment */
.view-header,
[class*="header"] h1,
[class*="header"] h2 {
  padding: 0.125rem 0.25rem !important;  /* Match grid cell padding exactly */
  margin: 0 !important;
  line-height: 1.05 !important;
  font-size: 1rem !important;  /* 16px - compact */
  font-weight: 600 !important;
}

/* Content area padding - align with grid */
[class*="content"],
[class*="view"] {
  padding: 0 !important;  /* No padding - let grid control spacing */
  margin: 0 !important;  /* No margin either */
}

/* Remove margins from any container that might wrap the grid */
div:has(> vaadin-grid) {
  margin: 0 !important;
  padding: 0 !important;
}

/* Header content - first row with menu, DASBO on left, user items on right - Align with grid */
.header-content-div-1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100%;
  min-height: 64px;
  gap: var(--lumo-space-s);
  background-color: transparent !important;
  padding-left: 0.25rem !important;  /* Match grid cell padding exactly */
  padding-right: 0.25rem !important;  /* Match grid cell padding exactly */
  box-sizing: border-box !important;
}

/* Ensure H1 DASBO has margin-right auto (should be set in Java, but reinforce) */
.header-content-div-1 h1 {
  margin-right: auto !important;
  padding-left: 0 !important;  /* Remove extra padding since div has padding */
}

/* Group all user menu items to the right */
.header-content-div-1 > vaadin-menu-bar,
.header-content-div-1 > vaadin-menu-bar ~ * {
  margin-left: 0;
}

/* Tab bar header - second row with links (Hilfe, Homepage, etc.) - Align with grid */
.tab-bar-header {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: transparent !important;
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-left: 0.25rem !important;  /* Match grid cell padding exactly */
  padding-right: 0.25rem !important;  /* Match grid cell padding exactly */
  box-sizing: border-box !important;
}

/* Tooltip styling */
vaadin-tooltip-overlay::part(overlay) {
  background-color: var(--lumo-tecc-tooltip-background-color);
  color: var(--lumo-tecc-tooltip-color);
}

/* Button hover effects */
vaadin-button:hover {
  background-color: var(--lumo-tecc-button-hover-background-color);
}

vaadin-button:hover[theme~="submit"] {
  background-color: rgb(63, 207, 213);
}

/* Make all buttons more compact like Vaadin 24 */
vaadin-button {
  padding: 0.375rem 0.75rem !important;
  min-height: var(--lumo-size-s) !important;
  font-size: var(--lumo-font-size-m) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

vaadin-button::part(label) {
  padding: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}

vaadin-button::part(prefix),
vaadin-button::part(suffix) {
  display: flex !important;
  align-items: center !important;
}

/* Compact icon buttons */
vaadin-button[theme~="icon"] {
  padding: 0.25rem !important;
  min-width: var(--lumo-size-s) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Chart styling */
vaadin-chart {
  background-color: transparent;
  fill: none;
}

/* ========================================
   COMPACT FORM FIELDS - Match Vaadin 24
   ======================================== */

/* Text fields, text areas, selects, combo boxes - compact mode */
vaadin-text-field,
vaadin-text-area,
vaadin-email-field,
vaadin-password-field,
vaadin-number-field,
vaadin-integer-field,
vaadin-select,
vaadin-combo-box,
vaadin-date-picker,
vaadin-time-picker,
vaadin-date-time-picker {
  --lumo-text-field-size: var(--lumo-size-s) !important;
}

vaadin-text-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-select::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker::part(input-field) {
  min-height: var(--lumo-size-s) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: var(--lumo-font-size-m) !important;
}

/* Input elements inside fields */
vaadin-text-field input,
vaadin-text-area textarea,
vaadin-email-field input,
vaadin-password-field input,
vaadin-number-field input,
vaadin-integer-field input {
  min-height: auto !important;
  padding: 0 !important;
  font-size: var(--lumo-font-size-m) !important;
}

/* Labels more compact */
vaadin-text-field::part(label),
vaadin-text-area::part(label),
vaadin-email-field::part(label),
vaadin-password-field::part(label),
vaadin-number-field::part(label),
vaadin-integer-field::part(label),
vaadin-select::part(label),
vaadin-combo-box::part(label),
vaadin-date-picker::part(label),
vaadin-time-picker::part(label),
vaadin-date-time-picker::part(label) {
  padding-bottom: 0.125rem !important;
  font-size: var(--lumo-font-size-s) !important;
}

/* Helper text more compact */
vaadin-text-field::part(helper-text),
vaadin-text-area::part(helper-text),
vaadin-select::part(helper-text),
vaadin-combo-box::part(helper-text),
vaadin-date-picker::part(helper-text),
vaadin-time-picker::part(helper-text),
vaadin-date-time-picker::part(helper-text) {
  font-size: var(--lumo-font-size-xs) !important;
  padding-top: 0.125rem !important;
}

/* Checkboxes and radio buttons more compact */
vaadin-checkbox,
vaadin-radio-button {
  padding: 0.25rem 0 !important;
}

vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio) {
  width: 1rem !important;
  height: 1rem !important;
}

vaadin-checkbox::part(label),
vaadin-radio-button::part(label) {
  padding-left: 0.375rem !important;
  font-size: var(--lumo-font-size-m) !important;
}

/* Checkbox group and radio group */
vaadin-checkbox-group::part(group-field),
vaadin-radio-group::part(group-field) {
  padding: 0 !important;
}

vaadin-checkbox-group::part(label),
vaadin-radio-group::part(label) {
  padding-bottom: 0.25rem !important;
  font-size: var(--lumo-font-size-s) !important;
}

/* Confirm dialog buttons */
vaadin-confirm-dialog-overlay > [slot="confirm-button"]:hover {
  background-color: green;
}

vaadin-confirm-dialog-overlay > [slot="cancel-button"]:hover {
  color: var(--lumo-primary-color);
  background-color: var(--lumo-tecc-button-hover-background-color);
}

/* ========================================
   COMPACT TABS, MENUS & NAVIGATION
   ======================================== */

/* Tabs - EXACT Vaadin 24 compact size */
vaadin-tabs {
  min-height: auto !important;
  --lumo-space-xs: 0.125rem !important;
}

vaadin-tabs vaadin-tab {
  padding: 0.25rem 0.5rem !important;  /* Much smaller than default */
  min-height: var(--lumo-size-xs) !important;  /* Use compact size */
  font-size: var(--lumo-font-size-s) !important;  /* Smaller font */
  line-height: 1.2 !important;
}

vaadin-tabs[orientation="vertical"] vaadin-tab {
  padding: 0.2rem 0.4rem !important;
}

/* Tab icons */
vaadin-tab vaadin-icon {
  --lumo-icon-size-s: 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Menu bar more compact */
vaadin-menu-bar {
  min-height: auto !important;
  --lumo-space-xs: 0.125rem !important;
}

vaadin-menu-bar-button {
  padding: 0.25rem 0.5rem !important;
  min-height: var(--lumo-size-xs) !important;
  font-size: var(--lumo-font-size-s) !important;
}

vaadin-context-menu-item {
  padding: 0.2rem 0.5rem !important;
  min-height: var(--lumo-size-xs) !important;
  font-size: var(--lumo-font-size-s) !important;
}

/* Accordion more compact */
vaadin-accordion vaadin-accordion-panel::part(summary) {
  padding: 0.5rem 0.75rem !important;
  min-height: auto !important;
  font-size: var(--lumo-font-size-m) !important;
}

vaadin-accordion vaadin-accordion-panel::part(content) {
  padding: 0.5rem 0.75rem !important;
}

/* Details more compact */
vaadin-details::part(summary) {
  padding: 0.375rem 0.5rem !important;
  min-height: auto !important;
  font-size: var(--lumo-font-size-m) !important;
}

vaadin-details::part(content) {
  padding: 0.5rem !important;
}

/* Login form styling */
vaadin-login-form-wrapper::part(footer) {
  text-align: center;
  color: #868E96;
}

.otp-verified vaadin-login-form vaadin-button[theme~="submit"] {
  background-color: rgb(119, 33, 111) !important;
  color: white !important;
}

.otp-verified vaadin-login-form vaadin-button[theme~="submit"]:hover {
  background-color: rgb(63, 207, 213) !important;
  color: white !important;
}

.otp-verified vaadin-login-form-wrapper::part(footer) {
  text-align: center;
  color: #868E96;
  font-size: var(--lumo-font-size-m);
}

/* ========================================
   COMPACT DIALOGS & OVERLAYS
   ======================================== */

/* Dialog headers and content more compact */
vaadin-dialog-overlay::part(header) {
  padding: 0.75rem 1rem !important;
  font-size: var(--lumo-font-size-l) !important;
}

vaadin-dialog-overlay::part(content) {
  padding: 0.75rem 1rem !important;
}

vaadin-dialog-overlay::part(footer) {
  padding: 0.5rem 1rem !important;
  gap: 0.5rem !important;
}

/* Notification more compact */
vaadin-notification-card {
  padding: 0.75rem 1rem !important;
  font-size: var(--lumo-font-size-m) !important;
}

/* Message list more compact */
vaadin-message {
  padding: 0.5rem !important;
}

vaadin-message::part(content) {
  font-size: var(--lumo-font-size-m) !important;
}

/* App layout drawer already styled above */

/* Login overlay styling */
vaadin-login-overlay-wrapper::part(backdrop) {
  background-image: url('../images/azw_background.webp');
  background-repeat: no-repeat;
  background-size: cover;
}

vaadin-login-overlay-wrapper::part(brand) {
  background-image: url('../images/logo_azw_text_white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 80px;
  width: 200px;
  margin: 0 auto;
}

vaadin-login-overlay-wrapper::part(brand) h1 {
  display: none;
}

/* ========================================
   GRID STYLING - EXACT VAADIN 24 MATCH
   ======================================== */

/* Force Vaadin 25 to use Vaadin 24's internal grid defaults */
vaadin-grid {
  font-size: var(--lumo-font-size-m) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Grid headers - match Vaadin 24 with minimal padding */
vaadin-grid::part(header-cell) {
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
  background-color: var(--lumo-tecc-header-background);
  padding: 0.125rem 0.25rem !important;  /* Minimal padding for readability */
  min-height: 1.25rem !important;  /* Exact V24 height */
  line-height: 1.1 !important;
}

/* Grid body cells - match Vaadin 24 with minimal padding */
vaadin-grid::part(cell),
vaadin-grid::part(body-cell) {
  padding: 0.125rem 0.25rem !important;  /* Minimal padding for readability */
  min-height: 1.25rem !important;  /* Exact V24 height */
  line-height: 1.1 !important;
}

/* Grid rows - match Vaadin 24 exactly */
vaadin-grid::part(row) {
  min-height: 1.25rem !important;  /* Exact V24 height */
}

/* Grid cell content - EXACT V24 styling with no extra padding */
vaadin-grid-cell-content {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--tecc-cell-font-size) !important;
  font-weight: var(--tecc-cell-font-weight) !important;
  padding: 0 !important;  /* Cell padding handles spacing */
  line-height: 1.1 !important;
  overflow: visible !important; /* Allow button icons to render fully */
}

/* Icons inside grid cells - MUCH smaller */
vaadin-grid vaadin-icon,
vaadin-grid-cell-content vaadin-icon {
  --lumo-icon-size-s: 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
}

/* Icon-only buttons in grid (edit/show buttons) - compact with minimal padding */
.tecc-grid-icon-button {
  --lumo-button-size: 1.5rem !important;
  min-height: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 0.25rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.tecc-grid-icon-button::part(button) {
  overflow: visible !important;
  padding: 0 !important;
  min-height: inherit !important;
  height: inherit !important;
}

.tecc-grid-icon-button::part(label) {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.tecc-grid-icon-button vaadin-icon {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  display: inline-flex !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.tecc-grid-icon-button svg,
.tecc-grid-icon-button vaadin-icon svg {
  overflow: visible !important;
  vertical-align: middle !important;
  width: 100% !important;
  height: 100% !important;
}

.tecc-grid-icon-button > * {
  overflow: visible !important;
}

/* Action buttons with text in grid (e.g., "Speichern") - normal padding */
.tecc-grid-action-button {
  padding: 0.5rem 1rem !important;
  min-height: auto !important;
}

.tecc-grid-action-button::part(label) {
  padding: 0 0.5rem !important;
}

/* Fallback: Default buttons inside grid cells - minimal (for backwards compatibility) */
vaadin-grid vaadin-button:not(.tecc-grid-icon-button):not(.tecc-grid-action-button),
vaadin-grid-cell-content vaadin-button:not(.tecc-grid-icon-button):not(.tecc-grid-action-button) {
  --lumo-button-size: 1.5rem !important;
  min-height: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 0.25rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* Grid actions layout - prevent clipping of button icons */
.tecc-grid-actions-layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Grid filter fields in headers - minimal and compact */
vaadin-grid-filter,
vaadin-grid::part(header-cell) vaadin-text-field {
  --lumo-text-field-size: 1.125rem !important;
}

vaadin-grid-filter vaadin-text-field::part(input-field),
vaadin-grid::part(header-cell) vaadin-text-field::part(input-field) {
  min-height: 1.125rem !important;
  padding: 0.0625rem 0.125rem !important;
  font-size: var(--lumo-font-size-s) !important;
  line-height: 1.1 !important;
}

.tecc-grid-small-font vaadin-grid-cell-content {
  font-size: var(--lumo-font-size-s) !important;
}

/* Side navigation styling - Compact like Vaadin 24 */
vaadin-side-nav::part(label) {
  font-size: var(--lumo-font-size-xs) !important;
  font-weight: 500;
  color: var(--lumo-tecc-header-background);
  line-height: var(--lumo-line-height-xs) !important;  /* 1.1 - tighter line height */
}

/* Make side-nav items more compact */
vaadin-side-nav-item {
  --lumo-font-size-xs: 0.68rem !important;
  font-size: var(--lumo-font-size-xs) !important;
  line-height: 1.1 !important;
}

/* Reduce padding/spacing in side-nav items */
vaadin-side-nav-item::part(link) {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  min-height: auto !important;
}

/* Make nested items even more compact */
vaadin-side-nav-item[slot="children"]::part(link) {
  padding-top: 0.375rem !important;    /* Increased from 0.2rem for more breathing room */
  padding-bottom: 0.375rem !important;  /* Increased from 0.2rem for more breathing room */
}

/* Drawer styling */
vaadin-scroller[slot="drawer"] {
  padding: var(--lumo-space-s);
  flex: 1 1 auto; /* Ensure scroller takes available space */
}

[slot="drawer"]:is(header, footer) {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-s) var(--lumo-space-m);
  min-height: var(--lumo-size-l) !important;  /* Reduced from xl for compact mode */
  box-sizing: border-box;
}

/* Drawer footer - version number centered and fixed at bottom */
[slot="drawer"][slot="drawer"]:is(footer),
footer[slot="drawer"] {
  justify-content: center !important;  /* Center horizontally */
  text-align: center !important;
  position: sticky !important;
  bottom: 0 !important;
  background-color: var(--lumo-base-color) !important; /* Ensure background is solid when sticking */
  border-top: 1px solid var(--lumo-contrast-10pct) !important;
  margin-top: auto !important;  /* Push to bottom */
  width: 100% !important;
  z-index: 1; /* Ensure it stays on top of scrolling content */
}

/* Version number text styling */
[slot="drawer"]:is(footer) *,
footer[slot="drawer"] * {
  text-align: center !important;
  width: 100% !important;
  font-size: var(--lumo-font-size-xs) !important;
  color: var(--lumo-secondary-text-color) !important;
  display: block; /* Ensure it takes full width for centering */
}

[slot="drawer"]:is(header, footer):is(:empty) {
  display: none;
}

/* Split layout styling */
vaadin-split-layout::part(splitter) {
  background-color: var(--lumo-tecc-splitter);
}

vaadin-split-layout::part(handle)::after {
  background-color: var(--lumo-tecc-splitter-handler);
}

/* ========================================
   OTP (One-Time Password) STYLES
   ======================================== */
.otp-layout {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.otp-qr-code-image {
  margin: 10px 0;
}

.otp-secret-key {
  margin: 10px 0;
  color: var(--lumo-primary-text-color);
  font-weight: 500;
  font-size: 1.2rem;
}

.otp-warning {
  border: 2px dotted var(--lumo-error-color);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  gap: 16px;
}

.warning-icon {
  color: var(--lumo-warning-color);
  font-size: 24px;
  margin-top: 4px;
}

.warning-label {
  color: var(--lumo-warning-color);
  font-weight: bold;
  font-size: 18px;
  margin-left: 8px;
  margin-top: 4px;
}

.warning-message {
  color: var(--lumo-error-color);
  font-size: 16px;
  line-height: 1.5;
}

/* ========================================
   BOARD COMPONENT STYLES
   ======================================== */
.small-board-item {
  position: relative;
  border: 2px solid var(--tecc-board-item-border);
  background-color: var(--tecc-board-item-background);
  border-radius: 5px;
  padding: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 150px;
  max-width: 150px;
  cursor: pointer;
}

.small-board-item div {
  margin: 0;
  padding: 0;
  line-height: 0.5;
}

.small-board-value {
  font-size: 0.8em;
}

.small-board-value-default {
  color: var(--tecc-board-default);
}

.small-board-value-error {
  color: var(--tecc-board-error);
}

.small-board-value-success {
  color: var(--tecc-board-success);
}

.small-board-value-warning {
  color: var(--tecc-board-warning);
}

.small-board-comment {
  font-style: italic;
  font-size: 0.6em;
  color: var(--tecc-board-comment);
}

.small-board-title {
  font-weight: bold;
  font-size: 0.6em;
  color: var(--lumo-primary-color);
}

.small-board-icon {
  position: absolute;
  top: 4px;
  left: 2px;
  width: 8px;
  height: 8px;
}

.board-item {
  position: relative;
  border: 2px solid var(--tecc-board-item-border);
  background-color: var(--tecc-board-item-background);
  border-radius: 5px;
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 250px;
  max-width: 250px;
  cursor: pointer;
}

.board-item div {
  margin: 0;
  padding: 0;
  line-height: 0.75;
}

.board-value {
  font-size: 1.5em;
}

.board-value-default {
  color: var(--tecc-board-default);
}

.board-value-error {
  color: var(--tecc-board-error);
}

.board-value-success {
  color: var(--tecc-board-success);
}

.board-value-warning {
  color: var(--tecc-board-warning);
}

.board-comment {
  font-style: italic;
  font-size: 0.8em;
  color: var(--tecc-board-comment);
}

.board-title {
  font-weight: bold;
  color: var(--lumo-primary-color);
}

.board-icon {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 18px;
  height: 18px;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes pulse {
  0% {
    background-color: var(--tecc-glow-background-color-main);
  }
  100% {
    background-color: var(--tecc-glow-background-color);
  }
}

/* ========================================
   LOGIN VIEW SPECIFIC STYLES
   ======================================== */
.login-input::part(input-field) {
  background-color: #e9ecef !important;
}

.login-input::part(reveal-button) {
  color: #77216f !important;
}



.login-input::part(required-indicator) {
  color: #77216f;
}