/* hrh-ui.css — کتابخانهٔ کامپوننت مشترک خانه منابع انسانی (d2)
 * فقط از توکن‌های hrh-tokens.css استفاده می‌کند؛ هیچ رنگ تازه‌ای تعریف نمی‌شود.
 * قاعدهٔ حالت تاریک: --hrh-brand-700 در تم تاریک «روشن» است (#e7f2ed)؛
 *   پس فقط برای متن (color) به کار می‌رود، هرگز برای پس‌زمینه یا سایه. پس‌زمینهٔ برند = --hrh-brand-900.
 *   بررسی خودکار: php scripts/check-ui.php
 * راست‌به‌چپ: فقط خصوصیات منطقی (inline/block) به کار رفته است. */
:root{--hrh-ui-on-gold:var(--hrh-text);--hrh-ui-focus:var(--hrh-accent-gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hrh-ui-on-gold:var(--hrh-surface-page)}}
:root[data-theme="dark"]{--hrh-ui-on-gold:var(--hrh-surface-page)}

.hrh-ui,.hrh-ui *{box-sizing:border-box}
.hrh-ui{font-family:var(--hrh-font-body);color:var(--hrh-text);line-height:var(--hrh-leading-body);direction:rtl}
.hrh-ui :focus-visible,.hrh-btn:focus-visible,.hrh-tab:focus-visible,.hrh-chip:focus-visible{outline:2px solid var(--hrh-ui-focus);outline-offset:2px}

/* ---------- دکمه‌ها ---------- */
.hrh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hrh-space-2);min-block-size:44px;padding-inline:var(--hrh-space-5);border:1px solid transparent;border-radius:var(--hrh-radius-pill);font:inherit;font-size:var(--hrh-fs-sm);font-weight:var(--hrh-fw-bold);line-height:1.2;text-decoration:none;cursor:pointer;transition:background var(--hrh-dur-base) var(--hrh-ease),border-color var(--hrh-dur-base) var(--hrh-ease),box-shadow var(--hrh-dur-base) var(--hrh-ease),transform var(--hrh-dur-fast) var(--hrh-ease)}
.hrh-btn:active{transform:translateY(1px)}
.hrh-btn[disabled],.hrh-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.hrh-btn--primary{background:var(--hrh-brand-900);color:var(--hrh-on-brand);box-shadow:var(--hrh-shadow-sm)}
.hrh-btn--primary:hover{box-shadow:var(--hrh-shadow-md);color:var(--hrh-on-brand)}
.hrh-btn--secondary{background:transparent;color:var(--hrh-brand-700);border-color:currentColor} /* d8: حاشیه هم‌رنگ متن تا در تم تاریک هم ≥۳:۱ */
.hrh-btn--secondary:hover{background:var(--hrh-brand-100)}
.hrh-btn--text{background:transparent;color:var(--hrh-brand-700);padding-inline:var(--hrh-space-3);min-block-size:36px}
.hrh-btn--text:hover{text-decoration:underline;text-underline-offset:4px}
.hrh-btn--special{background:var(--hrh-accent-gold-lt);color:var(--hrh-ui-on-gold);box-shadow:var(--hrh-shadow-sm)} /* d8: سفید روی طلایی ۳٫۶:۱ بود؛ اکنون ۷٫۵ روشن و ۹ تاریک */
.hrh-btn--special:hover{box-shadow:var(--hrh-shadow-md)}
.hrh-btn--danger{background:transparent;color:var(--hrh-danger);border-color:var(--hrh-danger)}
.hrh-btn--danger:hover{background:color-mix(in srgb,var(--hrh-danger) 12%,transparent)}
.hrh-btn--icon{inline-size:44px;padding-inline:0;border-radius:var(--hrh-radius-md);background:transparent;color:var(--hrh-brand-700);border-color:var(--hrh-border)}
.hrh-btn--icon:hover{background:var(--hrh-brand-100)}
.hrh-btn--sm{min-block-size:36px;padding-inline:var(--hrh-space-4)}
.hrh-btn.is-loading{position:relative;color:transparent;pointer-events:none}
.hrh-btn.is-loading::after{content:"";position:absolute;inline-size:18px;block-size:18px;border:2px solid var(--hrh-on-brand);border-inline-end-color:transparent;border-radius:50%;animation:hrh-spin .7s linear infinite}
.hrh-btn--secondary.is-loading::after,.hrh-btn--text.is-loading::after,.hrh-btn--danger.is-loading::after{border-color:var(--hrh-text-muted);border-inline-end-color:transparent}

/* ---------- برچسب ---------- */
.hrh-badge{display:inline-flex;align-items:center;gap:var(--hrh-space-1);padding:2px var(--hrh-space-3);border-radius:var(--hrh-radius-pill);background:var(--hrh-brand-100);color:var(--hrh-brand-700);font-size:var(--hrh-fs-xs);font-weight:var(--hrh-fw-bold);line-height:1.8}
.hrh-badge--gold{background:var(--hrh-accent-cream);color:var(--hrh-text);border-inline-start:3px solid var(--hrh-accent-gold)} /* d8: طلایی روی کرم در تم روشن ۳٫۲:۱ بود */
.hrh-badge--danger{background:transparent;color:var(--hrh-danger);border:1px solid var(--hrh-danger)}

/* ---------- کارت مدخل ---------- */
.hrh-card{display:flex;flex-direction:column;gap:var(--hrh-space-3);padding:var(--hrh-space-5);background:var(--hrh-surface-card);border:1px solid var(--hrh-border);border-radius:var(--hrh-radius-lg);box-shadow:var(--hrh-shadow-sm);color:var(--hrh-text);text-decoration:none;transition:box-shadow var(--hrh-dur-base) var(--hrh-ease),border-color var(--hrh-dur-base) var(--hrh-ease),transform var(--hrh-dur-base) var(--hrh-ease)}
a.hrh-card:hover{box-shadow:var(--hrh-shadow-md);border-color:var(--hrh-brand-900);transform:translateY(-2px)}
.hrh-card__meta{display:flex;flex-wrap:wrap;gap:var(--hrh-space-2)}
.hrh-card__title{margin:0;font-size:var(--hrh-fs-lg);font-weight:var(--hrh-fw-bold);line-height:var(--hrh-leading-tight);color:var(--hrh-text)}
.hrh-card__text{margin:0;font-size:var(--hrh-fs-sm);color:var(--hrh-text-muted)}
.hrh-card__more{margin-block-start:auto;font-size:var(--hrh-fs-sm);font-weight:var(--hrh-fw-bold);color:var(--hrh-brand-700)}
.hrh-grid{display:grid;gap:var(--hrh-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

/* ---------- فرم ---------- */
.hrh-field{display:flex;flex-direction:column;gap:var(--hrh-space-2);margin-block-end:var(--hrh-space-4)}
.hrh-label{font-size:var(--hrh-fs-sm);font-weight:var(--hrh-fw-bold);color:var(--hrh-text)}
.hrh-input,.hrh-select,.hrh-textarea{inline-size:100%;min-block-size:44px;padding:var(--hrh-space-2) var(--hrh-space-4);background:var(--hrh-surface-card);color:var(--hrh-text);border:1px solid var(--hrh-text-muted);border-radius:var(--hrh-radius-md);font:inherit;font-size:var(--hrh-fs-md);transition:border-color var(--hrh-dur-base) var(--hrh-ease),box-shadow var(--hrh-dur-base) var(--hrh-ease)}
.hrh-textarea{min-block-size:120px;resize:vertical;line-height:var(--hrh-leading-body)}
.hrh-input:hover,.hrh-select:hover,.hrh-textarea:hover{border-color:var(--hrh-text-muted)}
.hrh-input:focus,.hrh-select:focus,.hrh-textarea:focus{outline:none;border-color:var(--hrh-ui-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--hrh-ui-focus) 30%,transparent)}
.hrh-input::placeholder,.hrh-textarea::placeholder{color:var(--hrh-text-muted)}
.hrh-field.is-invalid .hrh-input,.hrh-field.is-invalid .hrh-select,.hrh-field.is-invalid .hrh-textarea{border-color:var(--hrh-danger)}
.hrh-hint{font-size:var(--hrh-fs-xs);color:var(--hrh-text-muted)}
.hrh-error{font-size:var(--hrh-fs-xs);color:var(--hrh-danger);font-weight:var(--hrh-fw-bold)}
.hrh-check{display:flex;align-items:center;gap:var(--hrh-space-3);min-block-size:44px;font-size:var(--hrh-fs-sm);cursor:pointer}
.hrh-check input{inline-size:20px;block-size:20px;accent-color:var(--hrh-brand-900)}

/* ---------- جدول ---------- */
.hrh-table-wrap{overflow-x:auto;border:1px solid var(--hrh-border);border-radius:var(--hrh-radius-md);background:var(--hrh-surface-card)}
.hrh-table{inline-size:100%;border-collapse:collapse;font-size:var(--hrh-fs-sm)}
.hrh-table th,.hrh-table td{padding:var(--hrh-space-3) var(--hrh-space-4);text-align:start;border-block-end:1px solid var(--hrh-border);white-space:nowrap}
.hrh-table th{background:var(--hrh-brand-100);color:var(--hrh-brand-700);font-weight:var(--hrh-fw-bold)}
.hrh-table tbody tr:last-child td{border-block-end:0}
.hrh-table tbody tr:hover td{background:var(--hrh-surface-page)}

/* ---------- تب ---------- */
.hrh-tabs__list{display:flex;gap:var(--hrh-space-1);overflow-x:auto;border-block-end:1px solid var(--hrh-border);scrollbar-width:thin}
.hrh-tab{flex:none;min-block-size:44px;padding-inline:var(--hrh-space-4);background:transparent;border:0;border-block-end:3px solid transparent;color:var(--hrh-text-muted);font:inherit;font-size:var(--hrh-fs-sm);font-weight:var(--hrh-fw-bold);cursor:pointer}
.hrh-tab:hover{color:var(--hrh-text)}
.hrh-tab[aria-selected="true"]{color:var(--hrh-brand-700);border-block-end-color:var(--hrh-brand-900)}
.hrh-tabs__panel{padding-block:var(--hrh-space-5)}
.hrh-tabs__panel[hidden]{display:none}

/* ---------- فیلتر ---------- */
.hrh-filter{display:flex;flex-wrap:wrap;gap:var(--hrh-space-2);padding-block:var(--hrh-space-3)}
.hrh-filter--sticky{position:sticky;inset-block-start:0;z-index:5;background:var(--hrh-surface-page)}
.hrh-chip{display:inline-flex;align-items:center;min-block-size:36px;padding-inline:var(--hrh-space-4);background:var(--hrh-surface-card);color:var(--hrh-text);border:1px solid var(--hrh-border);border-radius:var(--hrh-radius-pill);font:inherit;font-size:var(--hrh-fs-sm);cursor:pointer;transition:background var(--hrh-dur-base) var(--hrh-ease)}
.hrh-chip:hover{border-color:var(--hrh-brand-900)}
.hrh-chip[aria-pressed="true"]{background:var(--hrh-brand-900);border-color:var(--hrh-brand-900);color:var(--hrh-on-brand);font-weight:var(--hrh-fw-bold)}
[data-hrh-item][hidden]{display:none}

/* ---------- پنجره ---------- */
.hrh-modal{inline-size:min(92vw,520px);max-block-size:88vh;padding:0;background:var(--hrh-surface-card);color:var(--hrh-text);border:1px solid var(--hrh-border);border-radius:var(--hrh-radius-lg);box-shadow:var(--hrh-shadow-lg);font-family:var(--hrh-font-body);direction:rtl}
.hrh-modal::backdrop{background:rgba(0,0,0,.55)}
.hrh-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--hrh-space-3);padding:var(--hrh-space-4) var(--hrh-space-5);border-block-end:1px solid var(--hrh-border)}
.hrh-modal__title{margin:0;font-size:var(--hrh-fs-lg);font-weight:var(--hrh-fw-bold)}
.hrh-modal__body{padding:var(--hrh-space-5);overflow:auto}
.hrh-modal__foot{display:flex;flex-wrap:wrap;gap:var(--hrh-space-3);padding:var(--hrh-space-4) var(--hrh-space-5);border-block-start:1px solid var(--hrh-border)}

/* ---------- اعلان ---------- */
.hrh-alert{display:flex;gap:var(--hrh-space-3);padding:var(--hrh-space-4);background:var(--hrh-brand-100);color:var(--hrh-text);border:1px solid var(--hrh-border);border-inline-start:4px solid var(--hrh-brand-900);border-radius:var(--hrh-radius-md);font-size:var(--hrh-fs-sm)}
.hrh-alert--warn{background:var(--hrh-accent-cream);border-inline-start-color:var(--hrh-accent-gold)}
.hrh-alert--danger{background:var(--hrh-surface-card);border-inline-start-color:var(--hrh-danger)}
.hrh-toasts{position:fixed;inset-block-end:var(--hrh-space-5);inset-inline:var(--hrh-space-4);z-index:100000;display:flex;flex-direction:column;align-items:center;gap:var(--hrh-space-2);pointer-events:none}
.hrh-toast{max-inline-size:min(100%,420px);padding:var(--hrh-space-3) var(--hrh-space-5);background:var(--hrh-brand-900);color:var(--hrh-on-brand);border-radius:var(--hrh-radius-md);box-shadow:var(--hrh-shadow-lg);font-family:var(--hrh-font-body);font-size:var(--hrh-fs-sm);animation:hrh-rise var(--hrh-dur-slow) var(--hrh-ease)}
.hrh-toast--danger{background:var(--hrh-surface-card);color:var(--hrh-danger);border:1px solid var(--hrh-danger)}

