/*
Copyright© 1999-2026 NETAPHOR SOFTWARE INC.  All Rights Reserved.
This file contains proprietary and confidential information and may not be
used or distributed in any form without express written consent
of NETAPHOR SOFTWARE INC.

LicenseServer — Application Styles
Design tokens (@font-face, :root variables, font-size, box-sizing) are in tokens.css,
which is loaded before this file in App.razor.
*/

/* ── DevExpress Fluent accent override ───────────────────────────
   The Fluent theme's blue.min.css sets its own accent colour.
   Pin it to Netaphor blue so DxGrid selection, focus rings, and
   other accent-derived colours match the Portal exactly.        */
:root {
    --dxbl-accent-color-100: var(--netaphor-blue);
}

/* ── Base ────────────────────────────────────────────────────── */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    color: var(--netaphor-dark-gray);
}

#app {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── App shell ───────────────────────────────────────────────── */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Body ────────────────────────────────────────────────────── */

.app-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.app-body .la-shell {
    width: 100%;
    height: 100%;
    align-self: stretch;
    flex: 1 1 0;
}

/* ── Loading spinner ─────────────────────────────────────────── */

.loading-center {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1 1 0;
}

.loading-progress {
    display: block;
    width: 6rem;
    height: 6rem;
}

.loading-progress-text {
    font-weight: bold;
    color: var(--netaphor-grid-header-gray);
    font-size: 0.9rem;
}

.loading-progress-text::after {
    content: "Loading\2026";
}

@keyframes loading-progress-circle {
    0%   { stroke-dashoffset: 251.2; }
    100% { stroke-dashoffset: 0; }
}

/* ── Modal dialog chrome ─────────────────────────────────────── */

dialog.dlg {
    padding: 0;
    border: none;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    /* Hidden until showModal() positions it — prevents the flash where the
       dialog briefly renders at the top of the page before being centred. */
    visibility: hidden;
}

dialog.dlg.dlg-open {
    visibility: visible;
}

dialog.dlg::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.dlg-header {
    background: var(--netaphor-dark-gray);
    color: var(--netaphor-white);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    flex-shrink: 0;
}

.dlg-body {
    padding: 0.75rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* required for flex child to respect max-height and scroll */
}

/* ── Dialog form layout ──────────────────────────────────────── */

.dlg-form { display: grid; gap: 0.35rem; }
.dlg-form label { font-weight: 600; font-size: 0.85rem; margin-top: 0.4rem; }
.dlg-error { color: var(--netaphor-red); font-size: 0.85rem; margin-top: 0.35rem; }
.dlg-hint { color: var(--netaphor-grid-header-gray); font-size: 0.8rem; margin-top: -0.15rem; }
.dlg-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; }
.dlg-actions-right { display: flex; gap: 0.5rem; }
.dlg-footer { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; }

.dlg-footer-bar {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--netaphor-light-gray);
}

.dlg-key-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

/* ── Form inputs ─────────────────────────────────────────────── */

.dlg-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--netaphor-gray);
    border-radius: 2px;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    background: var(--netaphor-white);
    color: var(--netaphor-dark-gray);
}

.dlg-input:focus { border-color: var(--netaphor-blue); }
.dlg-input:disabled { background: var(--netaphor-light-gray); color: var(--netaphor-grid-header-gray); }
.dlg-input[readonly] { background: var(--netaphor-light-gray); }

.dlg-textarea {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--netaphor-gray);
    border-radius: 2px;
    font-size: 0.875rem;
    font-family: monospace;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

.dlg-textarea:focus { border-color: var(--netaphor-blue); }

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.9rem;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--netaphor-blue); color: var(--netaphor-white); border-color: var(--netaphor-blue); }
.btn-primary:hover:not(:disabled) { background: var(--netaphor-blue-hover); border-color: var(--netaphor-blue-hover); }

.btn-secondary { background: var(--netaphor-white); color: var(--netaphor-dark-gray); border-color: var(--netaphor-gray); }
.btn-secondary:hover:not(:disabled) { background: var(--netaphor-light-gray); }

