/* public/assets/css/s36-resignations.css
   KHMER HRMS — Staff Resignation (M18)
   Season: S36 — Staff Resignation

   Two halves, both namespaced (.resign-*) so they are harmless on any
   other page:
     1. App screens (index / my / create / show): timeline, clearance
        checklist, progress bar, action cards.
     2. Print letters (acceptance / experience): loaded by the shared
        print shell (print_page_start.php), same always-loaded
        convention as s34-certifications.css / s35-awards.css.

   Colours come only from theme variables (Day/Night safe) — except
   the letter block, which is paper and therefore always dark-on-white
   like every other print document in this project.
   Spacing follows the 8px scale (8/16/24/32). */

/* ═══ App screens ═══════════════════════════════════════════════ */

/* Unscoped on purpose: my.php uses it inside .resign-summary, but
   show.php (Resignation Detail card + Severance section) uses the
   same class bare, with no .resign-summary wrapper. Scoping it to
   .resign-summary left show.php's grids completely unstyled — plain
   stacked divs on every screen size, not just a responsive miss. */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.resign-banner { margin-bottom: 16px; }

.resign-chip {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--text-muted);
}
.resign-chip svg { width: 14px; height: 14px; }

.resign-action-card { margin-top: 16px; }
.resign-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* Timeline */
.resign-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
    position: relative;
}
.resign-timeline::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}
.resign-tl-item {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    position: relative;
}
.resign-tl-dot {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--text-muted);
    z-index: 1;
}
.resign-tl-dot svg { width: 16px; height: 16px; }
.resign-tl-item.tone-info    .resign-tl-dot { border-color: var(--primary); color: var(--primary); }
.resign-tl-item.tone-warning .resign-tl-dot { border-color: #D97706; color: #D97706; }
.resign-tl-item.tone-success .resign-tl-dot { border-color: #16A34A; color: #16A34A; }
.resign-tl-item.tone-danger  .resign-tl-dot { border-color: #DC2626; color: #DC2626; }
.resign-tl-meta { font-size: 0.78rem; }
.resign-tl-note {
    margin-top: 4px;
    padding: 8px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* Clearance checklist */
.resign-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
.resign-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #16A34A);
    transition: width 0.4s ease;
}
.resign-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.resign-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.resign-checklist li:last-child { border-bottom: 0; }
.resign-checklist form { display: contents; }
.resign-check-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
button.resign-check-btn:hover { background: var(--surface); color: var(--primary); }
.resign-check-btn svg { width: 22px; height: 22px; }
.resign-checklist li.is-cleared .resign-check-btn { color: #16A34A; }
.resign-checklist li.is-cleared .resign-check-label { text-decoration: line-through; opacity: 0.7; }
.resign-check-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.resign-check-when { font-size: 0.75rem; white-space: nowrap; }

@media (max-width: 575px) {
    .resign-check-when { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .resign-progress-bar { transition: none; }
}

/* ═══ Print letters ═════════════════════════════════════════════ */

.resign-letter {
    max-width: 170mm;
    margin: 0 auto;
    padding: 8mm 0 0;
    color: #1A1A2E;
    font-size: 11pt;
    line-height: 1.6;
}
.resign-letter p { margin: 0 0 4px; }
.resign-letter .kh { color: #374151; }
.resign-letter-date { text-align: right; margin-bottom: 16px !important; }
.resign-letter-to { margin-bottom: 16px; }
.resign-subject { font-weight: 700; margin: 16px 0 !important; }
.resign-para { margin-bottom: 12px; break-inside: avoid; page-break-inside: avoid; }
.resign-emph p:first-child { font-weight: 700; }
.resign-sign {
    margin-top: 32px;
    break-inside: avoid;
    page-break-inside: avoid;
}
.resign-sign-line {
    width: 60mm;
    border-top: 1px solid #1A1A2E;
    margin: 40px 0 4px;
}