/* ---------------------------------------------------------------------------
   ΑΠΕΝΤΟΜΩΤΙΚΗ ΠΕΛΛΑΣ brand skin over the DevExpress Fluent theme.

   Palette sampled from the company logo:
     #0E71B4  primary blue  (upper badge panel)   -> DevExpress primary ramp, step 90
     #2EAADC  cyan          (badge frame)          -> lighter primary steps
     #22BBEA  accent cyan   (insect artwork)
     #96BF0D  green         (lower badge panel)    -> success / positive ramp

   Loaded after DxResourceManager.RegisterTheme, so these variables win.
   --------------------------------------------------------------------------- */

:root {
    --pellas-blue: #0E71B4;
    --pellas-cyan: #2EAADC;
    --pellas-cyan-bright: #22BBEA;
    --pellas-green: #96BF0D;
}

/* Primary ramp, interpolated from the brand blue (step 90 is the brand colour itself). */
.dxbl-theme,
:root {
    --dxds-primary-10: #F2F8FC;
    --dxds-primary-20: #E1EFF8;
    --dxds-primary-30: #C6E0F1;
    --dxds-primary-40: #9CC9E6;
    --dxds-primary-50: #6FAFD8;
    --dxds-primary-60: #4E9BCE;
    --dxds-primary-70: #2EAADC;
    --dxds-primary-80: #1F84C4;
    --dxds-primary-90: #0E71B4;
    --dxds-primary-100: #0D68A6;
    --dxds-primary-110: #0B5C93;
    --dxds-primary-120: #0A5182;
    --dxds-primary-130: #084670;
    --dxds-primary-140: #073B5E;
    --dxds-primary-150: #06304D;
    --dxds-primary-160: #04253B;
    --dxds-primary-170: #031A29;

    /* Positive/success ramp keyed off the badge green. */
    --dxds-success-10: #F6FAE8;
    --dxds-success-20: #EAF3CB;
    --dxds-success-30: #D8E9A4;
    --dxds-success-40: #C3DC74;
    --dxds-success-50: #AECE47;
    --dxds-success-60: #A2C72B;
    --dxds-success-70: #9EC41C;
    --dxds-success-80: #9AC114;
    --dxds-success-90: #96BF0D;
    --dxds-success-100: #88AD0C;
    --dxds-success-110: #78990A;
    --dxds-success-120: #6A8709;
    --dxds-success-130: #5B7408;
    --dxds-success-140: #4C6106;
    --dxds-success-150: #3D4E05;
}

/* Legacy accent variables still referenced by a few DevExpress components. */
:root {
    --dxbl-accent-color: var(--pellas-blue);
    --dxbl-accent-bg: var(--pellas-blue);
    --dxbl-accent-contrast-color: #FFFFFF;
}

/* ---------------------------------------------------------------- density */

/* The SizeModeManager toggles these on <body>; they scale anything that is sized in rem. */
body.small-size {
    font-size: 0.875rem;
}

body.medium-size {
    font-size: 1rem;
}

body.large-size {
    font-size: 1.125rem;
}

/* ---------------------------------------------------------------- shared page chrome */

.page-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    width: 100%;
}

.page-title-text {
    color: var(--dxds-color-content-neutral-default-rest);
    font-size: var(--dxds-font-size-headline-md);
    font-weight: var(--dxds-font-weight-headline-default);
    line-height: var(--dxds-line-height-headline-md);
    margin: 0;
}

.page-subtitle-text {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-md);
    margin: 0;
}

.card-surface {
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

/* Virtual-scrolling grids need a bounded height or they grow without limit. */
.app-grid {
    height: clamp(20rem, calc(100vh - 20rem), 46rem);
}

.grid-actions {
    display: flex;
    gap: 0.25rem;
}

.popup-edit-form {
    min-width: min(46rem, 90vw);
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.section-heading {
    align-items: center;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    display: flex;
    font-size: var(--dxds-font-size-title-md);
    font-weight: 600;
    gap: 0.5rem;
    margin: 0;
    padding-bottom: 0.5rem;
}

.app-grid-tab {
    height: clamp(18rem, calc(100vh - 34rem), 40rem);
}

.section-title {
    font-size: var(--dxds-font-size-title-sm);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.upload-panel {
    display: flex;
    flex-direction: column;
}

.hint-text {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-caption-md);
    margin-top: 0.25rem;
}

.size-label {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-caption-md);
    white-space: nowrap;
}

.grid-actions {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

.grid-link {
    color: var(--dxds-color-content-primary-default-rest);
    font-weight: 600;
    text-decoration: none;
}

.grid-link:hover {
    text-decoration: underline;
}

.file-download-link {
    align-items: center;
    color: var(--dxds-color-content-primary-default-rest);
    display: inline-flex;
    gap: 0.375rem;
    max-width: 100%;
    text-decoration: none;
}

.file-download-link:hover {
    text-decoration: underline;
}

.file-download-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    border-radius: 1rem;
    display: inline-block;
    font-size: var(--dxds-font-size-caption-sm);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.125rem 0.625rem;
}

.badge-success {
    background: var(--dxds-color-surface-success-subdued-rest);
    color: var(--dxds-color-content-success-default-rest);
}

.badge-warning {
    background: var(--dxds-color-surface-warning-subdued-rest);
    color: var(--dxds-color-content-warning-default-rest);
}

.alert-info {
    background-color: var(--dxds-color-surface-info-subdued-rest);
    border-color: var(--dxds-color-border-info-default-rest);
    color: var(--dxds-color-content-info-default-rest);
}

/* Inline (non-blocking) banner variant used by AlertMessage. */
.alert-inline {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.alert-inline .alert-text {
    flex: 1 1 auto;
}

.popup-footer-actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------- error page */

.error-help {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-md);
    margin: 0 0 1rem;
}

.error-reference {
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
}

.error-reference-label {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-caption-md);
}

.error-reference-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--dxds-font-size-base-sm);
    overflow-wrap: anywhere;
}