/* Ramstrom / CromeSky Late Fee Dashboard V6.1
   Purpose: embed the late-fee/payment card inside each Recent Jobs job card/row,
   not in a separate row, not in route cards, and not squeezed into the Actions column. */
.csky-latefee-table-v60,
.csky-latefee-table-v60 * {
  box-sizing: border-box !important;
}
.csky-latefee-table-v60 {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  overflow: visible !important;
}
.csky-latefee-table-v60 > thead > tr > th,
.csky-latefee-table-v60 > tbody > tr > td,
.csky-latefee-table-v60 > tr > th,
.csky-latefee-table-v60 > tr > td,
.csky-latefee-cell-v60 {
  vertical-align: top !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.csky-latefee-table-v60 > thead > tr > th:first-child,
.csky-latefee-table-v60 > tbody > tr > td:first-child,
.csky-latefee-table-v60 > tr > th:first-child,
.csky-latefee-table-v60 > tr > td:first-child {
  width: 58px !important;
  min-width: 52px !important;
  max-width: 72px !important;
  white-space: nowrap !important;
}
.csky-latefee-table-v60 > thead > tr > th:last-child,
.csky-latefee-table-v60 > tbody > tr > td:last-child,
.csky-latefee-table-v60 > tr > th:last-child,
.csky-latefee-table-v60 > tr > td:last-child {
  width: 72px !important;
  min-width: 64px !important;
  text-align: center !important;
}

/* Kill older separate-row/card-anchor layouts that caused card floating and horizontal scroll. */
.csky-latefee-inline-row-v59,
.csky-latefee-inline-row-v58,
.csky-latefee-inline-row-v57,
.csky-latefee-inline-row-v56,
.csky-latefee-card-anchor-v58,
.csky-latefee-card-anchor-v57,
.csky-latefee-card-anchor-v56,
.csky-latefee-card-anchor-v55 {
  display: none !important;
}

.csky-latefee-row-v60 {
  position: relative !important;
}
.csky-latefee-embedded-wrap-v60 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  clear: both !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 18 !important;
}
.csky-latefee-slot-v60,
.csky-latefee-slot-v5 {
  display: block !important;
  width: 100% !important;
  max-width: 460px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}
.csky-latefee-slot-v5,
.csky-latefee-slot-v5 * {
  box-sizing: border-box !important;
}
.csky-latefee-mini {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-family: inherit !important;
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(12, 16, 26, .98), rgba(80, 43, 15, .94)) !important;
  border: 1px solid rgba(255, 214, 120, .36) !important;
  border-radius: 14px !important;
  padding: 9px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 0 16px rgba(255,187,72,.07) !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}
.csky-latefee-loading-v60,
.csky-latefee-loading-v59,
.csky-latefee-loading-v58,
.csky-latefee-loading-v56 {
  min-height: 62px !important;
  align-content: center !important;
  color: #ffe9a8 !important;
}
.csky-latefee-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.csky-latefee-head strong {
  color: #ffe9a8 !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
.csky-latefee-head span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #dbeafe !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.csky-latefee-mini.is-applied .csky-latefee-head span { background: rgba(22,163,74,.24) !important; border-color: rgba(74,222,128,.38) !important; color: #bbf7d0 !important; }
.csky-latefee-mini.is-denied .csky-latefee-head span { background: rgba(239,68,68,.21) !important; border-color: rgba(248,113,113,.36) !important; color: #fecaca !important; }
.csky-latefee-mini.is-ready .csky-latefee-head span { background: rgba(245,158,11,.22) !important; border-color: rgba(251,191,36,.36) !important; color: #fde68a !important; }
.csky-latefee-mini.is-paid .csky-latefee-head span { background: rgba(16,185,129,.25) !important; border-color: rgba(110,231,183,.45) !important; color: #d1fae5 !important; }
.csky-overdue-days-label-v5 {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: rgba(248, 113, 113, .18) !important;
  border: 1px solid rgba(248, 113, 113, .34) !important;
  color: #fecaca !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}
.csky-latefee-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 3px 10px !important;
  padding: 7px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  overflow: hidden !important;
}
.csky-latefee-grid span { color: #cbd5e1 !important; font-size: 10px !important; white-space: nowrap !important; }
.csky-latefee-grid b { color: #fff !important; font-size: 11px !important; text-align: right !important; white-space: nowrap !important; }
.csky-latefee-due { margin: 0 !important; color: #d1d5db !important; font-size: 10px !important; overflow-wrap: anywhere !important; }
.csky-latefee-due b { color: #fff3c4 !important; }
.csky-latefee-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
}
.csky-latefee-actions form,
.csky-latefee-paid-form,
.csky-latefee-due-form {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.csky-lf-btn,
.csky-latefee-due-form button {
  width: 100% !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 7px 7px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.22) !important;
}
.csky-lf-btn.apply { background: #ffd166 !important; color: #2b1604 !important; }
.csky-lf-btn.deny { background: #fb7185 !important; color: #270610 !important; }
.csky-lf-btn.paid { background: #86efac !important; color: #052e16 !important; }
.csky-lf-btn.retry { margin-top: 7px !important; background: #7dd3fc !important; color: #082f49 !important; max-width: 120px !important; }
.csky-lf-btn:disabled { opacity: .56 !important; cursor: not-allowed !important; }
.csky-latefee-due-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 86px !important;
  gap: 6px !important;
  align-items: center !important;
}
.csky-latefee-due-form input[type="date"] {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.35) !important;
  color: #f8fafc !important;
  padding: 4px 7px !important;
  font-size: 11px !important;
}
.csky-latefee-due-form button { background: #7dd3fc !important; color: #082f49 !important; }
.csky-latefee-error {
  color: #fecaca !important;
  border-color: rgba(248,113,113,.55) !important;
  background: linear-gradient(135deg, rgba(55, 10, 20, .96), rgba(18, 18, 28, .96)) !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}
.csky-latefee-toast-v5 {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 99999 !important;
  max-width: min(460px, calc(100vw - 36px)) !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(15,23,42,.97) !important;
  color: #dcfce7 !important;
  border: 1px solid rgba(74,222,128,.40) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
.csky-latefee-toast-v5.is-error {
  color: #fecaca !important;
  border-color: rgba(248,113,113,.48) !important;
}
.csky-archive-paid-working-v60 { opacity: .70 !important; cursor: wait !important; }
.csky-archived-paid-client-hidden-v60 { opacity: .25 !important; transition: opacity .2s ease !important; }
.csky-route-latefee-rejected-v57 > .csky-latefee-slot-v5 { display: none !important; }

@media (max-width: 1100px) {
  .csky-latefee-slot-v60,
  .csky-latefee-slot-v5 { max-width: 420px !important; }
}
@media (max-width: 920px) {
  .csky-latefee-slot-v60,
  .csky-latefee-slot-v5 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .csky-latefee-actions { grid-template-columns: 1fr !important; }
  .csky-latefee-due-form { grid-template-columns: 1fr !important; }
}

/* V6.1: action icon repair CSS is loaded separately as /assets/css/ramstrom_recent_jobs_action_repair_v61.css */