/* ── Font ────────────────────────────────────────────────────────────────────
   Manrope, self-hosted from wwwroot/fonts — same variable woff2 subsets and
   @font-face definitions as Nexgate's own stylesheet, so text renders
   identically inside the Nexgate frame. */
@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-latin-variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-latin-ext-variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Design tokens ───────────────────────────────────────────────────────────
   The look follows Nexgate's own pages (this app is embedded in Nexgate):
   white header band, light grey canvas, white 8px cards with a hairline
   border, Nexgate blue for primary actions and links, green/orange status
   pills, Manrope throughout. Token names are unchanged from web.admin's so
   copied components keep working. */
:root {
    --c-bg:        #f5f3f1;
    --c-surface:   #FFFFFF;
    --c-surface2:  #F7F8FA;
    --c-label:     #1D1D1F;
    --c-label2:    #5F6368;
    --c-label3:    #80868B;
    --c-label4:    #BDC1C6;
    --c-sep:       #E3E5E8;
    --c-sep-light: #EEF0F2;
    --c-input:     #CDD1D6;
    --c-blue:      #1A6FE0;
    --c-green:     #4CB82B;
    --c-red:       #D93025;
    --c-amber:     #F5A524;

    --c-brand:       #1A6FE0;
    --c-brand-dark:  #1559B8;
    --c-brand-soft:  rgba(26,111,224,0.10);
    --c-chart:       #3D9BF5;
    --c-navy:        #14194D;
    --c-heading:     #212121;   /* h1 / h2 / h3 */

    --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --radius: 8px;
    --sn-width: 252px;
    --tb-height: 60px;

    /* Type scale (Nexgate): every font-size / font-weight in this app's CSS
       uses one of these rather than a literal, so the scale is tuned here. */
    --fs-xs:    12px;   /* captions, chips, table meta */
    --fs-sm:    13px;   /* secondary text, small buttons */
    --fs-base:  14px;   /* body, inputs, table cells */
    --fs-md:    14px;   /* buttons, side nav, field labels */
    --fs-lg:    16px;   /* header links, emphasised body */
    --fs-xl:    18px;   /* sub-headings */
    --fs-2xl:   20px;   /* card / section / modal titles */
    --fs-3xl:   24px;   /* page headings */
    --fs-h1:    32px;   /* every <h1> (Nexgate page heading) */
    --fs-h2:    1.53125rem; /* every <h2> (Nexgate section heading, 24.5px) */
    --fs-h3:    1.375rem; /* every <h3> (Nexgate card heading, 22px) */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
}

/* Root stays at the browser-default 16px so rem values (e.g. --fs-h3: 1.375rem = 22px)
   resolve the same as on Nexgate; body text itself is 14px. */
html {
    font-size: 16px;
}

html, body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-label);
    font-family: var(--font);
}

body {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
    font-family: var(--font);
}

/* Nexgate page-heading style, applied to every h1 — the h1 classes below only add layout. */
h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--c-heading);
}

h1:focus {
    outline: none;
}

/* Nexgate section-heading style, applied to every h2 (margins left to context). Dialog
   titles (.ng-modal-title, ErrorModal) keep their own smaller size. */
h2 {
    font-size: var(--fs-h2);
    line-height: 1.2;
    font-weight: var(--fw-semibold);
    color: var(--c-heading);
}

/* Nexgate card-heading style, applied to every h3. */
h3 {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: 27px;
    font-weight: var(--fw-semibold);
    color: var(--c-heading);
}

a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ── Page chrome ─────────────────────────────────────────────────────────────
   Each page's .ng-page-header (title, description, actions, optional .ng-tabs)
   is handed to the layout via <SectionContent SectionName="page-header"> and
   rendered as Nexgate's white page-header band above the grey canvas, like
   Nexgate's "Inventory / List" header (actions on the right, tabs beneath). */
.ng-page {
    padding: 16px 16px 40px;
    box-sizing: border-box;
}

.ng-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin: 0;
    padding: 22px 40px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-sep);
}

.ng-page-header:has(> .ng-tabs) { padding-bottom: 0; }

/* The header band stays pinned to the top of .app-content (the scroll container); only the
   page content beneath it scrolls. Above sticky table headers, below modals/menus. */
.app-content > .ng-page-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* "Back" link above the title (breadcrumb position). */
.ng-page-header > .ng-back {
    flex-basis: 100%;
    margin: 0 0 -8px;
}

/* Nexgate underlined tabs along the bottom of the header band. */
.ng-tabs {
    flex-basis: 100%;
    display: flex;
    gap: 36px;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ng-tab {
    position: relative;
    padding: 0 0 12px;
    font-size: var(--fs-lg);
    color: var(--c-label);
    white-space: nowrap;
    text-decoration: none;
}
.ng-tab:hover { color: var(--c-brand); text-decoration: none; }
.ng-tab.active { color: var(--c-brand); }
.ng-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--c-brand);
}

@media (max-width: 900px) {
    .ng-page-header { padding: 16px; }
    .ng-tabs { gap: 24px; }
}

.ng-title {
    line-height: 1.2;
}

.ng-subtitle {
    margin: 8px 0 0;
    color: var(--c-label2);
    font-size: var(--fs-base);
}

/* Same look as h2 (also used on non-h2 elements). */
.ng-section-title {
    font-size: var(--fs-h2);
    line-height: 1.2;
    font-weight: var(--fw-semibold);
    color: var(--c-heading);
    margin: 0 0 16px;
}

.ng-card {
    background: var(--c-surface);
    border: 1px solid var(--c-sep);
    border-radius: var(--radius);
    padding: 24px;
    box-sizing: border-box;
}

