/* Shared searchable controls and workspace refinements. */
:root { --muted: #64766b; --control-height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 150; padding: 12px 18px; border-radius: 8px; background: var(--green-dark); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: white; }
.search-select { min-width: 0; width: 100%; text-align: left; font-weight: 400; }
.select-control { display: flex; align-items: center; min-height: var(--control-height); border: 1px solid #d7e1da; border-radius: 10px; background: white; padding: 0 8px 0 12px; gap: 7px; transition: border-color .15s, box-shadow .15s; }
.select-control:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #167d6214; }
.select-control input { border: 0; background: transparent; outline: none; box-shadow: none; padding: 10px 0; margin: 0; height: 42px; min-height: 0; width: 100%; min-width: 0; font-size: 13px; color: var(--ink); text-overflow: ellipsis; }
.select-control input:focus-visible { outline: none; }
.select-control input::placeholder { color: #708479; opacity: 1; }
.select-search-icon { display: flex; flex-shrink: 0; color: #7a9485; }
.select-clear, .select-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: #71867a; }
.select-clear:hover, .select-toggle:hover { color: var(--green); background: var(--sage); }
.search-select[data-open="true"] .select-toggle svg { transform: rotate(180deg); }
.search-select.invalid .select-control { border-color: #bf6656; }
.search-select.is-disabled .select-control { background: #f3f5f2; }
.search-select.is-disabled input { color: #708077; cursor: not-allowed; }
.select-popup { position: fixed; z-index: 120; visibility: hidden; background: white; border: 1px solid #d1dfd5; box-shadow: 0 12px 34px #193d2929, 0 2px 6px #193d2910; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; padding: 5px; color: var(--ink); font-size: 13px; }
.select-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.select-option { min-height: 42px; padding: 10px 11px; border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; line-height: 1.5; }
.select-option > span { min-width: 0; overflow-wrap: anywhere; }
.select-option strong { font-size: 13px; display: block; font-weight: 600; }
.select-option small { font-size: 11px; display: block; color: #65796d; margin-top: 2px; }
.select-option:hover, .select-option.is-active { background: #eaf4ee; }
.select-option.is-active { box-shadow: inset 3px 0 0 var(--green); }
.select-option.is-selected { color: var(--green-dark); }
.select-option svg { flex-shrink: 0; }
.select-no-results { padding: 18px 12px; color: var(--muted); }
.select-hint { flex-shrink: 0; padding: 9px 11px 5px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; }
.select-hint span { display: block; color: #64796b; }
.filter-bar > .search-select { max-width: 260px; min-width: 180px; flex: 1; }
.filter-bar.wrap { gap: 16px; }
.filter-bar.wrap > label { min-width: 160px; }
.filter-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 22px; background: #fbfcfa; border-bottom: 1px solid var(--line); }
.filter-toolbar .toolbar-caption { margin-right: auto; color: var(--muted); font-size: 12px; }
.filter-toolbar .btn { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.filter-toolbar .active { background: var(--sage); color: var(--green-dark); border-color: #b5ccbe; }
.filter-toolbar .filter-reset { color: #6b7d72; }
.filter-pending { display: flex; align-items: center; gap: 9px; padding: 12px 22px; background: #fff8e8; border-top: 1px solid #eee1c1; color: #826327; font-size: 12px; line-height: 1.6; }
.filter-pending svg { flex-shrink: 0; }
.panel { box-shadow: 0 3px 12px #233c3404; }
.panel-header h2 { font-size: 17px; }
.panel-header p, .page-header p { font-size: 13px; line-height: 1.6; }
.stat-label { font-size: 12px; }
.stat-caption { font-size: 11px; line-height: 1.6; }
.form-grid > label, .filter-bar > label { font-size: 12px; font-weight: 600; gap: 8px; }
.form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea, .filter-bar input, .filter-bar select { font-size: 13px; min-height: var(--control-height); border-radius: 10px; }
.form-grid .select-control input, .filter-bar .select-control input { min-height: 0; border-radius: 0; }
.form-grid > label > small { font-weight: 400; font-size: 11px; line-height: 1.6; }
.form-grid { row-gap: 22px; }
.form-actions { gap: 12px; }
.form-actions .btn { min-height: 44px; font-size: 12px; }
.drawer .form-actions { position: sticky; bottom: -28px; background: #fffffff2; backdrop-filter: blur(8px); padding: 17px 0; border-top: 1px solid var(--line); margin-top: 22px; z-index: 2; }
.drawer-header { position: sticky; top: -28px; background: #fffffff5; z-index: 2; padding: 15px 0; border-bottom: 1px solid var(--line); }
table { font-size: 12px; }
th { font-size: 10px; font-weight: 600; color: #667b6d; }
td > strong, td > a > strong { font-size: 12px; }
td small, .person-cell small { font-size: 10px; color: #63786a; }
tbody tr:hover { background: #fafcf9; }
.badge { font-size: 10px; padding: 5px 10px; }
.notice { align-items: flex-start; }
.notice > svg { flex-shrink: 0; margin-top: 3px; }
.notice > span { flex: 1; }
.notice-dismiss { border: 0; border-radius: 6px; padding: 4px; background: transparent; color: inherit; display: inline-flex; }
.notice-dismiss:hover { background: #00000008; }
.table-footer { font-size: 11px; }
.sidebar nav a { font-size: 13px; min-height: 44px; }
.btn { font-size: 12px; }
.btn.compact { font-size: 11px; }
.breadcrumb { font-size: 12px; }
.page-loading { padding: 28px; background: white; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 15px; }
.page-loading p { color: var(--muted); margin: 0; font-size: 13px; }
.skeleton { height: 16px; border-radius: 6px; background: #edf2ec; margin: 16px 0; animation: skeleton-pulse 1.4s ease-in-out infinite alternate; }
.skeleton.title { width: 40%; height: 27px; }
.skeleton.short { width: 65%; }
@keyframes skeleton-pulse { to { opacity: .45; } }
@media(max-width:760px) {
    .filter-bar > .search-select { max-width: none; flex-basis: calc(50% - 8px); min-width: 130px; }
    .filter-bar.wrap > label { min-width: 140px; }
    .filter-toolbar { padding: 12px 15px; gap: 8px; }
    .filter-toolbar .toolbar-caption { flex-basis: 100%; }
    .select-control input, .form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea, .filter-bar input, .filter-bar select { font-size: 16px; }
    .search-input input, .login-form input { font-size: 16px; }
    .select-control { min-height: 48px; }
    .select-clear, .select-toggle { width: 32px; height: 40px; }
    .select-option { min-height: 48px; }
    .select-hint span { display: none; }
    .drawer { max-height: calc(100dvh - 24px); }
    .drawer .form-actions { bottom: -23px; }
    .drawer-header { top: -23px; }
    .form-actions .btn { flex: 1; }
    .panel-header { align-items: flex-start; flex-wrap: wrap; }
    .panel-header p { font-size: 12px; }
    .stat-caption { font-size: 10px; }
    .table-footer { flex-wrap: wrap; font-size: 10px; }
    .table-footer > span { max-width: 100%; }
}
@media(prefers-reduced-motion:reduce) { .skeleton { animation: none; } }
@media print { .filter-toolbar, .select-popup, .skip-link, .notice-dismiss { display: none !important; } }