/* UI · css/approvals.css · Approval Flows window: lists, request page, designer. */
.af-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.af-head h2 { margin: 0; font-size: 19px; color: #0B1533; }
.af-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.af-tools input, .af-tools select { height: 32px; border: 1px solid #D5DCE8; border-radius: 8px; padding: 0 10px; }
.af-sub { margin: -6px 0 10px; }
.af-table-wrap { overflow-x: auto; border: 1px solid #E8ECF4; border-radius: 12px; background: #fff; }
.af-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.af-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B7A99; background: #F7F9FC; padding: 9px 12px; }
.af-table td { padding: 10px 12px; border-top: 1px solid #F0F3F8; vertical-align: top; }
.af-table td small { color: #8A96AD; }
.af-table tr[data-req], .af-table tr[data-fl] { cursor: pointer; }
.af-table tr[data-req]:hover td, .af-table tr[data-fl]:hover td { background: #F6F9FF; }
.af-overdue td:first-child { box-shadow: inset 3px 0 0 #DC2626; }
.af-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.st-blue { background: #E8EFFF; color: #1C47BF; } .st-green { background: #E6F7EE; color: #15803D; } .st-red { background: #FDECEC; color: #B91C1C; }
.st-amber { background: #FEF3E2; color: #B45309; } .st-grey { background: #EEF1F5; color: #475467; }
.af-empty { padding: 40px 20px; text-align: center; color: #6B7A99; background: #fff; border: 1px dashed #D5DCE8; border-radius: 12px; }
.af-empty b { display: block; color: #26324A; margin-bottom: 4px; }
.af-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.af-card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #E3E8F2; border-radius: 14px; background: #fff; cursor: pointer; }
.af-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(var(--brand-rgb), .12); }
.af-card b { font-size: 15px; color: #0B1533; } .af-card small { color: #6B7A99; }
.af-cat { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
.af-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.af-node { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: #F2F5FB; border: 1px solid #E3E8F2; font-size: 12.5px; color: #26324A; }
.af-node small { font-size: 10.5px; color: #8A96AD; }
.af-node.af-start, .af-node.af-end { background: #0B1533; color: #fff; border-color: #0B1533; }
.af-node.done { background: #E6F7EE; border-color: #A7E3C1; } .af-node.current { background: #E8EFFF; border-color: var(--brand); font-weight: 600; }
.af-node.skipped { opacity: .55; text-decoration: line-through; } .af-node.rejected { background: #FDECEC; border-color: #F5B5B5; }
.af-arrow { color: #A0AEC6; }
.af-form, .af-box { background: #fff; border: 1px solid #E8ECF4; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.af-box h3 { margin: 0 0 10px; font-size: 14px; color: #0B1533; display: flex; align-items: center; gap: 10px; }
.af-form .field, .af-box .field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #475467; margin-bottom: 10px; }
.af-form input, .af-form select, .af-form textarea, .af-box input, .af-box select, .af-box textarea { border: 1px solid #D5DCE8; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; }
.af-box input[type="checkbox"], .af-form input[type="checkbox"] { width: auto; }
.af-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btn-danger { background: #DC2626 !important; color: #fff !important; border-color: #DC2626 !important; }
.af-act { border-color: #C9D7FB; background: #F8FAFF; }
.af-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.af-dl { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.af-dl dt { color: #6B7A99; } .af-dl dd { margin: 0; color: #1D2939; word-break: break-word; }
.af-docrow { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F0F3F8; flex-wrap: wrap; }
.af-docrow small { display: block; color: #8A96AD; font-size: 11.5px; }
.af-docops { display: flex; gap: 6px; flex-wrap: wrap; }
.af-docs { border: 1px solid #E8ECF4; border-radius: 10px; padding: 10px 12px; max-height: 220px; overflow: auto; margin: 0 0 10px; }
.af-doc { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; } .af-doc small { color: #8A96AD; }
.af-note { padding: 8px 10px; background: #FBFCFE; border: 1px solid #EEF1F6; border-radius: 10px; margin-bottom: 8px; }
.af-note p { margin: 4px 0 0; white-space: pre-wrap; font-size: 13px; } .af-note small { color: #8A96AD; }
.af-noteadd { display: flex; gap: 8px; align-items: flex-end; } .af-noteadd textarea { flex: 1; }
.af-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #E3E8F2; }
.af-timeline li { position: relative; padding: 0 0 10px 12px; font-size: 13px; }
.af-timeline li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.af-timeline small { display: block; color: #8A96AD; font-size: 11.5px; } .af-timeline p { margin: 3px 0 0; color: #475467; }
.af-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.af-fieldrow { display: grid; grid-template-columns: 1fr 1.3fr .9fr 1.5fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.af-step { border: 1px solid #E3E8F2; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #FBFCFE; }
.af-step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.af-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; margin-top: 6px; }
.af-checks > span { color: #6B7A99; font-weight: 600; }
.af-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #344054; }
@media (max-width: 760px) {
  .af-fieldrow { grid-template-columns: 1fr 1fr; }
  .af-head h2 { font-size: 16px; }
  .af-noteadd { flex-direction: column; align-items: stretch; }
}