/**
 * shared-dialog-styles.css
 * 
 * Yhteisiä tyylejä kaikille dialog-komponenteille
 * Sisältää yhteisen tumman teeman ja yleisiä dialog-tyylejä
 */

/* ============================================================================
   SHARED DIALOG THEME - Yhteinen tumma teema kaikille dialogeille
   ============================================================================ */

/* YLIKIRJOITA KAIKKI DIALOGIT - Korkeampi spesifisyys kuin fiscal-theme.css */
/* Kohdista kaikkiin dialogeihin, ei vain custom-dialog luokkaan */
html body .e-dialog,
body .e-dialog.e-dialog,
html body div.e-dialog,
.e-dialog[class*="e-dialog"],
div.e-dialog {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    border: 0 !important;
    color: #ffffff !important;
}

/* Custom-dialog spesifiset tyylit (lisäsuoja) */
html body div.e-dialog.custom-dialog,
body div.e-dialog.custom-dialog.e-dialog,
html body .e-dialog.custom-dialog.e-dialog,
.e-dialog.custom-dialog.e-dialog.e-dialog,
div.e-dialog.custom-dialog[class*="e-dialog"] {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    border: 0 !important;
    color: #ffffff !important;
}

/* KAIKKIEN DIALOGIEN sisäiset elementit - korkeampi spesifisyys */
html body .e-dialog > .e-dialog-scroller,
html body .e-dialog .e-dlg-overlay,
body .e-dialog.e-dialog .e-dialog-scroller,
html body div.e-dialog .e-dialog-scroller {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
}

/* KAIKKIEN DIALOGIEN otsikkopalkin tumma teema */
html body .e-dialog .e-dlg-header,
body .e-dialog.e-dialog .e-dlg-header,
html body div.e-dialog .e-dlg-header,
.e-dialog[class*="e-dialog"] .e-dlg-header {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    color: #ffffff !important;
}

/* KAIKKIEN DIALOGIEN sisällön tumma teema */
html body .e-dialog .e-dlg-content,
body .e-dialog.e-dialog .e-dlg-content,
html body div.e-dialog .e-dlg-content,
.e-dialog[class*="e-dialog"] .e-dlg-content,
html body .e-dialog .e-dlg-content > div {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    color: #ffffff !important;
}

/* Custom-dialog spesifiset sisäiset elementit (lisäsuoja) */
html body div.e-dialog.custom-dialog > .e-dialog-scroller,
html body div.e-dialog.custom-dialog .e-dlg-overlay,
body div.e-dialog.custom-dialog.e-dialog .e-dialog-scroller {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
}

html body div.e-dialog.custom-dialog .e-dlg-header,
body div.e-dialog.custom-dialog.e-dialog .e-dlg-header,
div.e-dialog.custom-dialog[class*="e-dialog"] .e-dlg-header {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    color: #ffffff !important;
}

html body div.e-dialog.custom-dialog .e-dlg-content,
body div.e-dialog.custom-dialog.e-dialog .e-dlg-content,
div.e-dialog.custom-dialog[class*="e-dialog"] .e-dlg-content,
html body div.e-dialog.custom-dialog .e-dlg-content > div {
    background: var(--color-light, #122938) !important;
    background-color: var(--color-light, #122938) !important;
    color: #ffffff !important;
}

/* ============================================================================
   SHARED SYNCFUSION STYLING - Yhteisiä Syncfusion-komponenttien tyylejä
   ============================================================================ */

/* TEKSTIVÄRIT DIALOGEISSA - EI pakota input-kenttiä */
.e-dialog h1,
.e-dialog h2,
.e-dialog h3,
.e-dialog h4,
.e-dialog h5,
.e-dialog h6,
.e-dialog div,
.e-dialog span,
.e-dialog p,
.e-dialog label,
.e-dialog td,
.e-dialog th {
    color: white !important;
}

/* INPUT-KENTÄT saavat oman värinsä */
.e-dialog input,
.e-dialog select,
.e-dialog textarea {
    color: black !important;
}

/* Checkboxien label-tekstit valkoisiksi (käytetty useissa dialogeissa) */
.e-checkbox-wrapper .e-label,
.e-dialog .e-checkbox-wrapper .e-label {
    color: white !important;
}

/* Taulukkojen tekstit valkoisiksi */
.e-dialog table,
.e-dialog table *,
.e-dialog tbody,
.e-dialog tbody *,
.e-dialog tr,
.e-dialog tr *,
.e-dialog td,
.e-dialog td *,
.e-dialog th,
.e-dialog th * {
    color: white !important;
}