@import url("feature-plus.css");

/* =============================================================================
   Cash Register & Drawer Control page — .cr-* mock internals
   Only the pieces the shared .fp-mk-* / .fx-* vocabulary does not already cover:
   the Z-report header block, the denomination count rows, the variance strip,
   the severity flags, the cashier quick-action row and the discrepancy-report
   session rows. Everything else reuses the shared classes.
   ========================================================================== */

/* --- Inline "read more" link --------------------------------------------- */
.cr-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 700;
    color: #6f42c1;
    text-decoration: none;
}
.cr-more:hover { color: #9333ea; text-decoration: underline; }
.cr-more:focus-visible { outline: 2px solid #6f42c1; outline-offset: 3px; border-radius: 6px; }
.cr-more i { font-size: 17px; }

/* --- Z-report header block ------------------------------------------------ */
.cr-zhead {
    text-align: center;
    padding: 2px 0 10px;
    margin-bottom: 10px;
    border-bottom: 1.5px dashed #e6dcff;
}
.cr-zhead-title {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #0f172a;
}
.cr-zhead-meta {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    color: #5f6b7a;
}

/* --- Denomination count rows ---------------------------------------------- */
.cr-den { margin: 2px 0 0; }
.cr-den-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.4;
}
.cr-den-row:nth-child(odd)  { background: #f9f7ff; }
.cr-den-row:nth-child(even) { background: #f4f0fb; }
.cr-den-lbl { font-weight: 700; color: #374151; }
.cr-den-qty {
    font-weight: 700;
    color: #5f6b7a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cr-den-sub {
    min-width: 54px;
    text-align: right;
    font-weight: 800;
    color: #6f42c1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Variance strip ------------------------------------------------------- */
.cr-var {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
}
.cr-var.is-over  { background: #f0fdf4; border-color: #bbf7d0; }
.cr-var.is-exact { background: #f0fdf4; border-color: #bbf7d0; }
.cr-var-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #7c4a12;
    line-height: 1.5;
}
.cr-var.is-over .cr-var-lbl, .cr-var.is-exact .cr-var-lbl { color: #14532d; }
.cr-var-val {
    font-size: 15px;
    font-weight: 800;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cr-var.is-over .cr-var-val, .cr-var.is-exact .cr-var-val { color: #15803d; }

/* --- Severity flags ------------------------------------------------------- */
.cr-flag {
    display: inline-block;
    min-width: 42px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.cr-flag-green { background: #dcfce7; color: #15803d; }
.cr-flag-amber { background: #fff7ed; color: #c2410c; }
.cr-flag-red   { background: #fee2e2; color: #b91c1c; }

/* --- Cashier widget: session status line ---------------------------------- */
.cr-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #faf7ff;
    border: 1.5px solid #ece2ff;
}
.cr-status-txt {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    color: #374151;
}
.cr-status-txt span {
    display: block;
    font-weight: 600;
    color: #5f6b7a;
}

/* --- Cashier widget: quick actions ---------------------------------------- */
.cr-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 2px 0 8px;
}
.cr-quick-btn {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    background: #f3e8ff;
    color: #6f42c1;
    line-height: 1.4;
}
.cr-reason {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px dashed #e6dcff;
    font-size: 9px;
    font-weight: 600;
    color: #5f6b7a;
}

/* --- Discrepancy report: session rows ------------------------------------- */
.cr-sess-head, .cr-sess-row {
    display: grid;
    grid-template-columns: 1.5fr .9fr .9fr .9fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 9px;
    line-height: 1.4;
}
.cr-sess-head {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5f6b7a;
}
.cr-sess-row { border-radius: 7px; }
.cr-sess-row:nth-child(odd)  { background: #f9f7ff; }
.cr-sess-row:nth-child(even) { background: #f4f0fb; }
.cr-sess-who { font-weight: 700; color: #374151; }
.cr-sess-who span { display: block; font-weight: 600; color: #5f6b7a; }
.cr-sess-num {
    text-align: right;
    font-weight: 700;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
.cr-sess-diff {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cr-sess-diff.is-red   { color: #b91c1c; }
.cr-sess-diff.is-amber { color: #c2410c; }
.cr-sess-diff.is-ok    { color: #15803d; }

@media (prefers-reduced-motion: reduce) {
    .cr-more { transition: none; }
}