/*
    wfm-screens.css — نظام تصميم شاشات منظومة إدارة القوى العاملة
    ----------------------------------------------------------------
    بادئة موحّدة `wfm-` لكل الوحدة بدل بادئة لكل شاشة: الوحدة لغة تصميم واحدة
    (24 شاشة) وتكرار نفس القواعد 24 مرة يخلق انحرافاً بصرياً لا يمنعه شيء.
    التفرد مضمون بالبادئة نفسها فلا تصادم مع أي شاشة قائمة.

    الألوان والمسافات من التوكنات حصراً — لا HEX جديد.
    المرجع البصري: Pages/Admin/NotificationSchedules.razor.
*/

/*
    توكنات الوحدة — معرّفة على .wfm-shell وعلى .wfm-modal-backdrop معاً.
    السبب: كل شاشات الوحدة (20+ شاشة) تُغلق .wfm-shell ثم ترسم النافذة المنبثقة
    بعدها كشقيق لا كابن، فلو بقيت التوكنات على .wfm-shell وحدها كانت
    `var(--border)` و`var(--radius-sm)` و`var(--shadow)` غير معرّفة داخل النافذة،
    فتسقط تصريحاتها كلها ويظهر النموذج بحقول بلا إطارات (مرصود في
    /hr/rules/policies ونافذة «حزمة جديدة»).
    القيمة نفسها في الموضعين — مصدر واحد لا نسختان متباعدتان.
*/
.wfm-shell,
.wfm-modal-backdrop {
    --radius: 16px;
    --radius-sm: 10px;
    --border: 1px solid var(--border-color);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wfm-shell {
    display: grid;
    gap: var(--space-lg, 24px);
}

/* ══════════ بطاقات المقاييس ══════════ */

.wfm-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md, 16px);
}

.wfm-metric {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-md, 16px);
    box-shadow: var(--shadow);
    display: grid;
    gap: 4px;
    transition: transform 150ms var(--ease);
}

.wfm-metric:hover { transform: translateY(-1px); }

.wfm-metric-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wfm-metric-label .material-icons { font-size: 18px; }

.wfm-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.wfm-metric-hint { font-size: 0.75rem; color: var(--text-muted); }

.wfm-metric.is-ok    .wfm-metric-value { color: var(--success-color); }
.wfm-metric.is-warn  .wfm-metric-value { color: var(--warning-color); }
.wfm-metric.is-error .wfm-metric-value { color: var(--error-color); }
.wfm-metric.is-info  .wfm-metric-value { color: var(--info-color); }

/* ══════════ شريط الأدوات ══════════ */

.wfm-toolbar {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-md, 16px);
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md, 16px);
    /* لا overflow:hidden — الشريط يحتضن <select> */
}

.wfm-field {
    display: grid;
    gap: 4px;
    min-width: 160px;
    flex: 1 1 160px;
}

.wfm-field > label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.wfm-field input,
.wfm-field select,
.wfm-field textarea {
    min-height: 44px;
    font-size: 16px;
    padding-inline: 12px;
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    color: var(--text-primary);
    width: 100%;
}

/* النص متعدد الأسطر: حشو رأسي وارتفاع يتبع المحتوى دون تمدّد أفقي يكسر الشبكة */
.wfm-field textarea {
    padding-block: 10px;
    line-height: 1.6;
    resize: vertical;
}

.wfm-field input:focus,
.wfm-field select:focus,
.wfm-field textarea:focus {
    outline: 2px solid rgba(var(--primary-rgb), 0.35);
    outline-offset: 1px;
    border-color: var(--primary-color);
}

.wfm-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-inline-start: auto;
}

/* ══════════ الأزرار ══════════ */

.wfm-btn {
    min-height: 44px;
    padding-inline: 16px;
    border-radius: var(--radius-sm);
    border: var(--border);
    background: var(--background-primary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 150ms var(--ease), transform 150ms var(--ease);
}

.wfm-btn:hover:not(:disabled) { background: var(--background-secondary); }
.wfm-btn:active:not(:disabled) { transform: translateY(1px); }
.wfm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.wfm-btn.is-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.wfm-btn.is-primary:hover:not(:disabled) { background: var(--primary-dark); }

.wfm-btn.is-danger {
    background: var(--error-color);
    border-color: var(--error-color);
    color: #fff;
}

/* زر ثانوي بلا إطار — للإلغاء بجانب إجراء أساسي، حتى لا يتنافس معه بصرياً */
.wfm-btn.is-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.wfm-btn.is-ghost:hover:not(:disabled) {
    background: var(--background-secondary);
    color: var(--text-primary);
}

.wfm-iconbtn {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms var(--ease);
}

.wfm-iconbtn:hover { background: var(--background-secondary); color: var(--primary-color); }

/* ══════════ الصفوف ══════════ */

.wfm-rows { display: grid; gap: var(--space-sm, 8px); }

.wfm-row {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-md, 16px);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md, 16px);
    transition: border-color 150ms var(--ease);
}

.wfm-row:hover { border-color: var(--primary-color); }

.wfm-row-tag {
    min-width: 56px;
    min-height: 56px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
    padding: 4px;
}

.wfm-row-tag small { display: block; font-size: 0.6875rem; font-weight: 500; opacity: 0.85; }

.wfm-row-body { display: grid; gap: 6px; min-width: 0; }

.wfm-row-title {
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wfm-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.wfm-row-actions { display: flex; gap: 6px; align-items: center; }

/* ══════════ الشرائح ══════════ */

.wfm-chip,
.wfm-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--background-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.wfm-chip .material-icons,
.wfm-meta-pill .material-icons { font-size: 14px; }

.wfm-chip.is-ok      { background: rgba(var(--success-rgb, 40, 167, 69), 0.10); color: var(--success-color); border-color: transparent; }
.wfm-chip.is-warn    { background: rgba(var(--warning-rgb, 255, 193, 7), 0.14); color: var(--warning-color); border-color: transparent; }
.wfm-chip.is-error   { background: rgba(var(--error-rgb, 220, 53, 69), 0.10);  color: var(--error-color);  border-color: transparent; }
.wfm-chip.is-info    { background: rgba(var(--info-rgb, 23, 162, 184), 0.10);  color: var(--info-color);   border-color: transparent; }
.wfm-chip.is-primary { background: rgba(var(--primary-rgb), 0.10); color: var(--primary-color); border-color: transparent; }
.wfm-chip.is-muted   { opacity: 0.75; }

/* ══════════ الجدول ══════════ */

.wfm-tablewrap {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.wfm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.wfm-table th {
    text-align: start;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--background-secondary);
    padding: 12px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wfm-table td {
    padding: 10px 12px;
    border-top: var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.wfm-table tbody tr:hover { background: rgba(var(--primary-rgb), 0.03); }

.wfm-table .is-num { font-variant-numeric: tabular-nums; }

/* ══════════ الحالات الإلزامية ══════════ */

.wfm-loading,
.wfm-empty {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-xl, 32px);
    text-align: center;
    display: grid;
    gap: var(--space-sm, 8px);
    justify-items: center;
    color: var(--text-secondary);
}

.wfm-empty .material-icons {
    font-size: 48px;
    color: var(--text-muted);
    opacity: 0.6;
}

.wfm-empty h3 { margin: 0; color: var(--text-primary); font-size: 1.0625rem; }
.wfm-empty p { margin: 0; max-width: 46ch; }

.wfm-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary-color);
    animation: wfm-spin 700ms linear infinite;
}

@keyframes wfm-spin { to { transform: rotate(360deg); } }

/* ══════════ النافذة المنبثقة ══════════ */

.wfm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    padding: var(--space-md, 16px);
    z-index: 1080;
}

.wfm-modal {
    background: var(--background-primary);
    border-radius: var(--radius);
    border: var(--border);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35);
    width: min(920px, 100%);
    max-height: 88vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.wfm-modal-head,
.wfm-modal-foot {
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
}

.wfm-modal-head { border-bottom: var(--border); }
.wfm-modal-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }

.wfm-modal-body {
    padding: var(--space-lg, 24px);
    overflow-y: auto;
    display: grid;
    gap: var(--space-md, 16px);
}

.wfm-modal-foot {
    border-top: var(--border);
    justify-content: flex-end;
    background: var(--background-secondary);
    border-end-start-radius: var(--radius);
    border-end-end-radius: var(--radius);
}

/* ══════════ الشبكة الشهرية (لوحة الجدولة) ══════════ */

.wfm-board { display: grid; gap: 2px; overflow-x: auto; }

.wfm-board-row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) repeat(var(--days, 31), minmax(30px, 1fr));
    gap: 2px;
    align-items: stretch;
}

.wfm-board-name {
    background: var(--background-secondary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
}

.wfm-board-cell {
    min-height: 34px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: default;
}

.wfm-board-cell.is-day     { background: rgba(var(--primary-rgb), 0.16); color: var(--primary-dark); }
.wfm-board-cell.is-evening { background: rgba(var(--warning-rgb, 255, 193, 7), 0.20); color: var(--warning-color); }
.wfm-board-cell.is-night   { background: rgba(var(--info-rgb, 23, 162, 184), 0.20); color: var(--info-color); }
.wfm-board-cell.is-off     { background: var(--color-gray-100, var(--background-secondary)); color: var(--text-muted); }
.wfm-board-cell.is-holiday { background: rgba(var(--error-rgb, 220, 53, 69), 0.12); color: var(--error-color); }

.wfm-board-head .wfm-board-cell {
    background: transparent;
    font-weight: 700;
    color: var(--text-secondary);
    min-height: 24px;
}

/* ══════════ محرر خانات القالب ══════════ */

.wfm-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm, 8px);
}

.wfm-slot {
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: grid;
    gap: 6px;
    background: var(--background-primary);
}

.wfm-slot.is-off { background: var(--background-secondary); }

.wfm-slot-index {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
}

.wfm-slot select,
.wfm-slot input {
    min-height: 38px;
    font-size: 15px;
    border: var(--border);
    border-radius: 8px;
    padding-inline: 8px;
    background: var(--background-primary);
    color: var(--text-primary);
    width: 100%;
}

/* ══════════ شريط الحفظ اللاصق ══════════ */

.wfm-savebar {
    position: sticky;
    bottom: 0;
    background: var(--background-primary);
    border-top: var(--border);
    padding: var(--space-md, 16px);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm, 8px);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* ══════════ تفاصيل مفتوحة/مغلقة ══════════ */

.wfm-detail {
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-md, 16px);
    background: var(--background-secondary);
    display: grid;
    gap: 8px;
}

.wfm-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px var(--space-md, 16px);
}

.wfm-kv > div { display: grid; gap: 2px; }
.wfm-kv dt, .wfm-kv .k { font-size: 0.75rem; color: var(--text-secondary); }
.wfm-kv dd, .wfm-kv .v { margin: 0; font-weight: 600; color: var(--text-primary); }

/* ══════════ التجاوب ══════════ */

@media (max-width: 1023px) {
    .wfm-row { grid-template-columns: auto 1fr; }
    .wfm-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 767px) {
    .wfm-toolbar { flex-direction: column; align-items: stretch; }
    .wfm-toolbar-actions { margin-inline-start: 0; }
    .wfm-metrics { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ══════════ تقليل الحركة ══════════ */

@media (prefers-reduced-motion: reduce) {
    .wfm-shell *,
    .wfm-shell *::before,
    .wfm-shell *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ══════════ حارس القوائم المنسدلة القابلة للبحث ══════════ */

.wfm-shell:has(.ss-dropdown.open) { overflow: visible !important; z-index: auto !important; }
.wfm-shell .ss-dropdown.open { z-index: 2147483647 !important; }

/* ══════════ عناصر الدفعة الثانية من الشاشات ══════════ */
/* أُضيفت مع شاشات القواعد والتقارير والتكامل والتشغيل — بنفس البادئة والتوكنات. */

/* مقياس محايد: عدّاد لا يحمل حكماً (مُهمَل / من العمال / صفوف الدورة الأخيرة) */
.wfm-metric.is-muted .wfm-metric-value { color: var(--text-muted); }

.wfm-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.wfm-formgrid {
    display: grid;
    /* أعمدة صريحة بدل auto-fit: الأخير كان يعطي 3 أو 4 أعمدة حسب عرض النافذة
       فتتغيّر محاذاة الحقول بين شاشة وأخرى وتبقى حقول يتيمة في آخر صف. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md, 16px) var(--space-lg, 24px);
}

/* عمود كامل لحقل يحتاج مساحة (وصف، ملاحظات) */
.wfm-formgrid > .wfm-field.is-wide { grid-column: 1 / -1; }

/* ══════════ أقسام النموذج ══════════
   نموذج بـ12 حقلاً في شبكة مسطّحة يقرأ كجدار حقول بلا ترتيب ذهني.
   التقسيم لمجموعات معنونة يجعل النافذة قابلة للمسح البصري في ثوانٍ. */
.wfm-formsections {
    display: grid;
    gap: var(--space-lg, 24px);
}

.wfm-fieldset {
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-md, 16px);
    display: grid;
    gap: var(--space-md, 16px);
    background: var(--background-primary);
}

.wfm-fieldset > .wfm-fieldset-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 700;
}

.wfm-fieldset > .wfm-fieldset-head .material-icons { font-size: 18px; }

.wfm-fieldset > .wfm-fieldset-head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color);
}

