/* public/assets/css/s31-staff-cards.css
   KHMER HRMS — Staff Cards (M15)
   Season: S31 — Staff Cards M15 (DB + Service + PDF)

   Two jobs in one file:
   1. Small on-screen helpers for the index/create/show pages (loaded
      via layouts/main.php like every other module's own CSS file —
      day/night handled entirely through the existing CSS variables
      already defined in themes.css, nothing hardcoded here).
   2. The CR80 physical-card print layout for staff_cards/print.php,
      which does NOT include print.css (that file hardcodes an A4
      @page — see its own header comment) — this file supplies its
      own @page instead, so "Print -> Save as PDF" produces a
      correctly-sized 85.6mm x 54mm (or the template's own width_mm/
      height_mm) document rather than a tiny card centered on an A4
      sheet. Screen preview uses the same pixel-accurate mm sizing
      via CSS `mm` units so what HR sees on screen already matches
      the printed output.
*/

/* ── 1. On-screen list/detail helpers ─────────────────────────── */

.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th {
    text-align: left;
    width: 220px;
    padding: 8px 12px 8px 0;
    color: var(--text-muted);
    font-weight: 600;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.detail-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: none; }

@media (max-width: 767px) {
    .detail-table, .detail-table tbody, .detail-table tr, .detail-table th, .detail-table td {
        display: block; width: auto;
    }
    .detail-table th { border-bottom: none; padding-bottom: 0; }
    .detail-table td { padding-top: 2px; }
}

/* ── 2. Card print/preview shell ──────────────────────────────── */

.staff-card-print-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 12px;
}

.staff-card-faces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.staff-card-face {
    width: var(--card-w, 85.6mm);
    height: var(--card-h, 54mm);
    border-radius: 3mm;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    overflow: hidden;
    position: relative;
    font-family: var(--font-kh, 'Noto Sans Khmer', sans-serif);
    box-sizing: border-box;
}

