/* index.css supplies shared components and tokens. Keep HR layout utilities. */
.hr-dashboard { color: var(--ink); background: var(--page); }
.hr-dashboard .auth-user-pill { display: flex; }
.hr-dashboard .btn-logout-pill { display: inline-flex; align-items: center; }
#nav-user-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; max-width: 290px; }
#nav-user-role { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.hr-dashboard .bottom-panel { padding-bottom: 48px; }
.hr-section-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.hr-dashboard .menu-card { cursor: pointer; }
.hr-dashboard .menu-card:hover { transform: none; }
.hr-dashboard .menu-card .role-desc { margin-bottom: 0; }
.hr-dashboard .menu-card:hover .role-title { color: var(--accent); }

/* Match all HR surfaces, including cards inserted by template builders. */
.hr-dashboard .bg-white:is(.rounded-xl, .rounded-2xl, .rounded-lg) {
    background: var(--surface);
    border-color: var(--card-line);
    border-radius: var(--card-radius);
}
.hr-dashboard :is(.shadow-sm, .shadow, .shadow-lg, .shadow-2xl) { box-shadow: var(--card-shadow); }
.hr-dashboard .role-card:hover { box-shadow: var(--card-hover-shadow); }
.hr-dashboard .hover\:shadow-md:hover { box-shadow: var(--card-hover-shadow); }
.hr-dashboard :is(.font-bold, .font-extrabold) { font-weight: 600; }
.hr-dashboard .font-black { font-weight: 700; }
.hr-dashboard main h2 { font-size: 18px; letter-spacing: -.4px; }
.hr-dashboard main h3 { font-size: 14px; font-weight: 600; }

/* Canonical primary-link proportions without its homepage-only mobile hiding. */
.hr-dashboard :is(button, a).text-white {
    background: var(--accent);
    color: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 7px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.hr-dashboard :is(button, a).text-white:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: none; }
.hr-dashboard :is(button, a).text-white:is(.bg-red-600, .bg-rose-600) { background: var(--danger); border-color: var(--danger); }
.hr-dashboard button:disabled { opacity: .6; cursor: not-allowed; }
.hr-dashboard button:not(.text-white):not(.btn-logout-pill) { min-height: 44px; border-radius: 7px; }
.hr-dashboard .hr-toolbar { gap: 16px; flex-wrap: wrap; }
.hr-dashboard .hr-toolbar > .flex { flex-wrap: wrap; }

.hr-dashboard :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-family: inherit;
    color: var(--ink);
    border-color: var(--line);
    border-radius: 8px;
    min-height: 44px;
    max-width: 100%;
}
.hr-dashboard :is(input, select, textarea):focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
    box-shadow: none;
}
.hr-dashboard :is(input, textarea)::placeholder { color: var(--muted); }
.hr-dashboard table { color: var(--ink); font-size: 13px; }
.hr-dashboard thead { background: var(--page); color: var(--muted); font-size: 11px; font-weight: 600; }
.hr-dashboard :is(th, td) { border-color: var(--line); }
.hr-dashboard tbody > tr { border-color: var(--line); }
.hr-dashboard tbody > tr:hover { background: var(--accent-soft); }
.hr-dashboard .hr-table-surface table { min-width: 700px; }
.hr-dashboard td > span:is(.rounded, .rounded-full),
.hr-dashboard #detailKpiPredikatBadge { border-radius: 5px; font-weight: 600; }

.skeleton { background: var(--line); border-radius: 5px; animation: hr-loading 1.5s ease-in-out infinite; }
@keyframes hr-loading { 50% { opacity: .5; } }

@media (max-width: 600px) {
    #nav-user-name { font-size: 12px; }
    .hr-dashboard #view-menu > .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hr-dashboard .bg-white:is(.p-6, .p-8) { padding: 18px; }
    .hr-dashboard .fixed.inset-0 { padding: 20px; overflow-y: auto; }
    .hr-dashboard .fixed.inset-0 > .bg-white { width: 100%; max-width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; }
    .hr-dashboard .hr-toolbar > .flex { width: 100%; }
    .hr-dashboard #view-settings [data-row-id] > .flex,
    .hr-dashboard #editBuilderContainer [data-edit-row-id] > .flex { flex-wrap: wrap; }
    .hr-dashboard :is(#builderContainer, #editBuilderContainer) input { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }