/* ===========================================================================
   Production Report page — matched to the approved Carisma design.
   =========================================================================== */

.pr-page { display: flex; flex-direction: column; gap: 18px; }

/* -------------------------------- banner --------------------------------- */
.pr-banner {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(120deg, #f7ecef 0%, #faf3ee 55%, #fdfbfa 100%);
    border: 1px solid #f1e6e8; border-radius: 18px; padding: 12px 24px;
}
.pr-crumb { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 4px; color: #9a7b82; }
.pr-crumb a { color: #9a7b82; text-decoration: none; }
.pr-crumb a:hover { color: var(--primary-color); text-decoration: underline; }
.pr-crumb strong { color: var(--ink); font-weight: 700; }
.pr-crumb__sep { color: #cdbfc3; }
.pr-title { font-size: 1.5rem; font-weight: 800; color: #1c1416; margin: 0 0 2px; }
.pr-sub { color: #6b5f63; font-size: .85rem; margin: 0; }

.pr-banner__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-compared { font-size: .8rem; color: #6b5f63; }
.pr-select {
    border: 1px solid #d9dde3; border-radius: 10px; background: #fff; cursor: pointer;
    padding: 9px 12px; font-size: .88rem; font-weight: 600; color: var(--ink); outline: none;
}
.pr-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.pr-export {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
    border: 1px solid #d9dde3; background: #fff; border-radius: 10px;
    font-size: .88rem; font-weight: 600; color: var(--ink); padding: 9px 14px;
}
.pr-export:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pr-export .material-symbols-rounded { font-size: 18px; }

/* ------------------------------- stat cards ------------------------------- */
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pr-stat {
    background: #fff; border: 1px solid #eef0f3; border-top: 3px solid #ccc; border-radius: 14px;
    padding: 14px 18px 16px; box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}
.pr-stat--maroon { border-top-color: #7a1f2b; }
.pr-stat--rose   { border-top-color: #b04a63; }
.pr-stat--blue   { border-top-color: #2f6fb0; }
.pr-stat--gold   { border-top-color: #d9a21b; }
.pr-stat__label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #6b5f63; margin-bottom: 6px; }
.pr-stat__value { font-size: 2.1rem; font-weight: 800; line-height: 1.05; color: #1c1416; }
.pr-stat__value.is-green { color: #0D6A40; }
.pr-stat__delta { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.pr-stat__prev { font-size: .76rem; color: #7a6f73; }

.pr-chip { font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.pr-chip.is-down { background: #fbe3e6; color: #b42318; }
.pr-chip.is-flat { background: #f1ece9; color: #6b5f63; }
.pr-chip.is-up   { background: #e3f4ea; color: #1c6b3c; }

/* --------------------------------- card ---------------------------------- */
.pr-card {
    background: #fff; border: 1px solid #eef0f3; border-top: 3px solid #e9c7d2;
    border-radius: 16px; box-shadow: 0 1px 2px rgba(20,20,40,.04); overflow: hidden;
}
.pr-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 20px 22px;
}
.pr-card__title { display: flex; align-items: center; gap: 9px; font-size: 1rem; color: #1c1416; }
.pr-accent { width: 4px; height: 18px; border-radius: 3px; background: var(--primary-color); }
.pr-card__sub { font-size: .82rem; color: #6b5f63; }

.pr-tabs { display: inline-flex; background: #f4f1f2; border-radius: 10px; padding: 4px; gap: 2px; }
.pr-tab {
    display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; cursor: pointer;
    font-size: .8rem; font-weight: 600; color: #4b4145; padding: 7px 14px; border-radius: 8px; white-space: nowrap;
}
.pr-tab:hover { color: var(--primary-color); }
.pr-tab.is-active { background: var(--primary-color); color: #fff; box-shadow: 0 1px 3px rgba(122,31,43,.3); }
.pr-tab .material-symbols-rounded { font-size: 15px; }

/* -------------------------------- table ---------------------------------- */
.pr-scroll { overflow-x: auto; }
.pr-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .86rem; color: #2b2f36; }
.pr-table th, .pr-table td { padding: 11px 14px; white-space: nowrap; }

.pr-group th {
    background: #f6e9ed; font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #6b5f63;
    padding-top: 9px; padding-bottom: 9px;
}
.pr-cols th {
    background: #f9eff2; font-size: .76rem; font-weight: 600; color: #4b4145;
    border-bottom: 1px solid #ECE6E2; padding-top: 9px; padding-bottom: 9px;
}
.pr-c { text-align: center; }
.pr-r { text-align: right; font-variant-numeric: tabular-nums; }
.pr-left { text-align: left; }
.pr-num { width: 44px; text-align: center; color: #6B5F63; }
.pr-bl { border-left: 1px solid #ece3e6; }

.pr-table tbody tr { border-bottom: 1px solid #f2eeef; }
.pr-table tbody tr.is-alt { background: #FCF8F9; }
.pr-table tbody tr:hover { background: #f6eaee; }
.pr-name { font-weight: 700; color: #1c1416; }

.pr-util { font-weight: 700; }
.pr-util.is-high { color: #0D6A40; }
.pr-util.is-low  { color: #b8860b; }
.is-good { color: #0D6A40; font-weight: 700; }
.is-bad  { color: #B42318; font-weight: 700; }

.pr-total td {
    background: #faf7f8; border-top: 2px solid #e6dcdf; font-weight: 700; color: #1c1416; padding-top: 12px; padding-bottom: 12px;
}

/* footer */
.pr-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 22px; font-size: .78rem; color: #7a6f73; border-top: 1px solid #f0eaec;
}
.pr-legend { display: inline-flex; gap: 14px; font-size: .78rem; }

.pr-soon {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 22px 22px; padding: 40px 12px; border: 1px dashed #e3d6da; border-radius: 10px;
    background: #faf7f8; color: #8a7f83; font-size: .92rem; font-weight: 600;
}

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) { .pr-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pr-stats { grid-template-columns: 1fr; } }

/* ===================== Time utilisation tab ===================== */
.pr-table--util { min-width: 900px; }
.pr-cols--util th { font-size: .68rem; letter-spacing: .05em; font-weight: 700; color: #6b5f63; }
.pr-table--util tbody td { padding-top: 15px; padding-bottom: 15px; }
.pr-metric { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #1c1416; white-space: nowrap; }
.pr-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pr-mono { font-variant-numeric: tabular-nums; }
.pr-strong { font-weight: 700; color: #1c1416; }
.is-amber { color: #b8860b; font-weight: 700; }

/* highlighted TOTAL column */
.pr-totalcol { background: #f9f4f5; border-left: 1px solid #ece3e6; font-weight: 700; }
.pr-cols--util th.pr-totalcol { background: #f3e6ea; }

.pr-total--util td { background: #faf7f8; padding-top: 15px; padding-bottom: 15px; }
.pr-total--util td.pr-totalcol { background: #f3ecee; }
.pr-total--util:first-child td, .pr-total--util:not(.pr-total--last) td { border-top: 2px solid #e6dcdf; }
.pr-total--last td { border-top: 1px solid #efe7ea; }
.pr-table--util .pr-util { font-weight: 700; color: #1c1416; }
.pr-table--util .pr-util.is-high { color: #0D6A40; }
.pr-table--util .pr-util.is-low { color: #b8860b; }

.pr-empty { padding: 48px 20px; text-align: center; font-size: .92rem; color: #6b5f63; }
.pr-export:disabled { opacity: .5; cursor: default; }
.pr-export:disabled:hover { border-color: #d9dde3; color: var(--ink); }
.pr-select:disabled { opacity: .75; cursor: default; background: #faf7f8; }