.staff-card-face.front {
    background: linear-gradient(135deg, var(--card-primary, #2563EB), var(--card-secondary, #1E3A5F));
    color: var(--card-text-light, #FFFFFF);
    padding: 3mm;
}
.staff-card-face.front.engraved .card-name-kh { font-family: 'Moul', serif; }

.staff-card-face.back {
    background: var(--card-secondary, #1E3A5F);
    color: var(--card-text-light, #FFFFFF);
    padding: 3mm;
    font-size: 6.4pt;
    line-height: 1.4;
}

.card-header { display: flex; align-items: center; gap: 2mm; margin-bottom: 2mm; }
.card-header img { width: 9mm; height: 9mm; object-fit: contain; border-radius: 1mm; background: rgba(255,255,255,0.9); }
.card-header .card-company-name { font-size: 6.4pt; line-height: 1.25; }
.card-header .card-company-name .kh { font-size: 7.4pt; font-weight: 700; }

.card-body { display: flex; gap: 2.6mm; }
.card-photo-col { flex-shrink: 0; text-align: center; }
.card-photo-col img {
    width: 21mm; height: 27mm;
    object-fit: cover;
    border-radius: 1.5mm;
    border: 0.4mm solid rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.15);
    display: block;
}
.card-photo-col .card-photo-placeholder {
    width: 21mm; height: 27mm;
    border-radius: 1.5mm;
    border: 0.4mm dashed rgba(255,255,255,0.6);
    display: flex; align-items: center; justify-content: center;
    font-size: 5pt; color: rgba(255,255,255,0.7); text-align: center;
}
.card-blood { font-size: 5.6pt; margin-top: 1mm; color: #FFD6D6; }

.card-info-col { flex: 1; min-width: 0; overflow: hidden; }
.card-name-kh { font-size: 8.4pt; font-weight: 700; line-height: 1.25; }
.card-name-en { font-size: 6.6pt; color: rgba(255,255,255,0.85); margin-bottom: 1.4mm; }
.card-field { font-size: 5.6pt; color: rgba(255,255,255,0.85); margin-bottom: 0.7mm; line-height: 1.3; }
.card-field strong { color: #fff; }
.card-expiry { font-size: 5pt; color: #FFE066; margin-top: 1mm; }

.card-footer {
    position: absolute; left: 3mm; right: 3mm; bottom: 2.6mm;
    display: flex; align-items: flex-end; justify-content: space-between;
    border-top: 0.3mm solid rgba(255,255,255,0.3);
    padding-top: 1.4mm;
}
.card-footer .card-qr-wrap svg { width: 13mm; height: 13mm; display: block; background: #fff; border-radius: 0.6mm; padding: 0.6mm; box-sizing: border-box; }
.card-footer .card-number-label { font-size: 4.4pt; color: rgba(255,255,255,0.75); margin-top: 0.6mm; }
.card-sig-line { text-align: center; font-size: 4.4pt; color: rgba(255,255,255,0.6); }
.card-sig-line .line { border-top: 0.3mm solid rgba(255,255,255,0.5); width: 22mm; margin: 0 auto 0.6mm; }

.card-back-company { font-size: 6.4pt; margin-bottom: 1.6mm; }
.card-back-company .name { font-size: 7pt; font-weight: 700; }
.card-back-divider { border-top: 0.3mm solid rgba(255,255,255,0.3); margin: 1.4mm 0; }
.card-back-emergency .title { font-size: 6pt; font-weight: 700; color: #FFB3B3; margin-bottom: 0.5mm; }
.card-back-barcode { text-align: center; margin-top: 1.4mm; font-size: 5.4pt; letter-spacing: 1px; color: rgba(255,255,255,0.85); }
.card-back-terms { font-size: 4.2pt; color: rgba(255,255,255,0.55); margin-top: 1.6mm; line-height: 1.35; }

.staff-card-print-label {
    font-size: 12px; color: var(--text-muted); text-align: center;
}

/* ── 3. Physical print output ─────────────────────────────────── */

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    .staff-card-print-wrap { padding: 0; gap: 0; }
    .staff-card-faces { gap: 0; }
    .staff-card-print-label { display: none; }
    .staff-card-face { box-shadow: none; page-break-inside: avoid; }
    .staff-card-face.front { page-break-after: always; }
}

/* ── 4. On-screen-only toolbar (Print again / Back), same visual
   language as print.css's own toolbar (Section 28) — duplicated
   here in miniature rather than imported, since this page
   deliberately does not load print.css (its @page is hardcoded to
   A4 — see this file's own header comment). Never printed. ───── */
.print-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #F5F5F7;
    border-bottom: 1px solid #E2E4E9;
}
.print-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid #D0D3DA;
    background: #FFFFFF;
    color: #1A1A2E;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.print-toolbar-btn:hover {
    background: #F5F5F7;
    box-shadow: 0 2px 8px rgba(16,24,40,.10);
    transform: translateY(-1px);
}
.print-toolbar-btn.primary {
    background: linear-gradient(135deg, #2563EB, #1E3A5F);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.print-toolbar-btn.primary:hover {
    box-shadow: 0 6px 16px rgba(37,99,235,.38);
}
.print-toolbar-btn svg { width: 15px; height: 15px; }

/* ── 5. Card Templates Designer (S32) ─────────────────────────── */

.template-designer-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 991px) {
    .template-designer-layout { grid-template-columns: 1fr; }
}

.template-designer-form { padding: 20px; }
.template-designer-preview {
    position: sticky;
    top: 84px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}
@media (max-width: 991px) {
    .template-designer-preview { position: static; }
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0 10px;
    color: var(--text);
}
.color-field-row { flex-wrap: wrap; }
.color-input-pair { display: flex; align-items: center; gap: 8px; }
.color-input-pair input[type="color"] {
    width: 40px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
}
.color-hex-input { width: 90px; font-family: monospace; text-transform: uppercase; }

.toggle-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 16px;
}

.template-preview-qr-box {
    width: 13mm; height: 13mm;
    background: repeating-conic-gradient(#fff 0% 25%, #ccc 0% 50%) 0 0 / 4mm 4mm;
    border-radius: 0.6mm;
}

.card-name-kh.engraved-font,
.staff-card-face.front.engraved .card-name-kh { font-family: 'Moul', serif; }

.template-card { transition: transform .15s ease, box-shadow .15s ease; }
.template-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.10); }

/* ── 6. Print Sheet (S33) — A4, 2x2 grid, cut guides ──────────── */

.print-sheet-page {
    width: 190mm; /* A4 width (210mm) minus 10mm margins each side, per @page rule */
    margin: 0 auto 10mm;
}
.print-sheet-page.page-break { page-break-before: always; }

.print-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, 85.6mm);
    grid-template-rows: repeat(2, 54mm);
    gap: 10mm;
    justify-content: center;
}
.print-sheet-cell {
    border: 0.3mm dashed #9AA1AC;
    padding: 2mm;
    display: flex;
    align-items: center;
    justify-content: center;
}
.print-sheet-cell-empty { border-style: dashed; opacity: 0.3; }
.print-sheet-cell .staff-card-face { box-shadow: none; }

@media screen {
    .print-sheet-page { background: #fff; padding: 10mm; box-shadow: 0 2px 10px rgba(0,0,0,.12); border-radius: 4px; }
}
@media print {
    .print-sheet-page { margin: 0; }
    .print-sheet-cell { border-style: dashed; }
}

/* ── 7. Digital Card (S33) ────────────────────────────────────── */

.digital-card-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border: 3px solid var(--border);
}
.digital-card-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-hover, var(--surface));
    color: var(--text-muted);
}
.digital-card-photo-placeholder svg { width: 42px; height: 42px; }
.digital-card-qr-wrap { display: flex; justify-content: center; margin: 18px 0 10px; }
.digital-card-qr-wrap svg { width: 160px; height: 160px; }
.digital-card-link-row { display: flex; gap: 8px; }
.digital-card-link-row input {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
}

