@import url('./main-layout.css');
@import url('./views/Login/login-view.css');

html {

    --custom-image-shadow: 0 4px 10px 0 #7ca4bc, 0 6px 20px 0 #c4d5e0;
    --custom-box-shadow: #7ca4bc 0px 4px 8px 0px, #c4d5e0 0px 6px 20px 0px;

    --custom-border-color: 1px solid lightgray;
    --custom-background-app: white;

    --custom-color-sucess: rgb(20, 180, 50, 50);
    --custom-secondary-color: #57c785;

    --lumo-border-radius-s: 8px;
    --lumo-border-radius-m: 8px;
    --lumo-border-radius-l: 16px;
    --border-color: var(--custom-border-color);

    /*--lumo-font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif",*/
    /*Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;*/

    /*--lumo-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;*/

    --lumo-font-family: Tahoma, Verdana, Segoe, sans-serif;

    --lumo-border-radius: 16px;
    --lumo-primary-color: rgb(4, 60, 108);
    --lumo-primary-color-50pct: rgba(4, 60, 108, 0.5);
    --lumo-primary-color-10pct: rgba(4, 60, 108, 0.1);
    --lumo-primary-text-color: var(--lumo-primary-color);
    --lumo-error-text-color: rgb(220, 4, 12);
    --lumo-error-color-50pct: rgba(220, 4, 12, 0.5);
    --lumo-error-color-10pct: rgba(220, 4, 12, 0.1);
    --lumo-error-color: rgb(220, 4, 12);
    --lumo-success-color: rgb(20, 180, 50, 50);
    --lumo-success-color-10pct: var(--lumo-success-color);
    --vaadin-app-layout-drawer-background: var(--lumo-primary-color);
    --vaadin-input-field-error-color: var(--lumo-error-color);

    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.07);

    --background-color: white;
    --vaadin-input-field-background: #fff;

}
vaadin-text-area::part(input-field)
{
    border: var(--custom-border-color);
}

vaadin-time-picker::part(input-field)
{
    border: var(--custom-border-color);
}
vaadin-integer-field::part(input-field)
{
    border: var(--custom-border-color);
}

vaadin-grid::part(header-cell)
{
    font-weight: bold;
    font-size: 16px;
}
vaadin-notification-card::part(overlay){
    border-radius: var(--lumo-border-radius-l);
}
vaadin-notification-card::part(content) {
    border-radius: var(--lumo-border-radius-l);
    border: yellow;
}

vaadin-multi-select-combo-box-item::part(checkmark) {
    color: var(--lumo-success-color);
}
vaadin-multi-select-combo-box::part(input-field){
    border: var(--lumo-primary-color);
}

vaadin-multi-select-combo-box::part(label){
    color: var(--lumo-primary-color);
}
vaadin-text-field::part(input-field) {
    border: var(--custom-border-color)
}

vaadin-text-field::part(label) {
    color: var(--lumo-primary-color);
}

vaadin-text-field[focused]::part(input-field) {
    border-color: var(--lumo-primary-color-50pct);
}

vaadin-combo-box::part(input-field){
    border: var(--custom-border-color);
}
vaadin-combo-box[focused]::part(input-field){
    border: var(--custom-border-color);
}
vaadin-combo-box::part(label){
    color: var(--lumo-primary-color);
}

vaadin-date-picker::part(input-field) {
    border: var(--custom-border-color);
}
vaadin-date-picker::part(label) {
    color: var(--lumo-primary-color);
}
vaadin-date-picker[focused]::part(input-field) {
    border-color: var(--lumo-primary-color-50pct);
}

vaadin-email-field::part(input-field) {
    border: var(--custom-border-color);
}
vaadin-email-field[focused]::part(input-field) {
    border-color: var(--lumo-primary-color-50pct);
}
vaadin-email-field::part(label) {
    color: var(--lumo-primary-color);
}

vaadin-number-field::part(input-field) {
    border: var(--custom-border-color);
}

vaadin-password-field::part(input-field){
    border: var(--custom-border-color);
}
vaadin-password-field::part(label){
    color: var(--lumo-primary-color);
}
vaadin-password-field[focused]::part(input-field){
    border-color: var(--lumo-primary-color-50pct);
}
vaadin-multi-select-combo-box::part(input-field) {
    border: var(--custom-border-color);
}
vaadin-multi-select-combo-box::part(label) {
    color: var(--lumo-primary-color);
}
vaadin-multi-select-combo-box[focused]::part(input-field) {
    color: var(--lumo-primary-color-50pct);
}

vaadin-text-field::part(required-indicator) {
    color: var(--lumo-error-color);
}
vaadin-text-field[required]::part(required-indicator) {
    color: var(--lumo-error-color);
}

vaadin-app-layout::part(navbar) {
    background: var(--custom-background-app);
}
vaadin-grid::part(selected-row) {
    color: var(--lumo-primary-color-50pct);
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    --vaadin-input-field-value-color: black;
    -vaadin-tab: var(--lumo-primary-color)
}
vaadin-app-layout::part(drawer){
    background: var(--custom-background-app);
}

:host([theme~="dark"]),
[theme~="dark"] {
    /* Backgrounds */
    --custom-background-app: #1e1e2f;
    --vaadin-app-layout-drawer-background: var(--custom-background-app);
    --lumo-base-color: #1e1e2f;
    --lumo-shade-5pct: rgba(255, 255, 255, 0.05);
    --lumo-shade-10pct: rgba(255, 255, 255, 0.10);

    /* Typography */
    --lumo-body-text-color: #e0e0e0;
    --lumo-header-text-color: #ffffff;
    --vaadin-input-field-value-color: #ffffff;

    /* Primary Color */
    --lumo-primary-color: #00bcd4;
    --lumo-primary-color-50pct: rgba(0, 188, 212, 0.5);
    --lumo-primary-color-10pct: rgba(0, 188, 212, 0.1);
    --lumo-primary-text-color: #00bcd4;

    /* Error */
    --lumo-error-color: #ff5252;
    --lumo-error-color-10pct: rgba(255, 82, 82, 0.1);
    --lumo-error-color-50pct: rgba(255, 82, 82, 0.5);

    /* Success */
    --lumo-success-color: #4caf50;
    --lumo-success-color-10pct: rgba(76, 175, 80, 0.1);

    /* Borders & Radius */
    --custom-border-color: 1px solid #555;
    --lumo-border-radius: 12px;
    --lumo-border-radius-m: 8px;

    /* Shadows */
    --custom-box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 6px 20px;

    /* Tabs */
    --vaadin-tab-selected-text-color: var(--lumo-primary-text-color);
    --vaadin-tab-selected-background: #2b2b3c;
}

/*tabs*/
vaadin-tab[active]{
    color: var(--lumo-primary-color);
}
vaadin-tab[selected]::part(back-button)::after{
    color: var(--lumo-primary-color);
}
vaadin-tab[focused]::part(back-button)::after{
    color: var(--lumo-primary-color);
}





.remove-btn {
    color: white;
    border: 1px solid var(--lumo-primary-color);
    position: absolute;
    bottom: -6%;
    left: -16%;
    background: var(--lumo-error-color);
    border-radius: 100%;
    font-weight: bold;
    padding: 0;
    margin: 0;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    width: 16px;
}