/* 
=====================================================
CSS Imports (must be at the top)
===================================================== 
*/
@import './css/utils.css';
@import './css/components.css';
@import './components/fields.css';
@import './components/alert.css';
@import './css/layouts.css';
@import './css/sections.css';
@import './css/views.css'; 


/* 
=====================================================
CSS Custom Properties
===================================================== 
*/
:root {
  /* Colors */
  --fl-primary-color: #00AEEF;
  --fl-primary-dark: #005A9A;
  --fl-primary-light: #00B1EB;
  --fl-gray: #717980;
  --fl-gray-dark: #353F49;
  --fl-background: #F7F7F7;

  /* Typography */
  --fl-font-family: 'Source Sans Pro', sans-serif;
  --fl-font-size: 12px;  /* Vaadin 7: 12px (NOT 14px) */
  --fl-font-weight: 400;
  --fl-font-color: #000000;

  /* =====================================================
     LUMO THEME OVERRIDE - VAADIN 7 VALO UYUMLULUĞU
     
     Lumo Default        → Valo Override
     ----------------    → ---------------
     line-height: 1.4    → 1.55
     space-m: 1rem       → 0.5rem (8px)
     border-radius: 0.25em → 4px
     size-m: 2.25rem     → 32px
     ===================================================== */
  
  /* Font - Vaadin 7 Valo uyumlu (base: 12px) */
  --lumo-font-family: 'Source Sans Pro', sans-serif;
  --lumo-font-size-xxs: 9px;
  --lumo-font-size-xs: 10px;
  --lumo-font-size-s: 11px;
  --lumo-font-size-m: 12px;              /* Lumo: 1rem → Valo: 12px ✅ (was 14px) */
  --lumo-font-size-l: 14px;
  --lumo-font-size-xl: 16px;
  --lumo-font-size-xxl: 18px;
  --lumo-font-size-xxxl: 22px;
  
  /* Line Height */
  --lumo-line-height-m: 1.4;             /* Lumo: 1.4 → Valo: 1.4 (daha kompakt) */
  --lumo-line-height-s: 1.3;
  --lumo-line-height-xs: 1.2;
  
  /* Spacing (Layout boşlukları) */
  --lumo-space-xs: 0.25rem;              /* 4px */
  --lumo-space-s: 0.375rem;              /* 6px */
  --lumo-space-m: 0.5rem;                /* Lumo: 1rem (16px) → Valo: 0.5rem (8px) ✅ */
  --lumo-space-l: 0.75rem;               /* 12px */
  --lumo-space-xl: 1rem;                 /* 16px */
  
  /* Border Radius */
  --lumo-border-radius-s: 3px;
  --lumo-border-radius-m: 4px;           /* Lumo: 0.25em (~3.5px) → Valo: 4px ✅ */
  --lumo-border-radius-l: 6px;
  
  /* Component Sizes (Input, Button yükseklikleri) */
  --lumo-size-xs: 24px;
  --lumo-size-s: 28px;
  --lumo-size-m: 32px;                   /* Lumo: 2.25rem (36px) → Valo: 32px ✅ */
  --lumo-size-l: 36px;
  --lumo-size-xl: 44px;
  
  /* Text Field / Input padding */
  --lumo-text-field-size: 32px;
}


/* 
=====================================================
Global Styles
===================================================== 
*/
html {
  background-color: var(--fl-primary-color);
  font-family: var(--fl-font-family);
  font-size: var(--fl-font-size);
  font-weight: var(--fl-font-weight);
  color: var(--fl-font-color);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--fl-primary-color);
  overflow: hidden;
}

/* =====================================================
   GLOBAL COMPONENT FONT SIZE OVERRIDES
   Vaadin 24 bileşenlerinin Shadow DOM içindeki font boyutları
   ===================================================== */

/* TextField, TextArea, PasswordField */
vaadin-text-field::part(input-field) {
  font-size: 12px;
}
vaadin-text-field::part(value) {
  font-size: 12px;
}
vaadin-text-area::part(input-field) {
  font-size: 12px;
}
vaadin-password-field::part(input-field) {
  font-size: 12px;
}