/* ── 8. Bulk Issue employee checklist (S33) ───────────────────── */

.bulk-employee-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
}
.bulk-employee-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s ease;
}
.bulk-employee-row:last-child { border-bottom: none; }
.bulk-employee-row:hover { background: var(--surface-hover, var(--surface)); }
.bulk-employee-row.is-disabled { opacity: 0.55; cursor: not-allowed; }
.bulk-employee-row input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; }

/* Live "who's selected" strip above the checklist — count + a
   removable chip per selected employee, so the current selection
   stays visible even after scrolling or filtering the list below.
   Same card look as .bulk-action-bar (S33) but allowed to wrap onto
   several lines, since a chip row can get long. */
.bulk-selected-bar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
}
.bulk-selected-bar.is-visible { display: flex; }
.bulk-selected-bar .bulk-count { font-weight: 600; flex-shrink: 0; }
.bulk-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    border-radius: 999px;
    background: var(--surface-hover, var(--surface));
    border: 1px solid var(--border);
    font-size: 0.78rem;
}
.bulk-selected-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 13px;
}
.bulk-selected-chip button:hover { color: var(--danger, #dc2626); }

/* ── 9. Bulk-select action bar on the Staff Cards list (S33) ──── */

.bulk-action-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    box-shadow: 0 2px 8px rgba(16,24,40,.06);
}
.bulk-action-bar.is-visible { display: flex; }
.bulk-action-bar .bulk-count { font-weight: 600; margin-right: auto; }

/* ── 10. Document Print Template Settings watermark support (S41) —
   duplicated (not shared) from print.css deliberately, since this
   stylesheet intentionally never loads print.css (its @page is
   hardcoded to A4, see this file's own top-of-file note). Card
   background image support is out of scope this season — the card
   face already has its own primary/secondary gradient background
   from the Card Template (S32), and a page-level background image
   would rarely be visible behind a small physical card. ───────── */
.print-doc-watermark-text {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}
.print-doc-watermark-image {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 5;
    max-width: 50%;
    max-height: 50%;
}
.print-page-number-hint { font-size: 11px; color: var(--text-muted); }