/* Portal chrome. Only Radzen tokens, so light and dark themes both work. */
html, body { height: 100%; margin: 0; background: var(--rz-body-background-color); color: var(--rz-text-color); }

.portal-muted { color: var(--rz-text-secondary-color); }

/* Plain links (tracking numbers, file names) follow the theme instead of the browser's default blue. */
.portal-body a:not(.rz-link):not(.rz-button) { color: var(--rz-link-color); }
.portal-body a:not(.rz-link):not(.rz-button):hover { color: var(--rz-link-hover-color); }

.portal-body { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.portal-nav { display: flex; gap: 1.25rem; }
.portal-nav .rz-link { color: var(--rz-text-color); text-decoration: none; font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.portal-nav .rz-link.active { border-bottom-color: var(--rz-primary); color: var(--rz-primary); }

.portal-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--rz-body-background-color); }

.portal-tile { cursor: pointer; height: 100%; display: flex; flex-direction: column; gap: 0.5rem; transition: box-shadow 120ms ease; }
.portal-tile:hover { box-shadow: var(--rz-shadow-3); }
.portal-tile .rzi { font-size: 2rem; color: var(--rz-primary); }

/* Request a Quote: the upload control becomes a large drop target (the native file input inside accepts drops). */
.portal-dropzone .rz-fileupload { width: 100%; }
.portal-dropzone .rz-fileupload-buttonbar { padding: 0; border: none; background: none; }
.portal-dropzone .rz-fileupload-choose { width: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 2px dashed var(--rz-base); border-radius: var(--rz-border-radius); background: var(--rz-body-background-color); color: var(--rz-text-secondary-color);
    box-shadow: none; text-transform: none; font-weight: 500; white-space: normal; text-align: center; padding: 1rem; }
.portal-dropzone .rz-fileupload-choose:hover { border-color: var(--rz-primary); color: var(--rz-primary); background: var(--rz-body-background-color); }
.portal-dropzone .rz-fileupload-choose input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.portal-dropzone .rz-fileupload-content { border: none; padding: 0; background: none; }

.portal-part { border: 1px solid var(--rz-base); border-radius: var(--rz-border-radius); padding: 0.5rem 0.75rem; background: var(--rz-body-background-color); }
.portal-part.in-assembly { margin-left: 1.25rem; }
.portal-part.excluded { opacity: 0.55; }
.portal-part-main { display: grid; grid-template-columns: auto minmax(160px, 2fr) minmax(110px, 1fr) minmax(120px, 1.2fr) minmax(120px, 1.2fr) 96px auto; gap: 0.5rem; align-items: start; }
.portal-part-main .rz-form-field { width: 100%; margin: 0; }
.portal-part-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding-left: 2rem; font-size: 0.875rem; }
.portal-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.25rem 0 0.5rem; border: 1px solid var(--rz-base); border-radius: 999px; }
.portal-chip .rzi { font-size: 1rem; color: var(--rz-danger); }
.portal-assembly-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; margin-top: 0.25rem;
    border-left: 3px solid var(--rz-primary); background: var(--rz-secondary-lighter); border-radius: var(--rz-border-radius); }
.portal-assembly-head > .rzi { color: var(--rz-primary); }
.portal-assembly-head .rz-form-field { margin: 0; }

.portal-parts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.portal-part-card { padding: 0; overflow: hidden; }
.portal-part-card .preview { width: 100%; height: 220px; background: var(--rz-body-background-color); display: flex; align-items: center; justify-content: center; }
.portal-part-card .preview img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 768px) {
    .portal-nav { gap: 0.75rem; font-size: 0.9rem; }
    .portal-user { display: none; }
    .portal-part-main { grid-template-columns: auto 1fr 1fr auto; grid-template-areas: "lead name name del" ". pn qty ." ". mat fin ."; }
    .portal-part-main .pp-lead { grid-area: lead; }
    .portal-part-main .pp-name { grid-area: name; }
    .portal-part-main .pp-pn { grid-area: pn; }
    .portal-part-main .pp-qty { grid-area: qty; }
    .portal-part-main .pp-mat { grid-area: mat; }
    .portal-part-main .pp-fin { grid-area: fin; }
    .portal-part-main .pp-del { grid-area: del; }
    .portal-part.in-assembly { margin-left: 0.5rem; }
    .portal-part-files { padding-left: 0; }
}