/* styles/components.css
   Buttons, lists, badges, search, pager, checklist, small components
   Extracted from style.css
*/

/* Lists & history */
.list{list-style:none;padding:0;margin:0}
.list li{padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:none}

.history-list{list-style:none;margin:0;padding:0}
.history-list li{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--line);border-radius:10px}
.history-list li:first-child{border-top:none}
.history-list li.active{background:#eee2d7}
.history-list .date{font-weight:600}

/* Badges & pills */
.badge{display:inline-block;width:18px;height:18px;border:1px solid var(--line);border-radius:50%}
.badge.ok{background:#eaf7ea;border-color:#a9d9a9}
.progress-pill{background:#efe7df;color:#6b4a33;padding:3px 8px;border-radius:20px;font-size:12px;min-width:38px;text-align:center;font-weight:600}

/* Search */
.search.card{padding:10px 16px;margin-bottom:12px}
.search input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fbf9f7}

/* Pager */
.pager{display:flex;align-items:center;gap:12px}
.chev{font-weight:600;color:#b08b68}
.pager, .pager * { user-select: none; }
.pager .chev, .pager .muted { cursor: pointer; }
.pager .chev.disabled { opacity: .45; cursor: default; }
.pager .muted.disabled { opacity: .45; cursor: default; }

/* Checklist */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.checklist li:first-child{border-top:none}

/* Icons */
.iconbox{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.iconbox svg{width:18px;height:18px}
.icon-muted line{stroke:#d9d1c9;stroke-width:2;border-radius:2px}
.icon-ok path{stroke:#2e7d32;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Docs list scroll */
.docs-list{max-height:312px; overflow-y:auto; padding:0;margin:0; list-style:none;}
.docs-list li{padding:10px 12px;border-top:1px solid var(--line)}
.docs-list li:first-child{border-top:none}
.docs-list::-webkit-scrollbar{width:8px}
.docs-list::-webkit-scrollbar-thumb{background:var(--chip);border-radius:8px}

/* Report link */
.report-link{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}
.report-link:hover{text-decoration:underline}
.report-link.disabled{opacity:.6;pointer-events:none;cursor:default;text-decoration:none}

/* Buttons */
.btn{display:inline-block;background:#6b4a33;color:#fff;border:none;padding:12px 16px;border-radius:10px;cursor:pointer}
.primary{display:inline-block;background:var(--accent);color:#fff;border:none;padding:12px 16px;border-radius:10px;cursor:pointer;font-weight:600}
.primary:hover{filter:brightness(.95)}
.primary:active{transform:translateY(1px)}

.actions{display:flex;gap:12px;margin-top:8px}
.clean-btn{background:none;border:none;padding:0;color:#fff;cursor:pointer;font:inherit}
.clean-btn:hover{color:var(--accent);text-decoration:underline}

/* Specific styling for the signature clear button: default white background with brown text,
    on hover invert to brown background with white text. Uses an accessible transition. */
#lf-sign-clear, #rs-sign-clear{
   background:#ffffff;
   color:#7a3b18; /* brown */
   border:1px solid #7a3b18;
   padding:4px 8px; /* reduced 50% */
   border-radius:2px;
   cursor:pointer;
   font:inherit;
   font-size:0.9em; /* reduce text size ~50% */
   line-height:1;
   transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;
}
#lf-sign-clear:hover, #lf-sign-clear:focus, #rs-sign-clear:hover, #rs-sign-clear:focus{
   background:#7a3b18;
   color:#ffffff;
   border-color:#7a3b18;
   outline:none;
}

/* Small spinner/button states */
.btn[disabled], .primary[disabled], button[disabled]{ opacity:0.6; cursor:default; transform:none }

/* Small utilities used by components (kept here until utilities.css created) */
.pager, .muted { user-select: none }