/* ── Login inputs and button ─────────────────────────────────── */

.login-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    margin-top: 0.3rem;
    border: 1px solid var(--netaphor-gray);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    color: var(--netaphor-dark-gray);
}

.login-input:focus { border-color: var(--netaphor-blue); }
.login-input:disabled { background: var(--netaphor-light-gray); color: var(--netaphor-grid-header-gray); }

.login-btn {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    background: var(--netaphor-blue);
    color: var(--netaphor-white);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}

.login-btn:hover:not(:disabled) { background: var(--netaphor-blue-hover); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Application status banner ───────────────────────────────── */

.la-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    font-size: 0.875rem;
}

.la-banner-error {
    background: var(--netaphor-red) !important;
    color: var(--netaphor-white) !important;
    font-weight: bold !important;
}

.la-banner-info {
    background: var(--netaphor-blue) !important;
    color: var(--netaphor-white) !important;
}

.la-banner-close {
    cursor: pointer;
    margin-left: 1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.la-banner-close:hover { opacity: 1; }

/* ── Blazor error banner ─────────────────────────────────────── */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Portal-style dialog header ──────────────────────────────── */

.dlg-portal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--netaphor-white);
    color: var(--netaphor-dark-gray);
    padding: 0.875rem 1.25rem 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dlg-portal-hdr-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dlg-portal-hdr-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.dlg-portal-hdr-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--netaphor-grid-header-gray);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

.dlg-portal-hdr-close:hover { color: var(--netaphor-dark-gray); }

/* ── About dialog body ───────────────────────────────────────── */

.abt-body { color: var(--netaphor-dark-gray); display: flex; flex-direction: column; gap: 0.75rem; line-height: var(--line-height-body); }
.abt-top { display: flex; align-items: flex-start; gap: 0.875rem; }
.abt-logo { width: 64px; height: 64px; flex-shrink: 0; }
.abt-info { display: flex; flex-direction: column; gap: 0.125rem; }
.abt-name { font-size: 1rem; color: var(--column-text); line-height: 1.2; margin-bottom: 0.1rem; }
.abt-meta { font-size: var(--about-meta-font-size); color: var(--netaphor-grid-header-gray); }
.abt-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.abt-notices-line { font-size: 0.8rem; color: var(--column-text); }
.abt-notices-line a { color: var(--netaphor-blue); text-decoration: none; font-weight: 500; }
.abt-notices-line a:hover { text-decoration: underline; }
.abt-warning { font-size: 0.72rem; color: var(--netaphor-grid-header-gray); line-height: 1.5; background: var(--netaphor-light-gray); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.75rem; }

/* ── Third-party notices dialog height cap ───────────────────── */
/* Constrain .ntc-body so the dialog naturally sizes to ~32rem total,
   matching the ReportsService DxPopup MaxHeight="32rem".
   Calculation: 32rem − 3.5rem header − 1.5rem dlg-body padding = 27rem.
   No :has() and no server restart required — takes effect on hard refresh. */
.ntc-body {
    max-height: 27rem;
    overflow-y: auto;
}

/* ── Third-party notices body ────────────────────────────────── */

.ntc-sect { margin-bottom: 0.9rem; }
.ntc-sect:last-child { margin-bottom: 0; }
.ntc-pkg { font-weight: 600; font-size: 0.85rem; color: var(--column-text); margin-bottom: 0.22rem; }
.ntc-txt { font-size: 0.82rem; color: var(--netaphor-grid-header-gray); line-height: 1.5; }
.ntc-txt a, .ntc-license a { color: var(--netaphor-blue); text-decoration: none; }
.ntc-txt a:hover, .ntc-license a:hover { text-decoration: underline; }
.ntc-license { font-size: 0.72rem; color: var(--netaphor-grid-header-gray); line-height: 1.55; background: var(--netaphor-light-gray); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.65rem; margin-top: 0.5rem; }
.ntc-license-hd { font-weight: 600; font-size: 0.76rem; color: var(--column-text); margin-bottom: 0.3rem; }