@import url('./main-layout.css');
@import url('./views/dashboard-view.css');
@import url('./views/issues-view.css');
@import url('./views/driver-register-view.css');
@import url('./views/manage-vehicles-view.css');
@import url('./views/manage-drivers-view.css');
@import url('./views/manage-rides-view.css');
@import url('./views/setting-fares-view.css');
@import url('./views/manage-users-view.css');    
/*html {
      --lumo-font-size: 1rem;
      --lumo-font-size-xxxl: 1.75rem;
      --lumo-font-size-xxl: 1.375rem;
      --lumo-font-size-xl: 1.125rem;
      --lumo-font-size-l: 1rem;
      --lumo-font-size-m: 0.875rem;
      --lumo-font-size-s: 0.8125rem;
      --lumo-font-size-xs: 0.75rem;
      --lumo-font-size-xxs: 0.6875rem;
      --lumo-size-xl: 3rem;
      --lumo-size-l: 2.5rem;
      --lumo-size-m: 2rem;
      --lumo-size-s: 1.75rem;
      --lumo-size-xs: 1.5rem;
      --lumo-shade-5pct: rgba(33, 33, 33, 0.05);
      --lumo-shade-10pct: rgba(33, 33, 33, 0.1);
      --lumo-shade-20pct: rgba(33, 33, 33, 0.2);
      --lumo-shade-30pct: rgba(33, 33, 33, 0.3);
      --lumo-shade-40pct: rgba(33, 33, 33, 0.4);
      --lumo-shade-50pct: rgba(33, 33, 33, 0.5);
      --lumo-shade-60pct: rgba(33, 33, 33, 0.6);
      --lumo-shade-70pct: rgba(33, 33, 33, 0.7);
      --lumo-shade-80pct: rgba(33, 33, 33, 0.8);
      --lumo-shade-90pct: rgba(33, 33, 33, 0.9);
      --lumo-primary-color-50pct: rgba(235, 89, 5, 0.5);
      --lumo-primary-color-10pct: rgba(235, 89, 5, 0.1);
      --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
      --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
      --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
      --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
      --lumo-shade: hsl(0, 0%, 13%);
      --lumo-primary-color: hsl(22, 96%, 47%);
      --lumo-primary-text-color: hsl(22, 100%, 42%);
      --lumo-error-color: hsl(0, 81%, 50%);
      --lumo-error-text-color: hsl(0, 86%, 45%);
      --lumo-success-color: hsl(159, 76%, 57%);
      --lumo-success-contrast-color: hsl(159, 29%, 10%);
      --lumo-success-text-color: hsl(159, 61%, 40%);

    }
*/

html {
  /* Font scale nhỏ hơn mặc định chút */
  --lumo-font-size: 0.875rem;
  --lumo-font-size-xl: 1rem;
  --lumo-font-size-l: 0.9375rem;
  --lumo-font-size-m: 0.875rem;
  --lumo-font-size-s: 0.8125rem;
  --lumo-font-size-xs: 0.75rem;

  /* Giữ line height gọn */
  --lumo-line-height-m: 1.4;

  /* Component size (chiều cao nút, input, v.v.) */
  --lumo-size-xl: 2.75rem;
  --lumo-size-l: 2.25rem;
  --lumo-size-m: 1.875rem;
  --lumo-size-s: 1.625rem;
  --lumo-size-xs: 1.375rem;

  /* Khoảng cách giữa các phần tử */
  --lumo-space-xs: 0.25rem;
  --lumo-space-s: 0.5rem;
  --lumo-space-m: 0.75rem;
  --lumo-space-l: 1rem;
  --lumo-space-xl: 1.5rem;

  /* Bo góc & border nhỏ hơn */
  --lumo-border-radius: 6px;

  /* Giữ màu & theme như phiên bản trước */
  --lumo-base-color: #ffffff;
  --lumo-body-text-color: #111111;
  --lumo-primary-color: hsl(0, 0%, 7%);
  --lumo-primary-text-color: hsl(0, 0%, 7%);
  --lumo-success-color: hsl(167, 50%, 45%);
  --lumo-error-color: hsl(4, 78%, 60%);
}


/* -------- Component tuning -------- */

/* Buttons */
vaadin-button[theme~="primary"] {
  background-color: var(--lumo-primary-color);
  color: white;
  font-weight: 500;
}
vaadin-button[theme~="primary"]:hover {
  background-color: #2a2a2a;
}

/* Secondary buttons */
vaadin-button[theme~="tertiary"] {
  color: var(--lumo-primary-text-color);
}

/* Cards, panels, dialogs */
vaadin-card,
vaadin-dialog-overlay::part(overlay),
vaadin-panel {
  background-color: var(--lumo-contrast-5pct);
  color: var(--lumo-body-text-color);
}

/* Tables */
vaadin-grid {
  background-color: white;
  border: 1px solid var(--lumo-contrast-20pct);
}
vaadin-grid::part(header-cell) {
  /* background-color: var(--lumo-contrast-10pct); */
  font-weight: 600;
}

/* Sidebar / Drawer (nếu có dark background) */
[part="drawer"] {
  background-color: #111111;
  color: white;
}
[part="drawer"] vaadin-button,
[part="drawer"] a {
  color: #e0e0e0;
}
[part="drawer"] vaadin-button:hover {
  color: white;
}

/* Fix transparent dialog background */
vaadin-dialog-overlay::part(overlay) {
  background-color: #ffffff; /* Nền trắng rõ ràng */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  color: var(--lumo-body-text-color);
}

/* Đảm bảo content trong dialog cũng không bị trong suốt */
vaadin-dialog-overlay::part(content) {
  background-color: #ffffff;
}

/* Nếu bạn dùng vaadin-dialog[theme~="no-padding"] thì phần nội dung trong suốt */
vaadin-dialog-overlay::part(content) > * {
  background-color: #ffffff;
  border-radius: 8px;
}