/*https://vaadin.com/docs/latest/styling/application-theme*/

/*https://demo.vaadin.com/lumo-editor/*/

html {
    /* Gölge renkleri - koyu mavi tonları */
    --lumo-shade-5pct: rgba(28, 41, 59, 0.05);
    --lumo-shade-10pct: rgba(28, 41, 59, 0.1);
    --lumo-shade-20pct: rgba(28, 41, 59, 0.2);
    --lumo-shade-30pct: rgba(28, 41, 59, 0.3);
    --lumo-shade-40pct: rgba(28, 41, 59, 0.4);
    --lumo-shade-50pct: rgba(28, 41, 59, 0.5);
    --lumo-shade-60pct: rgba(28, 41, 59, 0.6);
    --lumo-shade-70pct: rgba(28, 41, 59, 0.7);
    --lumo-shade-80pct: rgba(28, 41, 59, 0.8);
    --lumo-shade-90pct: rgba(28, 41, 59, 0.9);

    /* Ana renk - koyu turkuaz (tıp alanında güven ve profesyonellik ifade eder) */
    --lumo-primary-text-color: rgb(0, 104, 116);
    --lumo-primary-color-50pct: rgba(0, 104, 116, 0.5);
    --lumo-primary-color-10pct: rgba(0, 104, 116, 0.1);

    /* Hata rengi - koyu kırmızı (tıbbi uyarılar için) */
    --lumo-error-text-color: rgb(190, 18, 18);
    --lumo-error-color-50pct: rgba(190, 18, 18, 0.5);
    --lumo-error-color-10pct: rgba(190, 18, 18, 0.1);

    /* Başarı rengi - yeşil (tamamlanan işlemler için) */
    --lumo-success-text-color: rgb(0, 133, 93);
    --lumo-success-color-50pct: rgba(0, 133, 93, 0.5);
    --lumo-success-color-10pct: rgba(0, 133, 93, 0.1);

    /* Ana HSL renkleri */
    --lumo-shade: hsl(215, 36%, 17%);
    --lumo-primary-color: hsl(185, 100%, 23%);
    --lumo-error-color: hsl(0, 83%, 41%);
    --lumo-success-color: hsl(164, 100%, 26%);
    --lumo-success-contrast-color: hsl(164, 100%, 96%);

    /* Arka plan rengi - açık gri (uzun süreli kullanımda göz yorgunluğunu azaltır) */
    --lumo-base-color: hsl(210, 10%, 98%);

    /* Metin renkleri */
    --lumo-header-text-color: hsl(215, 36%, 17%);
    --lumo-body-text-color: hsl(215, 20%, 25%);
    --lumo-secondary-text-color: hsl(215, 15%, 45%);
    --lumo-tertiary-text-color: hsl(215, 10%, 60%);

    /* Vurgu rengi - açık turkuaz (önemli bilgileri vurgulamak için) */
    --lumo-accent-color: hsl(185, 80%, 45%);
    --lumo-accent-color-50pct: hsla(185, 80%, 45%, 0.5);
    --lumo-accent-color-10pct: hsla(185, 80%, 45%, 0.1);

    /* Yazı tipi ayarları */
    --lumo-font-family: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Köşe yuvarlaklığı */
    --lumo-border-radius-s: 4px;
    --lumo-border-radius-m: 6px;
    --lumo-border-radius-l: 10px;

    /* Gölge efektleri */
    --lumo-box-shadow-xs: 0 1px 4px var(--lumo-shade-20pct);
    --lumo-box-shadow-s: 0 2px 6px var(--lumo-shade-20pct);
    --lumo-box-shadow-m: 0 4px 12px var(--lumo-shade-30pct);
    --lumo-box-shadow-l: 0 8px 24px var(--lumo-shade-40pct);
    --lumo-box-shadow-xl: 0 12px 48px var(--lumo-shade-50pct);
}

/* Özel sınıf tanımlamaları */
.patoloji-header {
    background-color: var(--lumo-primary-color);
    color: white;
}

.patoloji-section {
    border-left: 3px solid var(--lumo-primary-color);
    padding-left: 1rem;
}

.patoloji-highlight {
    background-color: var(--lumo-accent-color-10pct);
    border-radius: 4px;
    padding: 0.5rem;
}

/* Vaadin bileşenleri için özelleştirmeler */
/* Butonlar */
vaadin-button {
    background-color: var(--lumo-primary-color);
    color: white;
    font-weight: 500;
    border-radius: var(--lumo-border-radius-m);
    transition: background-color 0.2s, box-shadow 0.2s;
}

vaadin-button:hover {
    background-color: var(--lumo-primary-color-50pct);
    box-shadow: var(--lumo-box-shadow-s);
}

vaadin-button.secondary {
    background-color: transparent;
    color: var(--lumo-primary-color);
    border: 1px solid var(--lumo-primary-color);
}

vaadin-button.secondary:hover {
    background-color: var(--lumo-primary-color-10pct);
}

/* Formlar ve giriş alanları */
vaadin-text-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-combo-box::part(input-field) {
    border: 1px solid var(--lumo-shade-20pct);
    background-color: white;
    border-radius: var(--lumo-border-radius-s);
}

vaadin-text-field:hover::part(input-field),
vaadin-password-field:hover::part(input-field),
vaadin-text-area:hover::part(input-field),
vaadin-combo-box:hover::part(input-field) {
    border-color: var(--lumo-primary-color-50pct);
}

vaadin-text-field:focus-within::part(input-field),
vaadin-password-field:focus-within::part(input-field),
vaadin-text-area:focus-within::part(input-field),
vaadin-combo-box:focus-within::part(input-field) {
    border-color: var(--lumo-primary-color);
    box-shadow: 0 0 0 2px var(--lumo-primary-color-10pct);
}

/* Tablolar */
vaadin-grid {
    border-radius: var(--lumo-border-radius-m);
    overflow: hidden;
    box-shadow: var(--lumo-box-shadow-xs);
}

vaadin-grid::part(header-cell) {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    font-weight: 500;
}

vaadin-grid::part(row):hover {
    background-color: var(--lumo-shade-5pct);
}

/* Sekmeler */
vaadin-tabs {
    background-color: var(--lumo-base-color);
    border-bottom: 1px solid var(--lumo-shade-10pct);
}

vaadin-tab {
    color: var(--lumo-secondary-text-color);
    font-weight: 500;
    transition: color 0.2s, border-bottom 0.2s;
}

vaadin-tab:hover {
    color: var(--lumo-primary-text-color);
}

vaadin-tab[selected] {
    color: var(--lumo-primary-color);
    border-bottom: 2px solid var(--lumo-primary-color);
}

/* Diyaloglar */
vaadin-dialog-overlay {
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-xl);
}

vaadin-dialog-overlay::part(header) {
    background-color: var(--lumo-primary-color);
    color: white;
    padding: 1rem;
}

vaadin-dialog-overlay::part(content) {
    padding: 1.5rem;
}

vaadin-dialog-overlay::part(footer) {
    background-color: var(--lumo-shade-5pct);
    padding: 1rem;
    border-top: 1px solid var(--lumo-shade-10pct);
}

.selected-tool {
    background-color: var(--lumo-primary-color-50pct);
    color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-s)
}