.roles-page { max-width: 1420px; }
.roles-heading { align-items: center; }
.access-summary { min-width: 270px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #dbe5e0; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.access-summary > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #2f7d5b; background: var(--green-soft); }
.access-summary strong, .access-summary small { display: block; }
.access-summary strong { color: var(--ink); font-size: 10px; }
.access-summary small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.role-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; align-items: stretch; }
.role-card { grid-column: span 2; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.role-card:nth-child(4) { grid-column: 2 / span 2; }
.role-card header { min-height: 104px; padding: 18px 18px 16px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid #edf1ef; }
.role-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #286e51; background: var(--green-soft); }
.role-card header > div { min-width: 0; flex: 1; }
.role-card h2 { margin: 1px 0 0; font: 800 14px "Manrope", sans-serif; }
.role-card header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.full-access { padding: 4px 7px; flex: 0 0 auto; border-radius: 12px; color: #277052; background: var(--green-soft); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.permission-list { padding: 12px 18px 15px; display: grid; gap: 9px; flex: 1; }
.permission-list > div { display: flex; align-items: center; gap: 8px; color: #4f5c57; font-size: 9px; font-weight: 600; }
.permission-check { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #2e7d5b; background: #ecf6f0; }
.role-card footer { min-height: 42px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; color: #82908a; border-top: 1px solid #edf1ef; background: #fafcfb; font-size: 8px; }
.role-card footer span { font-weight: 700; }
.role-hr .role-icon { color: #456d9e; background: var(--blue-soft); }
.role-hr .permission-check { color: #456d9e; background: #edf3fa; }
.role-manager .role-icon { color: #795ba6; background: var(--violet-soft); }
.role-manager .permission-check { color: #795ba6; background: #f3eff8; }
.role-employee .role-icon { color: #a06b21; background: var(--amber-soft); }
.role-employee .permission-check { color: #a06b21; background: #fbf4e8; }
.role-viewer .role-icon { color: #67736e; background: #edf1ef; }
.role-viewer .permission-check { color: #67736e; background: #f0f3f2; }
.permission-note { margin-top: 14px; padding: 15px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #dce9e2; border-radius: 10px; background: #f3f8f5; }
.permission-note > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #2f7d5b; background: #fff; }
.permission-note strong { display: block; color: #316d54; font-size: 10px; }
.permission-note p { margin: 3px 0 0; color: #658074; font-size: 9px; line-height: 1.45; }
.page-footer { margin-top: 18px; display: flex; justify-content: space-between; color: #89938f; font-size: 9px; }
@media (max-width: 1120px) { .role-grid { grid-template-columns: repeat(2, 1fr); }.role-card, .role-card:nth-child(4) { grid-column: auto; } }
@media (max-width: 720px) { .roles-heading { align-items: flex-start; flex-direction: column; }.access-summary { width: 100%; }.role-grid { grid-template-columns: 1fr; }.page-footer { gap: 7px; flex-direction: column; } }