.ng-card + .ng-card { margin-top: 16px; }

/* ── Full-height list pages ─────────────────────────────────────────────────
   A page marked .ng-page-fill takes the rest of the screen below the header;
   inside it, the .ng-fill element (the list panel / table) stretches to the
   bottom and scrolls internally with its header row pinned — like Nexgate's
   inventory list. Only the rows scroll — the header band, toolbar and column
   headings stay put, however short the window. */
.app-content > * { flex-shrink: 0; }

.app-content > .ng-page-fill {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ng-page-fill > * { flex-shrink: 0; }

.ng-page-fill .ng-fill {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ng-page-fill .ng-table-wrap.ng-fill {
    display: block;
    overflow: auto;
}

.ng-page-fill .ng-fill .ng-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ng-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.ng-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

@media (max-width: 900px) {
    .ng-grid-2, .ng-grid-3 { grid-template-columns: 1fr; }
    .ng-page { padding: 12px 10px 32px; }
}

/* ── Buttons (Nexgate: 8px radius, filled blue primary, blue outline secondary) */
.ng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--c-brand);
    background: var(--c-surface);
    color: var(--c-brand);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.ng-btn:hover:not(:disabled) { background: var(--c-brand-soft); text-decoration: none; }
.ng-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ng-btn-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.ng-btn-primary:hover:not(:disabled) { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }

.ng-btn-danger { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.ng-btn-danger:hover:not(:disabled) { background: #B3261E; border-color: #B3261E; }

.ng-btn-success { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ng-btn-success:hover:not(:disabled) { background: #3FA222; border-color: #3FA222; }

.ng-btn-ghost { background: none; border-color: transparent; color: var(--c-brand); }

.ng-btn-sm { min-height: 32px; padding: 5px 14px; font-size: var(--fs-base); }

.ng-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--c-brand);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.ng-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-field-full { grid-column: 1 / -1; }

.ng-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--c-label2);
}
.ng-label .ng-required { color: var(--c-red); margin-left: 2px; }

.ng-input, .ng-select, .ng-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--c-input);
    border-radius: 6px;
    background: var(--c-surface);
    color: var(--c-label);
    font-family: inherit;
    font-size: var(--fs-base);
    outline: none;
}
.ng-input:focus, .ng-select:focus, .ng-textarea:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.ng-input:disabled, .ng-select:disabled { background: var(--c-surface2); color: var(--c-label3); }
.ng-textarea { resize: vertical; min-height: 88px; }

.ng-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--c-label);
    cursor: pointer;
}
.ng-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--c-brand); flex-shrink: 0; }

.ng-error, .validation-message {
    color: var(--c-red);
    font-size: var(--fs-sm);
}

.invalid { border-color: var(--c-red) !important; }

.ng-help { color: var(--c-label3); font-size: var(--fs-sm); }

.ng-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* ── Alerts / states ─────────────────────────────────────────────────────── */
.ng-alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    line-height: 1.5;
}
.ng-alert-error   { background: #FCEEEE; border-color: #F5C9C6; color: #A1251C; }
.ng-alert-success { background: #EEF8E9; border-color: #CBEABD; color: #2E7517; }
.ng-alert-info    { background: #EDF4FD; border-color: #C9DDF8; color: #154F9E; }
.ng-alert-warning { background: #FEF5E6; border-color: #F8DEB0; color: #8A5A06; }

.ng-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--c-label2);
}

.ng-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--c-sep);
    border-top-color: var(--c-brand);
    animation: ng-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ng-spin { to { transform: rotate(360deg); } }

.ng-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--c-label3);
}

/* Small grey chip (Nexgate "New" / "SC 12 Left") by default; solid pills for
   statuses (Nexgate store "Active" green / "Pending" orange). */
.ng-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    background: var(--c-surface2);
    border: 1px solid var(--c-sep);
    color: var(--c-label);
    white-space: nowrap;
}
.ng-badge-green { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ng-badge-red   { background: var(--c-red);   border-color: var(--c-red);   color: #fff; }
.ng-badge-amber { background: var(--c-amber); border-color: var(--c-amber); color: #fff; }
.ng-badge-blue  { background: #EDF4FD; border-color: #C9DDF8; color: var(--c-brand); }

/* ── Tables (Nexgate inventory list: grey header row, hairline row rules) ── */
.ng-table-wrap {
    overflow-x: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-sep);
    border-radius: var(--radius);
}

.ng-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}
.ng-table th {
    text-align: left;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--c-label2);
    background: var(--c-surface2);
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-sep);
    white-space: nowrap;
}
.ng-table th.sortable { cursor: pointer; user-select: none; }
.ng-table th.sortable:hover { color: var(--c-label); }
.ng-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-sep);
    vertical-align: top;
}
.ng-table tr:last-child td { border-bottom: none; }
.ng-table tbody tr:hover td { background: #FAFBFC; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.ng-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ng-modal {
    display: flex;
    flex-direction: column;
    width: min(560px, 96vw);
    max-height: 92vh;
    background: var(--c-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}
.ng-modal-lg { width: min(900px, 96vw); }

.ng-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-sep);
}
.ng-modal-title { font-size: var(--fs-2xl); line-height: 1.3; font-weight: var(--fw-medium); margin: 0; }

.ng-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--c-label2);
    cursor: pointer;
    flex-shrink: 0;
}
.ng-modal-close:hover { background: var(--c-surface2); }

.ng-modal-body { padding: 20px 24px; overflow-y: auto; }

.ng-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--c-sep);
}

/* ── Blazor defaults ─────────────────────────────────────────────────────── */
.blazor-error-boundary {
    background: var(--c-red);
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }