/******************************************************************************
 LUWID CORE DESIGN SYSTEM
 Proyek: luwidcore-lib
 Lokasi: src/main/resources/META-INF/resources/themes/luwidcore-lib/styles.css
 ******************************************************************************
 MENGAPA DI TARUH DI META-INF?
 1. File ini berada di dalam Library (JAR). Agar project lain (seperti luwidlaundry) bisa "melihat" file ini melalui browser,
    Java mewajibkan aset statis diletakkan di folder /META-INF/resources/.
 2. Ini adalah standar "Servlet 3.0" agar file bisa diakses publik oleh server (Tomcat/Spring Boot) saat library ini di-import.

 CARA MENAMBAH/MENGGUNAKAN DI PROJECT BARU:
 ******************************************************************************
 1. Tambahkan dependency 'luwidcore-lib' di pom.xml project baru tersebut.
 2. Pastikan project baru menggunakan @Theme("nama-tema-lokal") di Java.
 3. Di folder frontend/themes/nama-tema-lokal/theme.json project baru, ubah jadi seperti ini:
    {
      "parent": "luwidcore-lib",
      "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ]
    }
 4. Selesai! Project baru akan langsung memiliki desain standar Luwid.
 ******************************************************************************/

@import url('main-layout.css');
@import url('card.css');

html {
    --lumo-primary-color: hsl(22, 96%, 47%);
    --lumo-primary-text-color: hsl(22, 100%, 42%);
    --lumo-primary-color-50pct: rgba(235, 89, 5, 0.5);
    --lumo-primary-color-10pct: rgba(235, 89, 5, 0.1);
    --lumo-error-color: hsl(0, 81%, 50%);
    --lumo-error-text-color: hsl(0, 86%, 45%);
    --lumo-success-color: hsl(159, 76%, 57%);
    --lumo-success-text-color: hsl(159, 61%, 40%);
    --lumo-border-radius-m: var(--lumo-border-radius-s);
}

[theme~="dark"] {
    --lumo-primary-color: hsl(22, 96%, 55%);
}


/* =========================================
   PERBAIKAN INPUT FIELDS (CUSTOM BORDER)
   ========================================= */

/* Target part input-field agar border hanya membungkus kotak input */
vaadin-text-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-text-area::part(input-field),
vaadin-password-field::part(input-field),
vaadin-select::part(input-field) {
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-s);
    background: var(--lumo-contrast-5pct);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Warna border saat fokus (Orange Luwid) */
vaadin-text-field[focused]::part(input-field),
vaadin-number-field[focused]::part(input-field),
vaadin-integer-field[focused]::part(input-field),
vaadin-combo-box[focused]::part(input-field),
vaadin-date-picker[focused]::part(input-field),
vaadin-select[focused]::part(input-field),
vaadin-text-area[focused]::part(input-field) {
    border-color: var(--lumo-primary-color);
    box-shadow: 0 0 0 1px var(--lumo-primary-color-10pct);
}

/* Hilangkan border default Lumo agar tidak terjadi double border */
vaadin-text-field,
vaadin-number-field,
vaadin-integer-field,
vaadin-combo-box,
vaadin-date-picker,
vaadin-time-picker,
vaadin-text-area,
vaadin-password-field,
vaadin-select {
    border: none;
    /* Padding TIDAK diset 0 agar tidak mepet di mobile */
}

/* =========================================
   CHECKBOX & RADIO BUTTON (LUWID STYLE)
   ========================================= */
vaadin-checkbox[checked]::part(checkbox),
vaadin-radio[checked]::part(radio) {
    background-color: var(--lumo-primary-color);
    border-color: var(--lumo-primary-color);
}

/* =========================================
   LUWID CARD & TYPOGRAPHY
   ========================================= */
.luwid-card {
    background-color: var(--lumo-base-color);
    color: var(--lumo-body-text-color);
    border-radius: 20px;
    box-shadow: var(--lumo-box-shadow-s);
    padding: 1.25rem;
    margin: 5px;
    border: 1px solid var(--lumo-contrast-10pct);
}

[theme~="dark"] .luwid-card {
    background-color: var(--lumo-contrast-5pct);
}

.judul-text {
    font-size: 24px;
    font-weight: bold;
    color: var(--lumo-header-text-color);
}

.deskripsi-text {
    font-size: 16px;
    color: var(--lumo-body-text-color);
}

@media (max-width: 600px) {
    .judul-text { font-size: 18px; line-height: 1.2; }
    .deskripsi-text { font-size: 13px; line-height: 1.4; }
}

/* =========================================
   DIALOG BACKDROP (BLUR EFFECT)
   ========================================= */
vaadin-dialog-overlay::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px);
}

vaadin-dialog-overlay::part(overlay) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
                0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

vaadin-confirm-dialog-overlay::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px);
}

vaadin-confirm-dialog-overlay::part(overlay) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
                0 20px 50px rgba(0, 0, 0, 0.6) !important;
}