/* ---------- حالت خالی و بارگذاری ---------- */
.hrh-empty{display:flex;flex-direction:column;align-items:center;gap:var(--hrh-space-3);padding:var(--hrh-space-7) var(--hrh-space-5);text-align:center;background:var(--hrh-surface-card);border:1px dashed var(--hrh-border);border-radius:var(--hrh-radius-lg);color:var(--hrh-text-muted)}
.hrh-empty__title{margin:0;font-size:var(--hrh-fs-lg);font-weight:var(--hrh-fw-bold);color:var(--hrh-text)}
.hrh-skeleton{display:block;min-block-size:1em;border-radius:var(--hrh-radius-sm);background:linear-gradient(90deg,var(--hrh-border) 25%,var(--hrh-brand-100) 50%,var(--hrh-border) 75%);background-size:200% 100%;animation:hrh-shimmer 1.4s linear infinite}
.hrh-spinner{display:inline-block;inline-size:24px;block-size:24px;border:3px solid var(--hrh-border);border-block-start-color:var(--hrh-brand-900);border-radius:50%;animation:hrh-spin .7s linear infinite}

@keyframes hrh-spin{to{transform:rotate(360deg)}}
@keyframes hrh-shimmer{to{background-position:-200% 0}}
@keyframes hrh-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hrh-skeleton,.hrh-spinner,.hrh-btn.is-loading::after{animation-duration:2s}.hrh-ui *,.hrh-ui *::before,.hrh-ui *::after,.hrh-toast,.hrh-gl-tip{transition-duration:0ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}a.hrh-card:hover{transform:none}}
.hrh-ui .hrh-input:hover,.hrh-ui .hrh-select:hover,.hrh-ui .hrh-textarea:hover{border-color:var(--hrh-text)}
@media (min-width:768px){.hrh-toasts{inset-inline:auto;inset-inline-start:var(--hrh-space-5);align-items:flex-start}}