/* تلميح أسفل الحقل — يشرح أثر القيمة بدل إطالة التسمية */
.wfm-field > .wfm-field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* مجموعة الحالة: خانات الاختيار كصف مؤطَّر بدل خانات سائبة أسفل النموذج */
.wfm-checkrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md, 16px) var(--space-xl, 32px);
}

.wfm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--text-primary);
    cursor: pointer;
}

.wfm-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.wfm-details {
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--background-secondary);
    padding: var(--space-sm, 12px);
}

.wfm-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.wfm-details > summary::marker { color: var(--text-muted); }

.wfm-details > .wfm-detail { margin-top: var(--space-sm, 12px); }

.wfm-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--background-secondary);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm, 12px);
    max-height: 320px;
    overflow: auto;
    color: var(--text-primary);
}

.wfm-splitcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md, 16px);
    align-items: start;
}

.wfm-diff {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);
    gap: 8px var(--space-md, 16px);
    align-items: center;
}

.wfm-diff > .wfm-diff-head {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.wfm-diff > .wfm-diff-before { color: var(--error-color); text-decoration: line-through; }
.wfm-diff > .wfm-diff-after { color: var(--success-color); font-weight: 600; }

.wfm-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-gray-400, var(--text-muted));
    vertical-align: middle;
    margin-inline-end: 6px;
}

.wfm-dot.is-green { background: var(--success-color); }
.wfm-dot.is-amber { background: var(--warning-color); }
.wfm-dot.is-red { background: var(--error-color); }

.wfm-sparkbar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 40px;
}

.wfm-sparkbar > span {
    flex: 1 1 auto;
    min-width: 3px;
    background: rgba(var(--primary-rgb), 0.35);
    border-radius: 2px 2px 0 0;
}

@media (max-width: 767px) {
    .wfm-diff { grid-template-columns: 1fr; }
    .wfm-formgrid { grid-template-columns: 1fr; }
    /* على الجوال تُلغى إطارات الأقسام: إطار داخل إطار النافذة يضيّق العرض بلا فائدة */
    .wfm-fieldset {
        border: none;
        padding: 0;
        border-radius: 0;
    }
    .wfm-formsections { gap: var(--space-xl, 32px); }
    .wfm-checkrow { gap: var(--space-sm, 8px); }
}

/* ═══════════ شبكة بطاقات شاشات الـ Hub لشؤون الموظفين ═══════════ */
.hrhub-groups { display: grid; gap: var(--space-xl, 32px); }

.hrhub-group-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-md, 16px);
    padding-inline-start: 10px;
    border-inline-start: 3px solid var(--primary-color);
    line-height: 1.4;
}

.hrhub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md, 16px);
}

.hrhub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 16px;
    border: var(--border, 1px solid var(--border-color));
    border-radius: 14px;
    background: var(--background-primary, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hrhub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.45);
    text-decoration: none;
    color: inherit;
}

.hrhub-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hrhub-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary-color);
}
.hrhub-ico .material-icons,
.hrhub-ico .material-icons-outlined { font-size: 24px; }

.hrhub-body { flex: 1 1 auto; min-width: 0; }
.hrhub-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.hrhub-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hrhub-chev { flex: 0 0 auto; color: var(--text-muted); }

.hrhub-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 8px;
    padding: 1px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary-color);
}

@media (max-width: 767px) {
    .hrhub-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hrhub-card { transition: none; }
    .hrhub-card:hover { transform: none; }
}