/* Sign-in page. An @import is only honoured before any rule, so this one leads the
   file — the two further down are legacy and load by luck of the build. */
@import url('./view/login-view.css');

/* ============================================================
   PMS-BLUE  —  Compact Professional Theme  v5
   ============================================================ */

/* ── Force drawer width at the highest specificity level ────── */
html {
    --vaadin-app-layout-drawer-width: 260px;
}

/* ── CSS Variables: Blue (default) ─────────────────────────── */
:host, :root {
    --pms-primary:             #1565C0;
    --pms-primary-dark:        #0D47A1;
    --pms-accent:              #42A5F5;

    --pms-bg:                  #F4F6F9;
    --pms-surface:             #FFFFFF;
    --pms-surface-alt:         #EEF2F7;
    --pms-border:              #D0DCF0;

    --pms-text-primary:        #1A2332;
    --pms-text-secondary:      #4A5568;
    --pms-text-muted:          #8899AA;
    /* Semantic amounts (outstanding vs settled). Dark needs lighter shades:
       #D32F2F on the dark navy surface fails contrast. */
    --pms-danger:              #D32F2F;
    --pms-success:             #2E7D32;

    --pms-sidebar-bg:          #0D3880;
    --pms-sidebar-width:       260px;
    --pms-sidebar-text:        #C8D8F0;
    --pms-sidebar-hover:       #1A4FA0;
    --pms-sidebar-active:      #FFFFFF;
    --pms-sidebar-active-bg:   #1565C0;

    --pms-topbar-bg:           #1148A8;
    --pms-topbar-text:         #FFFFFF;
    --pms-topbar-border:       #0D3880;
    --pms-topbar-height:       46px;

    --pms-tab-text:            rgba(255,255,255,0.7);
    --pms-tab-selected-bg:     #FFFFFF;
    --pms-tab-selected-text:   #1148A8;
    --pms-tab-hover-bg:        rgba(255,255,255,0.12);

    --pms-subtab-bg:           #0B2E6E;
    --pms-subtab-text:         rgba(255,255,255,0.65);
    --pms-subtab-selected:     #1565C0;
    --pms-subtab-selected-text:#FFFFFF;
    --pms-subtab-border:       rgba(255,255,255,0.12);

    --pms-badge-bg:            rgba(255,255,255,0.15);
    --pms-badge-text:          #FFFFFF;
    --pms-badge-border:        rgba(255,255,255,0.3);

    --pms-shadow-sm:           0 1px 2px rgba(13,56,128,0.08);
    --pms-shadow-md:           0 2px 8px rgba(13,56,128,0.14);
    --pms-shadow-lg:           0 4px 16px rgba(13,56,128,0.18);

    --pms-row-height:          34px;
    --pms-font-size:           0.875rem;
    --pms-font-size-sm:        0.8125rem;
    --pms-font-size-xs:        0.75rem;
}

/* ── Dark variant ───────────────────────────────────────────── */
[data-theme="pms-dark"] {
    --pms-primary:             #64B5F6;
    --pms-accent:              #90CAF9;

    /* Page background — dark navy, not pure black */
    --pms-bg:                  #0F1923;
    /* Card/surface — slightly lighter for contrast */
    --pms-surface:             #1A2638;
    --pms-surface-alt:         #223044;
    --pms-border:              #2E4060;

    /* Text — bright white for primary, clear grey for secondary */
    --pms-text-primary:        #F0F4FF;
    --pms-text-secondary:      #A8BEDD;
    --pms-text-muted:          #6080A0;
    --pms-danger:              #FF6B6B;
    --pms-success:             #66BB6A;

    /* Sidebar — darker than surface but not black */
    --pms-sidebar-bg:          #0A1525;
    --pms-sidebar-text:        #A8BEDD;
    --pms-sidebar-hover:       #1A2E48;
    --pms-sidebar-active:      #FFFFFF;
    --pms-sidebar-active-bg:   #1565C0;

    /* Topbar */
    --pms-topbar-bg:           #0D1F35;
    --pms-topbar-text:         #F0F4FF;
    --pms-topbar-border:       #1A3050;

    /* Module tabs */
    --pms-tab-text:            rgba(168,190,221,0.85);
    --pms-tab-selected-bg:     #1565C0;
    --pms-tab-selected-text:   #FFFFFF;
    --pms-tab-hover-bg:        rgba(100,181,246,0.15);

    /* Sub-tabs */
    --pms-subtab-bg:           #081220;
    --pms-subtab-text:         #7090B8;
    --pms-subtab-selected:     #1565C0;
    --pms-subtab-selected-text:#FFFFFF;
    --pms-subtab-border:       rgba(46,64,96,0.8);

    /* Badge */
    --pms-badge-bg:            rgba(100,181,246,0.2);
    --pms-badge-text:          #90CAF9;
    --pms-badge-border:        rgba(100,181,246,0.4);

    --pms-shadow-sm:           0 1px 3px rgba(0,0,0,0.4);
    --pms-shadow-md:           0 2px 10px rgba(0,0,0,0.5);
    --pms-shadow-lg:           0 4px 20px rgba(0,0,0,0.6);
}