/* ComboBox, Select */
vaadin-combo-box::part(input-field) {
  font-size: 12px;
}
vaadin-combo-box-item {
  font-size: 12px;
}
vaadin-select::part(input-field) {
  font-size: 12px;
}
vaadin-select-item {
  font-size: 12px;
}

/* DatePicker, TimePicker */
vaadin-date-picker::part(input-field) {
  font-size: 12px;
}
vaadin-time-picker::part(input-field) {
  font-size: 12px;
}

/* Button */
vaadin-button {
  font-size: 12px;
}
vaadin-button::part(label) {
  font-size: 12px;
}

/* Checkbox, RadioButton */
vaadin-checkbox::part(label) {
  font-size: 12px;
}
vaadin-radio-button::part(label) {
  font-size: 12px;
}

/* Labels and Spans */
vaadin-form-item::part(label) {
  font-size: 12px;
}
vaadin-text-field::part(label) {
  font-size: 12px;
}
vaadin-combo-box::part(label) {
  font-size: 12px;
}
vaadin-select::part(label) {
  font-size: 12px;
}
vaadin-date-picker::part(label) {
  font-size: 12px;
}

/* Tabs */
vaadin-tab {
  font-size: 12px;
}

/* Menu Items */
vaadin-context-menu-item {
  font-size: 12px;
}
vaadin-menu-bar-item {
  font-size: 12px;
}

/* Notification */
vaadin-notification-card {
  font-size: 12px;
}

/* Dialog */
vaadin-dialog-overlay::part(title) {
  font-size: 14px;
}
vaadin-dialog-overlay::part(content) {
  font-size: 12px;
}

/* Tooltip */
vaadin-tooltip-overlay {
  font-size: 11px;
}

/* Grid - hücre içerikleri */
vaadin-grid {
  font-size: 12px;
}
vaadin-grid::part(cell) {
  font-size: 12px;
}
vaadin-grid::part(header-cell) {
  font-size: 12px;
}

/* Upload */
vaadin-upload::part(drop-label) {
  font-size: 12px;
}
vaadin-upload-file {
  font-size: 12px;
}

/* Progress Bar */
vaadin-progress-bar::part(value) {
  font-size: 11px;
}

/* Message component */
vaadin-message::part(content) {
  font-size: 12px;
}

/* Details/Accordion */
vaadin-details::part(summary) {
  font-size: 12px;
}
vaadin-details::part(content) {
  font-size: 12px;
}
vaadin-accordion-heading {
  font-size: 12px;
}

vaadin-app-layout {
  width: 100%;
  height: 100vh;
}

/* =====================================================
   IMPORTANT THEME NOTE
   -----------------------------------------------------
   Do NOT force all layouts to be full width or zero-gap.
   That breaks Vaadin's spacing/padding theme variants and causes
   header layouts (and many other views) to misalign.
   We instead scope full width/height to Vaadin's own flags:
   - data-width-full is set when setWidthFull()/setSizeFull() is used
   - data-height-full is set when setHeightFull()/setSizeFull() is used
   ===================================================== */

vaadin-horizontal-layout,
vaadin-vertical-layout {
  margin: 0;
  padding: 0;
}

vaadin-horizontal-layout[data-width-full],
vaadin-vertical-layout[data-width-full] {
  width: 100%;
}

vaadin-horizontal-layout[data-height-full],
vaadin-vertical-layout[data-height-full] {
  height: 100%;
}

vaadin-app-layout>vaadin-horizontal-layout {
  height: 100vh;
}

vaadin-grid vaadin-horizontal-layout,
vaadin-grid flow-component-renderer vaadin-horizontal-layout {
  height: auto !important;
}

/* =====================================================
   Login View Styles
   ===================================================== */

/* Note: Detailed login styles are in components/login.css */

/* =====================================================
   General Layout Classes
   ===================================================== */

/* =====================================================
   Recaptcha
   ===================================================== */
.v-recaptcha-hidden-label {
  display: none;
}

/* =====================================================
   Application Layout Styles (from faturalab.scss)
   ===================================================== */

.zoomContainer {
  z-index: 99999;
}

.white-label-dashboard-title {
  padding-top: 0.99%;
}

.separator {
  font-size: 14px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
}

.autosizecolumn {
  min-width: 140px;
  max-width: 225px;
}

