/* =============================================================
   Service Request Detail — Panel UI
   -------------------------------------------------------------
   Shared styles for templates/secretary/services_request_detail.html
   and  templates/admin/services_request_detail.html.

   Design goals:
     1. Reduce visual noise — the previous design used identical-looking
        rounded cards for every container so the eye had nothing to
        anchor to.
     2. Color-code by purpose — applicant info, address, finance,
        assessment each get a distinct accent so the reviewer can scan
        the page in seconds.
     3. Replace inline "Label: value" runs with a definition-list
        layout (label tag on top, value below in larger weight) so
        critical data pops out.
     4. Keep print-friendly — section accents use thin left borders
        instead of full-bleed colored backgrounds.
   ============================================================= */

/* ---- Section panel ---------------------------------------- */
.eb-rd-panel {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 0.5rem;
    padding: 0.75rem 0.875rem;
    transition: border-color 120ms ease;
}

.eb-rd-panel + .eb-rd-panel {
    margin-top: 0.625rem;
}

.eb-rd-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 0.375rem;
    margin-bottom: 0.625rem;
}

.eb-rd-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.01em;
    margin: 0;
}

.eb-rd-panel__title i {
    font-size: 0.75rem;
    color: var(--eb-rd-accent, #475569);
}

.eb-rd-panel__subtitle {
    font-size: 0.6875rem;
    color: #64748b;
    margin: 0.125rem 0 0;
    line-height: 1.3;
}

.eb-rd-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--eb-rd-accent, #475569) 28%, white);
    background-color: color-mix(in srgb, var(--eb-rd-accent, #475569) 6%, white);
    color: var(--eb-rd-accent, #475569);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Accent variants -------------------------------------- */
.eb-rd-panel--applicant   { border-left-color: #C84C4C; --eb-rd-accent: #C84C4C; }
.eb-rd-panel--service     { border-left-color: #1d4ed8; --eb-rd-accent: #1d4ed8; }
.eb-rd-panel--address     { border-left-color: #0f766e; --eb-rd-accent: #0f766e; }
.eb-rd-panel--description { border-left-color: #64748b; --eb-rd-accent: #475569; }
.eb-rd-panel--assessment  { border-left-color: #0891b2; --eb-rd-accent: #0e7490; }
.eb-rd-panel--solar       { border-left-color: #2563eb; --eb-rd-accent: #1d4ed8; }
.eb-rd-panel--documents   { border-left-color: #7c3aed; --eb-rd-accent: #6d28d9; }
.eb-rd-panel--billing     { border-left-color: #16a34a; --eb-rd-accent: #15803d; }
.eb-rd-panel--actions     { border-left-color: #C84C4C; --eb-rd-accent: #991b1b; }
.eb-rd-panel--readonly    { border-left-color: #16a34a; --eb-rd-accent: #15803d; background-color: #f0fdf4; }
.eb-rd-panel--rejected    { border-left-color: #dc2626; --eb-rd-accent: #991b1b; background-color: #fef2f2; }
.eb-rd-panel--warning     { border-left-color: #ca8a04; --eb-rd-accent: #a16207; background-color: #fffbeb; }
.eb-rd-panel--info        { border-left-color: #0891b2; --eb-rd-accent: #0e7490; background-color: #ecfeff; }

/* ---- Definition-list layout for label/value pairs -------- */
.eb-rd-deflist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

@media (max-width: 640px) {
    .eb-rd-deflist {
        grid-template-columns: 1fr;
    }
}

.eb-rd-deflist__item {
    min-width: 0;
}

.eb-rd-deflist__item--full {
    grid-column: 1 / -1;
}

.eb-rd-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.125rem;
    line-height: 1.2;
}

.eb-rd-value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.eb-rd-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.01em;
}

.eb-rd-value--muted {
    color: #64748b;
    font-weight: 500;
}

.eb-rd-value--accent {
    color: var(--eb-rd-accent, #0f172a);
    font-weight: 800;
}

.eb-rd-value--money {
    font-size: 1rem;
    font-weight: 800;
    color: var(--eb-rd-accent, #0f172a);
}

.eb-rd-value--prewrap {
    white-space: pre-line;
}

/* ---- Compact KPI tiles (Service / Status / Submitted etc.) */
.eb-rd-kpi-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .eb-rd-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .eb-rd-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.eb-rd-kpi {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--eb-rd-accent, #94a3b8);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.eb-rd-kpi--service  { --eb-rd-accent: #C84C4C; }
.eb-rd-kpi--status   { --eb-rd-accent: #1d4ed8; }
.eb-rd-kpi--time     { --eb-rd-accent: #0891b2; }
.eb-rd-kpi--money    { --eb-rd-accent: #16a34a; }
.eb-rd-kpi--id       { --eb-rd-accent: #7c3aed; }

.eb-rd-kpi__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin: 0 0 0.125rem;
}

.eb-rd-kpi__value {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 0;
    word-break: break-word;
}

.eb-rd-kpi__value--money {
    color: #15803d;
}

.eb-rd-kpi__hint {
    font-size: 0.625rem;
    color: #64748b;
    margin: 0.125rem 0 0;
    line-height: 1.3;
}

/* ---- Visual divider with label (e.g. "Section 1") -------- */
.eb-rd-section-divider {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0.75rem;
}

.eb-rd-section-divider__line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, #e2e8f0, transparent);
}

.eb-rd-section-divider__label {
    font-size: 0.625rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
    background: #f1f5f9;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
}

/* ---- Address two-column row ------------------------------ */
.eb-rd-address-grid {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .eb-rd-address-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- "Money card" (used in billing) --------------------- */
.eb-rd-amount-card {
    background-color: #ffffff;
    border: 1px solid color-mix(in srgb, var(--eb-rd-accent, #16a34a) 28%, white);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    text-align: center;
}

.eb-rd-amount-card__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.eb-rd-amount-card__value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--eb-rd-accent, #15803d);
    margin: 0;
}

.eb-rd-amount-card__value--placeholder {
    color: #cbd5e1;
}

.eb-rd-amount-card__hint {
    font-size: 0.6875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.eb-rd-amount-card__due {
    margin-top: 0.625rem;
    font-size: 0.6875rem;
    color: #334155;
}

.eb-rd-amount-card__due strong {
    font-weight: 700;
}

/* ---- Status banner (used for "completed", "rejected") ---- */
.eb-rd-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--eb-rd-accent, #16a34a);
    background-color: color-mix(in srgb, var(--eb-rd-accent, #16a34a) 6%, white);
    color: var(--eb-rd-accent, #15803d);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.eb-rd-status-banner i {
    font-size: 0.875rem;
    margin-top: 0.0625rem;
}

.eb-rd-status-banner--success { --eb-rd-accent: #16a34a; }
.eb-rd-status-banner--warning { --eb-rd-accent: #ca8a04; }
.eb-rd-status-banner--error   { --eb-rd-accent: #dc2626; }
.eb-rd-status-banner--info    { --eb-rd-accent: #0891b2; }