/* ── Green variant ──────────────────────────────────────────── */
[data-theme="pms-green"] {
    --pms-primary:             #2E7D32;
    --pms-accent:              #66BB6A;
    --pms-bg:                  #F3F8F3;
    --pms-surface:             #FFFFFF;
    --pms-surface-alt:         #EBF4EB;
    --pms-border:              #C3DFC3;
    --pms-text-primary:        #1A2E1A;
    --pms-text-secondary:      #3D5C3D;
    --pms-text-muted:          #7A9A7A;
    --pms-danger:              #D32F2F;
    --pms-success:             #2E7D32;
    --pms-sidebar-bg:          #163A18;
    --pms-sidebar-text:        #90C090;
    --pms-sidebar-hover:       #1E4E20;
    --pms-sidebar-active:      #FFFFFF;
    --pms-sidebar-active-bg:   #2E7D32;
    --pms-topbar-bg:           #1E5220;
    --pms-topbar-text:         #FFFFFF;
    --pms-topbar-border:       #163A18;
    --pms-tab-text:            rgba(255,255,255,0.65);
    --pms-tab-selected-bg:     #FFFFFF;
    --pms-tab-selected-text:   #1E5220;
    --pms-tab-hover-bg:        rgba(255,255,255,0.12);
    --pms-subtab-bg:           #0F2910;
    --pms-subtab-text:         rgba(144,192,144,0.8);
    --pms-subtab-selected:     #2E7D32;
    --pms-subtab-selected-text:#FFFFFF;
    --pms-subtab-border:       rgba(255,255,255,0.12);
    --pms-badge-bg:            rgba(255,255,255,0.15);
    --pms-badge-text:          #FFFFFF;
    --pms-badge-border:        rgba(255,255,255,0.3);
    --pms-shadow-sm:           0 1px 2px rgba(27,94,32,0.08);
    --pms-shadow-md:           0 2px 8px rgba(27,94,32,0.14);
    --pms-shadow-lg:           0 4px 16px rgba(27,94,32,0.18);
}

/* ============================================================
   VAADIN APP LAYOUT — drawer width override
   All three approaches to guarantee 260px
   ============================================================ */
html,
html body,
vaadin-app-layout {
    --vaadin-app-layout-drawer-width: 260px !important;
}

