/*
 * Light-grey presentation layer for the customer and agent portals.
 * Layout, responsive behaviour and semantic status/priority colours remain
 * controlled by frontend.css and technician.css.
 */
.nsd-portal {
    --nsd-bg: #f1f2f3;
    --nsd-card: #f8f9fa;
    --nsd-ink: #292c30;
    --nsd-muted: #64686e;
    --nsd-border: #d5d8dc;
    --nsd-accent: #4f5358;
    --nsd-accent-2: #6a6f75;
    --nsd-gold: #858a90;
    --nsd-panel: #f4f5f6;
    --nsd-soft: #eceef0;
    background: #f1f2f3;
    color: var(--nsd-ink);
}

.nsd-portal .nsd-card,
.nsd-portal .nsd-kpi,
.nsd-portal .nsd-ticket,
.nsd-portal .nsd-table,
.nsd-portal .login-form,
.nsd-portal #loginform,
.nsd-portal .nsd-signature-record {
    border-color: #d5d8dc;
    background: #f8f9fa;
    box-shadow: 0 12px 34px rgba(42, 46, 51, .07);
}

.nsd-portal .nsd-kpi,
.nsd-portal .nsd-ticket[open] > summary,
.nsd-portal .nsd-agent-update {
    background-image: linear-gradient(180deg, #fafbfc, #eef0f2);
}

.nsd-portal .nsd-card h2,
.nsd-portal .nsd-card h3,
.nsd-portal .nsd-card h4,
.nsd-portal .nsd-empty-state strong,
.nsd-portal .nsd-ticket-summary-main strong {
    color: #34373b;
}

.nsd-portal .nsd-kpi span,
.nsd-portal .nsd-ticket-number,
.nsd-portal .nsd-ticket-meta-grid span,
.nsd-portal .nsd-eyebrow {
    color: #6c7177;
}

.nsd-portal .nsd-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.nsd-portal .nsd-form select,
.nsd-portal .nsd-form textarea,
.nsd-portal .login-username input,
.nsd-portal .login-password input,
.nsd-portal .nsd-signature-canvas {
    border-color: #c9cdd1;
    background: #fbfcfc;
    color: #292c30;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset;
}

.nsd-portal .nsd-form input:focus,
.nsd-portal .nsd-form select:focus,
.nsd-portal .nsd-form textarea:focus,
.nsd-portal .login-username input:focus,
.nsd-portal .login-password input:focus {
    border-color: #858a90;
    box-shadow: 0 0 0 4px rgba(133, 138, 144, .19);
}

.nsd-portal .nsd-form input::placeholder,
.nsd-portal .nsd-form textarea::placeholder {
    color: #858a90;
}

.nsd-portal .nsd-form button,
.nsd-portal input[type="submit"],
.nsd-portal .button {
    border: 1px solid #aeb3b8;
    background: #d7dadd;
    color: #25282c;
    box-shadow: 0 9px 22px rgba(42, 46, 51, .10);
}

.nsd-portal .nsd-form button:hover,
.nsd-portal .nsd-form button:focus,
.nsd-portal input[type="submit"]:hover,
.nsd-portal input[type="submit"]:focus,
.nsd-portal .button:hover,
.nsd-portal .button:focus {
    border-color: #969ba1;
    background: #c7cbd0;
    color: #1f2225;
    box-shadow: 0 12px 26px rgba(42, 46, 51, .14);
}

.nsd-portal .nsd-table th {
    background: #e3e5e8;
    color: #565b61;
}

.nsd-portal .nsd-table th,
.nsd-portal .nsd-table td,
.nsd-portal .nsd-reply,
.nsd-portal .nsd-agent-update,
.nsd-portal .nsd-signoff-inline,
.nsd-portal .nsd-agent-conversation,
.nsd-portal .nsd-agent-time,
.nsd-portal .nsd-agent-section {
    border-color: #d5d8dc;
}

.nsd-portal .nsd-ticket-meta,
.nsd-portal .nsd-ticket-meta-grid > div,
.nsd-portal .nsd-file-upload-form,
.nsd-portal .nsd-signature-pad {
    border-color: #d5d8dc;
    background: #eceef0;
}

.nsd-portal .nsd-resource-pills label,
.nsd-portal .nsd-visibility-control,
.nsd-portal .nsd-time-entry-box,
.nsd-portal .nsd-ticket-description,
.nsd-portal .nsd-onsite-summary,
.nsd-portal .nsd-empty-state,
.nsd-portal .nsd-agent-section,
.nsd-portal .nsd-agent-ticket-body {
    border-color: #d5d8dc;
    background: #f8f9fa;
}

.nsd-portal .nsd-internal,
.nsd-portal .nsd-agent-conversation .nsd-internal,
.nsd-portal .nsd-onsite-summary {
    border-color: #c7cbd0;
    background: #eceef0;
}

.nsd-portal .nsd-notice {
    border-color: #bfc3c8;
    background: #e3e5e8;
    color: #34373b;
}

.nsd-portal .nsd-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid #cfd3d7;
    border-radius: 22px;
    background: linear-gradient(135deg, #dfe2e5, #f0f1f3);
    color: #292c30;
    box-shadow: 0 14px 38px rgba(42, 46, 51, .10);
}

.nsd-portal .nsd-portal-header h1,
.nsd-portal .nsd-portal-header h2 {
    margin: 4px 0 0;
    color: #34373b;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
}

.nsd-portal .nsd-portal-header p,
.nsd-portal .nsd-portal-header .nsd-muted {
    margin: 8px 0 0;
    color: #5e6369;
}

.nsd-portal .nsd-portal-header .nsd-eyebrow {
    color: #6c7177;
}

.nsd-portal .nsd-portal-header__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nsd-agent-portal {
    --nsd-agent-accent: #555a60;
    --nsd-agent-gold: #747980;
    --nsd-agent-soft: #eceef0;
}

.nsd-agent-portal .nsd-agent-hero {
    color: #292c30;
    background: linear-gradient(135deg, #dfe2e5, #f0f1f3);
    box-shadow: 0 14px 38px rgba(42, 46, 51, .11);
}

.nsd-agent-portal .nsd-agent-hero h2,
.nsd-agent-portal .nsd-agent-hero .nsd-muted {
    color: #34373b;
}

.nsd-agent-portal .nsd-secondary,
.nsd-agent-portal .nsd-agent-hero .nsd-secondary {
    border-color: #aeb3b8;
    background: #e7e9eb;
    color: #34373b;
}

.nsd-agent-portal .nsd-secondary:hover,
.nsd-agent-portal .nsd-secondary:focus,
.nsd-agent-portal .nsd-agent-hero .nsd-secondary:hover,
.nsd-agent-portal .nsd-agent-hero .nsd-secondary:focus {
    border-color: #969ba1;
    background: #d3d6da;
    color: #25282c;
}

.nsd-agent-portal .nsd-filter-chip {
    border-color: #c1c5ca;
    background: #f4f5f6;
    color: #45494e;
}

.nsd-agent-portal .nsd-filter-chip:hover,
.nsd-agent-portal .nsd-filter-chip:focus,
.nsd-agent-portal .nsd-filter-chip.is-active {
    border-color: #858a90;
    background: #d3d6da;
    color: #25282c;
}

.nsd-agent-portal .nsd-agent-filter,
.nsd-agent-portal .nsd-agent-conversation .nsd-reply,
.nsd-agent-portal .nsd-agent-update {
    border-color: #d5d8dc;
    background: #eef0f2;
}

.nsd-agent-portal .nsd-agent-ticket > summary,
.nsd-agent-portal .nsd-agent-ticket-body,
.nsd-agent-portal .nsd-agent-section {
    background-color: #f8f9fa;
}

.nsd-agent-portal .nsd-agent-ticket[open] > summary {
    border-color: #d5d8dc;
    background: linear-gradient(180deg, #fafbfc, #eceef0);
}

.nsd-agent-portal .nsd-priority-badge,
.nsd-agent-portal .nsd-count-badge,
.nsd-agent-portal .nsd-ticket-jump-links a {
    background: #e1e4e7;
    color: #464a4f;
}

/* Retain the existing urgent/high badge colours for rapid ticket recognition. */
.nsd-agent-portal .nsd-priority-badge.nsd-priority-urgent {
    background: #fee4e2;
    color: #9f1b11;
}

.nsd-agent-portal .nsd-priority-badge.nsd-priority-high {
    background: #fff0d5;
    color: #8a4b00;
}

.nsd-agent-portal .nsd-summary-toggle::before {
    border-color: #686d73;
}

.nsd-agent-portal .nsd-ticket-jump-links {
    border-color: #d5d8dc;
    background: rgba(241, 242, 243, .96);
}

.nsd-agent-portal .nsd-quick-status button,
.nsd-agent-portal .nsd-time-presets button {
    border-color: #b8bdc2;
    background: #e5e7e9;
    color: #34373b;
}

.nsd-agent-portal .nsd-quick-status button:hover,
.nsd-agent-portal .nsd-quick-status button:focus,
.nsd-agent-portal .nsd-time-presets button:hover,
.nsd-agent-portal .nsd-time-presets button:focus {
    border-color: #969ba1;
    background: #c7cbd0;
    color: #1f2225;
}

.nsd-agent-portal .nsd-draft-status,
.nsd-agent-portal .nsd-visibility-control small,
.nsd-agent-portal .nsd-agent-section > summary span,
.nsd-agent-portal .nsd-ticket-summary-meta {
    color: #64686e;
}

.nsd-portal .nsd-ticket-ai,
.nsd-portal .nsd-ticket-ai-result {
    border-color: #cfd3d7;
    background: linear-gradient(145deg, #eceef0, #f8f9fa 65%);
    box-shadow: 0 10px 28px rgba(42, 46, 51, .07);
}

.nsd-portal .nsd-ticket-ai-result,
.nsd-portal .nsd-ticket-ai-controls select,
.nsd-portal .nsd-ticket-ai-controls textarea {
    background: #f8f9fa;
}

.nsd-portal .nsd-ticket-ai-heading p,
.nsd-portal .nsd-ticket-ai-controls label span,
.nsd-portal .nsd-ticket-ai-notice,
.nsd-portal .nsd-ticket-ai-status {
    color: #64686e;
}

.nsd-portal .nsd-ticket-ai-answer {
    color: #292c30;
}

.nsd-portal .nsd-ticket-ai-sources small {
    background: #dfe2e5;
    color: #45494e;
}

.nsd-agent-portal a:focus-visible,
.nsd-agent-portal button:focus-visible,
.nsd-agent-portal input:focus-visible,
.nsd-agent-portal select:focus-visible,
.nsd-agent-portal textarea:focus-visible,
.nsd-agent-portal summary:focus-visible {
    outline-color: #777c82;
}

@media (max-width: 720px) {
    .nsd-portal .nsd-portal-header {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 18px;
    }

    .nsd-portal .nsd-portal-header__actions,
    .nsd-portal .nsd-portal-header__actions .button {
        width: 100%;
    }

    .nsd-agent-portal .nsd-mobile-submit {
        border-color: #c7cbd0;
        background: rgba(241, 242, 243, .97);
    }

    .nsd-agent-portal .nsd-mobile-table tr {
        border-color: #d5d8dc;
        background: #f8f9fa;
    }
}