.zoomimage-mw590-mh350 {
  max-height: 350px;
  max-width: 590px;
}

vaadin-vertical-layout.v-panel,
.v-panel {
  box-shadow: none;
  border: none;
}

.v-panel-content {
  background: none;
  border: none;
  box-shadow: none;
}

.aggrement-text {
  font-size: 10px;
  /* Light theme: link altı her zaman çizili olmalı */
  text-decoration: underline;
}

/* LUMO_TERTIARY_INLINE butonları (SignUpView) */
vaadin-button.aggrement-text::part(label) {
  text-decoration: underline;
}

/* =====================================================
   Menubar Popup Styles
   ===================================================== */

vaadin-context-menu-overlay.v-menubar-popup {
  width: 81.5px;
  padding: 2px;
  margin: 2px 0 0 1px;
}

vaadin-item.v-menubar-menuitem {
  padding-left: 5px;
  padding-right: 5px;
  font-size: smaller;
  font-weight: bold;
}

/* Vaadin 24 overlay and items */
vaadin-menu-bar-overlay {
  width: 82px;
  padding: 2px;
  margin: 2px 0 0 1px;
}

vaadin-menu-bar-overlay vaadin-menu-bar-item {
  padding-left: 5px;
  padding-right: 5px;
  font-size: smaller;
  font-weight: bold;
}

/* =====================================================
   Information Section
   ===================================================== */

.information-section .banner-info-item {
  padding: 3px;
  margin-top: 5px;
  background-color: #EEEEEE;
}

.information-section .banner-info-item .v-caption {
  display: none;
}

.information-section .banner-warning-item {
  padding: 3px;
  margin-top: 5px;
  background-color: #FFF8C4;
}

.information-section .banner-warning-item .v-caption {
  display: none;
}

.information-section .banner {
  cursor: pointer;
}

/* =====================================================
   Profile and Icon Pictures
   ===================================================== */

.profile-pic img {
  border-radius: 50px;
  width: 58px;
  height: 58px;
}

.icon-pic img {
  border-radius: 90px;
  width: 145px;
  height: 50px;
  margin: auto;
}

.user-change-pic img {
  width: 22px;
  height: 22px;
  margin-top: -34px;
  margin-left: 22px;
  border-radius: 50%;
}

/* Vaadin 24: ensure slot-based icons get correct sizing/margins */
vaadin-button.user-change-pic::part(prefix) {
  margin-top: -34px;
  margin-left: 22px;
}

vaadin-button.user-change-pic img[slot="prefix"] {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
}

/* Profile picture (Flow) */
vaadin-button.profile-pic img[slot="prefix"] {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
}

/* Icon picture (Flow) */
vaadin-button.icon-pic img[slot="prefix"] {
  width: 145px !important;
  height: 50px !important;
  border-radius: 90px !important;
  margin: auto;
}

/* =====================================================
   Offer Labels
   ===================================================== */

.anonim-offer .v-label,
.company-offer .v-label {
  background-color: #D6D8DA;
  color: #FFFFFF;
  font-weight: bold;
  padding: 3px;
  border-radius: 10px;
}

.best-offer .v-label,
.best-offer span {
  background-color: #70A334;
  color: #FFFFFF;
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 20px;
}

.not-best-offer .v-label,
.not-best-offer span {
  background-color: ORANGE;
  color: #000000;
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 20px;
}

.exist-contract {
  color: #70A334;
  font-weight: bold;
}

.not-exist-contract {
  color: #353F49;
}

/* =====================================================
   Left and Right Panel Layouts (Login/Register)
   ===================================================== */

/* =====================================================
   Form Styles
   ===================================================== */

.form .v-caption-combobox {
  display: none;
}

/* Vaadin 24 equivalent */
.form vaadin-combo-box::part(label) {
  display: none;
}

.signup-form {
  margin-top: 20px;
  padding-right: 50px;
}

.signup-form .v-caption-g-strength-meter {
  display: none;
}

/* Vaadin 24 equivalent (custom component) */
.signup-form g-strength-meter::part(label) {
  display: none;
}

.form-title-label {
  font-size: 17px;
  color: #00AEEF;
  margin-bottom: 10px;
}

vaadin-button.logo {
  position: absolute;
  top: 10px;
  left: 41px;
  padding: 0;
  z-index: 100;
}

/* MainView logo icon image (prefix slot) */
vaadin-button.logo img[slot="prefix"] {
  height: 38px !important;
}

/* =====================================================
   Special Labels
   ===================================================== */

.amount-label {
  font-weight: bold;
  color: #70A334;
}

.two-factor-auth-input {
  font-size: 24px;
  text-align: center;
  letter-spacing: 8px;
  padding-left: 16px;
}

.custom-form-caption {
  font-weight: bold;
  color: #353F49;
  vertical-align: middle;
  line-height: 25px;
  font-size: 13px;
}

/* Vaadin 24 equivalents */
.weighted-average-day-label {
  color: #FFFFFF;
  height: 22px;
  padding: 5px;
  font-weight: bold;
  background-color: #F58220;
  border-radius: 20px;
  text-align: center;
}



.remaining-day-label {
  color: #FFFFFF;
  padding: 2px 5px;
  font-weight: bold;
  background-color: #F58220;
  border-radius: 20px;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
}

.red-remaining-time-label {
  color: RED;
  border: 1px solid RED;
  font-weight: bold;
  background-color: transparent;
  border-radius: 20px;
  text-align: center;
}

.remaining-time-label {
  color: #ACB237;
  border: 1px solid #ACB237;
  font-weight: bold;
  background-color: transparent;
  border-radius: 20px;
  text-align: center;
}

/* =====================================================
   Layout Specific Styles
   ===================================================== */

.due-date-layout .v-slot {
  padding-left: 2px;
  padding-right: 2px;
}

/* Vaadin 24 equivalent */
.due-date-layout {
  gap: 4px !important;
}

.due-date-layout>* {
  padding: 0;
  margin: 0;
}

.due-date-layout .due-date-paper-img {
  width: 14px;
  height: 16px;
}

.auction-history-header {
  margin-bottom: 0;
  padding-left: 11px;
}

.auction-history-header span {
  margin-right: 25px;
}

.auction-history-header.selected {
  font-weight: bold;
}

.invoiceno-layout .v-slot {
  padding-left: 2px;
  padding-right: 2px;
}

/* Vaadin 24 equivalent */
.invoiceno-layout>* {
  padding-left: 2px;
  padding-right: 2px;
}

.v-slot-footer {
  border-top: 1px solid #AFAFAF;
  background-color: white;
  padding-left: 20px;
}

/* Vaadin 24 equivalent */
[slot="footer"] {
  border-top: 1px solid #AFAFAF;
  background-color: white;
  padding-left: 20px;
}



/* =====================================================
   Form Layout Styles
   ===================================================== */

vaadin-form-layout .v-formlayout-captioncell {
  vertical-align: top;
  padding-top: 5px;
}

vaadin-form-layout .v-formlayout-captioncell span {
  font-weight: bold;
  color: #353F49;
  vertical-align: middle;
  line-height: 25px;
}

/* Vaadin 24 equivalents */
vaadin-form-item::part(label) {
  font-weight: bold;
  color: #353F49;
  vertical-align: middle;
  line-height: 25px;
  padding-top: 5px;
}

vaadin-form-item::part(content) {
  padding-top: 5px;
  color: #818285;
  vertical-align: middle;
  line-height: 25px;
}

.privacyPolicyLink span {
  text-decoration: underline;
}

.privacyPolicyLink {
  color: #00B1EB;
  font-weight: bold;
}

.privacyPolicyLink:hover {
  color: #84D0F5;
}

vaadin-form-layout .v-formlayout-contentcell {
  padding-top: 5px;
  color: #818285;
  vertical-align: middle;
  line-height: 25px;
}

vaadin-form-layout .v-formlayout-firstrow>td {
  padding-top: 0;
}

vaadin-form-layout .v-formlayout-lastrow>td {
  padding-bottom: 5px;
}



/* =====================================================
   Level Indicator
   ===================================================== */

.level-indicator-highlighted {
  border-width: 2px;
  border-style: solid;
  border-color: #999999;
}

.level-indicator-cell {
  border-width: 1px;
  border-style: solid;
  border-color: #BEBEBE;
}