vaadin-app-layout::part(drawer) {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    overflow: hidden !important;
    background-color: var(--pms-sidebar-bg) !important;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body, html {
    background-color: var(--pms-bg) !important;
    color: var(--pms-text-primary) !important;
    font-size: var(--pms-font-size) !important;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.app-topbar {
    background-color: var(--pms-topbar-bg) !important;
    color: var(--pms-topbar-text) !important;
    border-bottom: 1px solid var(--pms-topbar-border) !important;
    box-shadow: var(--pms-shadow-md) !important;
    padding: 0 8px 0 4px !important;
    height: var(--pms-topbar-height) !important;
    min-height: var(--pms-topbar-height) !important;
    max-height: var(--pms-topbar-height) !important;
    gap: 6px !important;
}

vaadin-drawer-toggle {
    color: var(--pms-topbar-text) !important;
    --lumo-icon-size-m: 18px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   COMPANY BADGE
   ============================================================ */
.current-company-badge {
    background-color: var(--pms-badge-bg) !important;
    color: var(--pms-badge-text) !important;
    border: 1px solid var(--pms-badge-border) !important;
    border-radius: 3px !important;
    padding: 2px 8px !important;
    font-size: var(--pms-font-size-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   MODULE TABS (Level 1)
   ============================================================ */
.top-tabs-host {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    height: var(--pms-topbar-height) !important;
    min-width: 0 !important;
}

.premium-module-tabs {
    --lumo-contrast-5pct: transparent !important;
    /* Suppress Vaadin default top-border indicator */
    --lumo-primary-color: transparent !important;
    height: var(--pms-topbar-height) !important;
    background: transparent !important;
}

.premium-module-tabs vaadin-tab {
    color: var(--pms-tab-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0 12px !important;
    height: var(--pms-topbar-height) !important;
    min-height: var(--pms-topbar-height) !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.premium-module-tabs vaadin-tab:hover {
    background-color: var(--pms-tab-hover-bg) !important;
    color: #FFFFFF !important;
}

.premium-module-tabs vaadin-tab[selected] {
    background-color: var(--pms-tab-selected-bg) !important;
    color: var(--pms-tab-selected-text) !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 3px solid var(--pms-accent) !important;
    box-shadow: inset 0 -3px 0 0 var(--pms-accent) !important;
    padding-top: 6px !important;
    border-radius: 4px 4px 0 0 !important;
    margin-top: 4px !important;
}

/* Override Vaadin's default top indicator via shadow part */
.premium-module-tabs vaadin-tab[selected]::before,
.premium-module-tabs vaadin-tab[selected]::after {
    display: none !important;
}

.premium-module-tabs vaadin-tab::part(base) {
    border-top: none !important;
}

.premium-module-tabs vaadin-tab[selected]::part(base) {
    border-top: none !important;
    border-bottom: 3px solid var(--pms-accent) !important;
}

/* ============================================================
   USER MENU & THEME BUTTON
   ============================================================ */
.top-user-menu {
    color: var(--pms-topbar-text) !important;
    flex-shrink: 0 !important;
}

.theme-toggle-btn {
    color: var(--pms-topbar-text) !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 3px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 6px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.22) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
    background-color: var(--pms-sidebar-bg) !important;
    width: 260px !important;
    min-width: 260px !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   SUB-TABS (Level 2)
   Each tab = 260 / 3 = 86.6px → use 86px + 1px border trick
   ============================================================ */
.premium-sub-tabs {
    width: 260px !important;
    min-width: 260px !important;
    background-color: var(--pms-subtab-bg) !important;
    border-bottom: 1px solid var(--pms-subtab-border) !important;
    --lumo-contrast-5pct: transparent !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The inner tab row — force horizontal, no wrap */
.premium-sub-tabs [part="tabs"],
.premium-sub-tabs [role="tablist"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 260px !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.premium-sub-tabs vaadin-tab {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    color: var(--pms-subtab-text) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    padding: 0 2px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border-right: 1px solid var(--pms-subtab-border) !important;
    cursor: pointer !important;
    transition: background-color 0.12s, color 0.12s !important;
}

.premium-sub-tabs vaadin-tab:last-child {
    border-right: none !important;
}

.premium-sub-tabs vaadin-tab:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #FFFFFF !important;
}

.premium-sub-tabs vaadin-tab[selected] {
    background-color: var(--pms-subtab-selected) !important;
    color: var(--pms-subtab-selected-text) !important;
    font-weight: 700 !important;
}

/* ============================================================
   MENU ITEMS (Level 3) — LEFT aligned
   ============================================================ */
.premium-menu-item {
    background: transparent !important;
    color: var(--pms-sidebar-text) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 260px !important;
    padding: 0 8px 0 16px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.825rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    border-left: 2px solid transparent !important;
    transition: background-color 0.12s, color 0.12s,
                border-left-color 0.12s, padding-left 0.12s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    --lumo-button-justify-content: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.premium-menu-item::part(label) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex: 1 !important;
}

.premium-menu-item::part(button) {
    justify-content: flex-start !important;
    padding-left: 0 !important;
}

.premium-menu-item:hover {
    background-color: var(--pms-sidebar-hover) !important;
    color: #FFFFFF !important;
    border-left-color: var(--pms-accent) !important;
    padding-left: 20px !important;
}

.premium-menu-item-active {
    background-color: var(--pms-sidebar-active-bg) !important;
    color: var(--pms-sidebar-active) !important;
    font-weight: 600 !important;
    border-left-color: var(--pms-accent) !important;
    padding-left: 20px !important;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.app-content {
    background-color: var(--pms-bg) !important;
    padding: 12px 16px !important;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
/* Clarion BOXED group: a titled box around a set of related fields */
.pm-form-group {
    background-color: var(--pms-surface) !important;
    border: 1px solid var(--pms-border) !important;
    border-radius: 6px !important;
    padding: 8px 12px 12px 12px !important;
    box-shadow: var(--pms-shadow-sm) !important;
}

.pm-form-group h4 {
    margin: 0 0 8px 0 !important;
    font-size: var(--lumo-font-size-s) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lumo-secondary-text-color) !important;
}

.simple-search-bar {
    background-color: var(--pms-surface) !important;
    border: 1px solid var(--pms-border) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
    box-shadow: var(--pms-shadow-sm) !important;
    gap: 6px !important;
    align-items: center !important;
}

/* Right-justified page title shown at the end of the search bar.
   margin-left: auto pushes it to the rightmost position inside the flex hbox. */
.page-title {
    margin: 0 8px 0 auto !important;
    color: var(--pms-text-secondary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* ============================================================
   BUTTONS PANEL
   ============================================================ */
.buttons-panel {
    background-color: var(--pms-surface-alt) !important;
    border: 1px solid var(--pms-border) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    min-height: 36px !important;
    align-items: center !important;
}

.buttons-panel vaadin-button,
.buttons-panel jmix-button {
    --lumo-button-size: 26px !important;
    font-size: var(--pms-font-size-sm) !important;
    height: 26px !important;
}

/* ============================================================
   DATA GRID
   ============================================================ */
vaadin-grid {
    border: 1px solid var(--pms-border) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: var(--pms-shadow-sm) !important;
    background-color: var(--pms-surface) !important;
    font-size: var(--pms-font-size) !important;
}

vaadin-grid::part(row) {
    min-height: var(--pms-row-height) !important;
}

vaadin-grid::part(cell) {
    padding: 0 8px !important;
    min-height: var(--pms-row-height) !important;
}

/* Vertical line between columns (rightmost cell intentionally has no border) */
vaadin-grid::part(cell),
vaadin-grid::part(header-cell),
vaadin-grid::part(footer-cell) {
    border-right: 1px solid var(--pms-border) !important;
}
vaadin-grid::part(cell):last-child,
vaadin-grid::part(header-cell):last-child,
vaadin-grid::part(footer-cell):last-child {
    border-right: none !important;
}

/* Hide the visible resize-handle bar — our border-right already provides
   the visual separator, so the resizer would look like a second line.
   The drag area remains functional; only its appearance is suppressed. */
vaadin-grid::part(resize-handle) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
vaadin-grid::part(resize-handle)::before,
vaadin-grid::part(resize-handle)::after {
    background: transparent !important;
}

vaadin-grid::part(header-cell) {
    background-color: var(--pms-surface-alt) !important;
    color: var(--pms-text-secondary) !important;
    /* Match the body cell font-size so em-based column widths (e.g. width="9em")
       resolve to the same pixel width in the header and the body. A smaller
       header font shrinks the em unit and drifts every column out of alignment.
       The visible header label size is controlled by vaadin-grid-cell-content. */
    font-size: var(--pms-font-size) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 0 8px !important;
    min-height: 28px !important;
    border-bottom: 2px solid var(--pms-border) !important;
}

vaadin-grid::part(even-row) {
    background-color: var(--pms-surface) !important;
}

vaadin-grid::part(odd-row) {
    background-color: var(--pms-surface-alt) !important;
}

vaadin-grid::part(selected-row) {
    background-color: #DBEAFE !important;
}

[data-theme="pms-dark"] vaadin-grid::part(selected-row) {
    background-color: #1E3A5F !important;
}

/* Soft-deleted rows — light red */
vaadin-grid::part(cell row-deleted) {
    background-color: #FFEBEE !important;
}

[data-theme="pms-dark"] vaadin-grid::part(cell row-deleted) {
    background-color: #4A1A1A !important;
}

/* e-Invoice validated rows — light green */
vaadin-grid::part(cell row-validated) {
    background-color: #E8F5E9 !important;
}

[data-theme="pms-dark"] vaadin-grid::part(cell row-validated) {
    background-color: #1A3A1A !important;
}

vaadin-grid-cell-content {
    color: var(--pms-text-primary) !important;
    font-size: var(--pms-font-size) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
jmix-simple-pagination {
    font-size: var(--pms-font-size-sm) !important;
    color: var(--pms-text-secondary) !important;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
vaadin-text-field,
jmix-typed-text-field,
vaadin-date-picker {
    --lumo-text-field-size: 28px !important;
    font-size: var(--pms-font-size) !important;
}

vaadin-form-layout {
    --lumo-space-m: 6px !important;
}

/* ============================================================
   LHDN E-INVOICE REQUIRED FIELDS  (customers.detail)
   MistyRose tint on fields the buyer party requires for a valid
   MyInvois submission (mapBuyer require()/throw set): custname,
   e-invoice customer type, identification type + id, TIN, address
   line 1, city, state code, contact no.
   Applied via classNames="lhdn-required"; works on text field,
   select and date picker (all expose the input-field part).
   ============================================================ */
.lhdn-required::part(input-field) {
    background-color: #FFE4E1 !important;
}
/* Keep the value readable on the pink tint in dark mode. */
.lhdn-required input,
.lhdn-required::part(value) {
    color: #1A2332 !important;
}

/* ============================================================
   DIALOG
   ============================================================ */
vaadin-dialog-overlay::part(overlay) {
    border-radius: 6px !important;
    box-shadow: var(--pms-shadow-lg) !important;
}

/* ============================================================
   WARNING DIALOG  (com.company.pmsmain.util.WarningDialog)
   Overlay theme "pms-warning" + .pms-warn-* light-DOM classes.
   ============================================================ */
vaadin-dialog-overlay[theme~="pms-warning"]::part(overlay) {
    width: 30em !important;
    max-width: 92vw !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;             /* clip band + hazard stripe to corners */
    box-shadow: var(--pms-shadow-lg) !important;
}
vaadin-dialog-overlay[theme~="pms-warning"]::part(content) {
    padding: 0 !important;
}

.pms-warn-root {
    display: flex;
    flex-direction: column;
}

/* Amber header band */
.pms-warn-band {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 46px 18px 18px;            /* extra top room for the hazard stripe + right room for the X */
    background: linear-gradient(135deg, #f5c518 0%, #e0ad00 100%);
    color: #1a1505;
}
/* Hazard-stripe top edge */
.pms-warn-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(45deg,
        #1a1505 0, #1a1505 12px,
        #f5c518 12px, #f5c518 24px);
}
.pms-warn-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    color: #1a1505;
}
.pms-warn-textcol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pms-warn-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: #1a1505;
}
.pms-warn-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #3a2f0a;
}

/* Close (X) in the band corner */
vaadin-button.pms-warn-x {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    color: #1a1505 !important;
    cursor: pointer;
}
vaadin-button.pms-warn-x:hover {
    background-color: rgba(26, 21, 5, 0.12) !important;
}

/* Footer button row */
.pms-warn-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: var(--pms-surface);
}
vaadin-button.pms-warn-dismiss {
    color: var(--pms-text-secondary) !important;
}
/* Dark primary action button */
vaadin-button.pms-warn-action {
    background-color: #1a1505 !important;
    color: #ffffff !important;
}
vaadin-button.pms-warn-action::part(label) {
    color: #ffffff !important;
}
vaadin-button.pms-warn-action:hover {
    background-color: #322817 !important;
}

/* Visible keyboard focus ring */
vaadin-button.pms-warn-x:focus-visible,
vaadin-button.pms-warn-dismiss:focus-visible,
vaadin-button.pms-warn-action:focus-visible {
    outline: 2px solid var(--pms-primary-dark);
    outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    vaadin-dialog-overlay[theme~="pms-warning"]::part(overlay),
    vaadin-dialog-overlay[theme~="pms-warning"]::part(backdrop) {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   WELCOME BOX
   ============================================================ */
.app-content h3 {
    color: var(--pms-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
}

/* ============================================================
   LUMO OVERRIDES
   ============================================================ */
:root {
    --lumo-space-xs:            2px      !important;
    --lumo-space-s:             4px      !important;
    --lumo-space-m:             8px      !important;
    --lumo-space-l:             12px     !important;
    --lumo-space-xl:            16px     !important;
    --lumo-font-size-s:         0.8125rem !important;
    --lumo-font-size-m:         0.875rem  !important;
    --lumo-font-size-l:         1rem      !important;
    --lumo-border-radius-m:     4px      !important;
    --lumo-border-radius-l:     6px      !important;
    --lumo-text-field-size:     28px     !important;
    --lumo-button-size:         28px     !important;
}

/* ============================================================
   DARK MODE — explicit overrides for Lumo-controlled elements
   ============================================================ */
[data-theme="pms-dark"] vaadin-grid {
    background-color: var(--pms-surface) !important;
    border-color: var(--pms-border) !important;
    --lumo-base-color: var(--pms-surface) !important;
    --lumo-body-text-color: var(--pms-text-primary) !important;
    --lumo-secondary-text-color: var(--pms-text-secondary) !important;
    --lumo-disabled-text-color: var(--pms-text-muted) !important;
    --lumo-contrast-5pct: var(--pms-surface-alt) !important;
    --lumo-contrast-10pct: var(--pms-border) !important;
}

[data-theme="pms-dark"] vaadin-grid::part(header-cell) {
    background-color: var(--pms-surface-alt) !important;
    color: var(--pms-text-secondary) !important;
    border-bottom-color: var(--pms-border) !important;
}

[data-theme="pms-dark"] vaadin-grid::part(even-row) {
    background-color: var(--pms-surface) !important;
}

[data-theme="pms-dark"] vaadin-grid::part(odd-row) {
    background-color: var(--pms-surface-alt) !important;
}

[data-theme="pms-dark"] vaadin-grid-cell-content {
    color: var(--pms-text-primary) !important;
}

/* Search bar dark */
[data-theme="pms-dark"] .pm-form-group {
    background-color: var(--pms-surface) !important;
    border-color: var(--pms-border) !important;
}

[data-theme="pms-dark"] .simple-search-bar {
    background-color: var(--pms-surface) !important;
    border-color: var(--pms-border) !important;
}

[data-theme="pms-dark"] .simple-search-bar vaadin-text-field,
[data-theme="pms-dark"] .simple-search-bar jmix-typed-text-field {
    --lumo-base-color: var(--pms-surface-alt) !important;
    --lumo-body-text-color: var(--pms-text-primary) !important;
    --lumo-contrast-10pct: var(--pms-border) !important;
}

/* Buttons panel dark */
[data-theme="pms-dark"] .buttons-panel {
    background-color: var(--pms-surface-alt) !important;
    border-color: var(--pms-border) !important;
}

/* General Lumo token overrides for dark mode */
[data-theme="pms-dark"] {
    --lumo-base-color:              var(--pms-surface) !important;
    --lumo-body-text-color:         var(--pms-text-primary) !important;
    --lumo-secondary-text-color:    var(--pms-text-secondary) !important;
    --lumo-disabled-text-color:     var(--pms-text-muted) !important;
    --lumo-header-text-color:       var(--pms-text-primary) !important;
    --lumo-contrast-5pct:           var(--pms-surface-alt) !important;
    --lumo-contrast-10pct:          var(--pms-border) !important;
    --lumo-contrast-20pct:          #3A5070 !important;
    --lumo-contrast-50pct:          #6080A0 !important;
    --lumo-contrast-90pct:          var(--pms-text-primary) !important;
    --lumo-tint-5pct:               rgba(240,244,255,0.05) !important;
    --lumo-tint-10pct:              rgba(240,244,255,0.10) !important;
    --lumo-primary-color:           var(--pms-primary) !important;
    --lumo-primary-text-color:      var(--pms-primary) !important;
    --lumo-primary-contrast-color:  #FFFFFF !important;
    --lumo-shade:                   var(--pms-bg) !important;
    --lumo-shade-5pct:              rgba(0,0,0,0.2) !important;
    --lumo-shade-10pct:             rgba(0,0,0,0.3) !important;
}

/* App content background dark */
[data-theme="pms-dark"] .app-content {
    background-color: var(--pms-bg) !important;
}

[data-theme="pms-dark"] body,
[data-theme="pms-dark"] html {
    background-color: var(--pms-bg) !important;
    color: var(--pms-text-primary) !important;
}

/* ============================================================
   WELCOME PAGE BACKGROUND
   The photo already carries the product name and version across its
   lower-left, so the welcome text stays top-left where the image is
   near-white and the two never collide. Needs !important: .app-content
   sets an important background-color that would otherwise hide the image.
   ============================================================ */
/* Jmix loads <initialLayout> as a plain Vaadin VerticalLayout, which is auto-height.
   #welcomeBox's height:100% therefore had no definite height to resolve against and
   collapsed to its min-height, leaving the photo as a band across the top.

   vaadin-app-layout gives its [content] div a definite height:100% (inside the host's
   navbar padding), so putting height:100% on the wrapper is what re-establishes the
   chain. vaadin-vertical-layout is already display:flex/column, so #welcomeBox then
   grows via flex — but that layout also defaults to align-items:flex-start, which is
   why the box still needs an explicit width:100% below. */
#initialLayout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 0;
}

#welcomeBox {
    background-image: url('./images/welcome-bg.png') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    width: 100% !important;
    flex: 1 1 auto;
    /* Floor for the case where the flex chain above is broken by a future layout
       change: still a usable banner rather than a collapsed strip. */
    min-height: 24rem;
    align-items: flex-start;
    justify-content: flex-start;
}

/* The photo is light in both themes, so keep dark-mode text readable on it
   rather than inverting the image. */
[data-theme="pms-dark"] #welcomeBox {
    background-color: transparent !important;
}

[data-theme="pms-dark"] #welcomeBox h3,
[data-theme="pms-dark"] #welcomeBox span {
    color: var(--pms-primary) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

@import url('./helpdesk.css');
@import url('./view/ai-chat.css');

vaadin-grid {
    /* Default theme variants for all grids */
}
vaadin-grid::part(cell) {
    border-right: 1px solid var(--lumo-contrast-10pct);
}

/* ── Markdown rendering inside Vaadin views (Help Desk guides) ──────────── */
.markdown-content {
    line-height: 1.6;
    color: var(--lumo-body-text-color);
}
.markdown-content h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    border-bottom: 2px solid var(--lumo-contrast-20pct);
    padding-bottom: 0.25rem;
}
.markdown-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
    color: var(--lumo-primary-text-color);
}
.markdown-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}
.markdown-content p {
    margin: 0.5rem 0;
}
.markdown-content code {
    background: var(--lumo-contrast-5pct);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.9em;
}
.markdown-content pre {
    background: var(--lumo-contrast-5pct);
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.markdown-content pre code {
    background: none;
    padding: 0;
}
.markdown-content table {
    border-collapse: collapse;
    margin: 0.75rem 0;
    width: 100%;
}
.markdown-content th, .markdown-content td {
    border: 1px solid var(--lumo-contrast-20pct);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.markdown-content th {
    background: var(--lumo-contrast-5pct);
    font-weight: 600;
}
.markdown-content blockquote {
    border-left: 3px solid var(--lumo-primary-color);
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0;
    color: var(--lumo-secondary-text-color);
    background: var(--lumo-contrast-5pct);
}
.markdown-content ul, .markdown-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
.markdown-content li {
    margin: 0.2rem 0;
}
.markdown-content hr {
    border: 0;
    border-top: 1px solid var(--lumo-contrast-20pct);
    margin: 1.5rem 0;
}
/* ============================================================
   GRID — numeric column header alignment
   column.getElement().setAttribute("theme","align-end") causes
   Vaadin to stamp theme~="align-end" onto every cell part in
   that column. ::part() can then filter on both part name and
   theme attribute to right-align only numeric header cells.
   ============================================================ */
vaadin-grid::part(header-cell) [theme~="align-end"],
vaadin-grid::part(header-cell)[theme~="align-end"] {
    justify-content: flex-end;
    text-align: right;
    width: 100%;
    display: flex;
}