.dashboard-sidebar {
    /* Two literals, and one of them was pure black - which the ink ramp exists to keep out of the
       product. The rail is a surface and its text is ink; both are tokens now, so the rail follows
       the theme instead of staying white under a dark one. */
    background-color: var(--surface);
    min-width: 56px;
    width: 56px;
    color: var(--ink);
    transition: width 0.2s ease-in-out;
    overflow: hidden;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 90;
}

.dashboard-sidebar--open {
    width: 220px;
}

.sidebar-toggle {
    padding: 16px 8px;
}

.sidebar-menu-item {
    transition: background-color 0.2s ease;
    padding: 16px !important;
    height: 48px;
    gap: 16px !important;
    border-radius: 0;
}

.sidebar-menu-item:hover {
    background-color: var(--paper) !important;
}

.sidebar-menu-item.is-active {
    background-color: var(--sunken) !important;
    color: var(--ink-strong) !important;
}

.dashboard-content {
    padding: 16px;
    overflow-y: visible;
}

.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: var(--sunken);
}

.dashboard-loading p {
    margin-top: 16px;
    font-size: 16px;
    color: var(--ink);
}

.dashboard-role-view-select,
.dashboard-role-view-select .components-custom-select-control,
.dashboard-role-view-select .components-custom-select-control__button {
    width: 100%;
    max-width: none;
}

/* The profile block: the deck's rail .me .nm and .sub (navigation decks). */
#akashic-health-records-patient-portal-root .ahr-nav-me__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-nav-me__link {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary);
}

#akashic-health-records-patient-portal-root .ahr-nav-me > a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

#akashic-health-records-patient-portal-root .ak-patient-nav .ahr-nav-me > a:focus-visible {
    outline-color: var(--primary-foreground);
}

#akashic-health-records-patient-portal-root .ak-patient-nav .ahr-nav-me__name {
    font-size: 15px;
}

/* The dark drawer's profile card: the ruled drawer's own gradient tokens (navigation deck s5, .sidenav.s5 .me). */
#akashic-health-records-patient-portal-root .ak-patient-nav .ahr-nav-me {
    background: linear-gradient(135deg, var(--patient-nav-header-from), var(--patient-nav-header-to));
    color: var(--primary-foreground);
}

#akashic-health-records-patient-portal-root .ak-patient-nav .ahr-nav-me :is(p, svg) {
    color: inherit;
}

#akashic-health-records-patient-portal-root .ak-patient-nav .ahr-nav-me p + p {
    opacity: 0.88;
}

/* The staff rail's child rows, as the deck's .item.kid: no icon or rule, the indent says it is a child. */
#akashic-health-records-patient-portal-root nav .dashboard-nav-children > .dashboard-nav-item[data-nav-depth] > button[data-slot="button"] {
  min-height: 32px;
  padding: 0 12px 0 40px;
  font-size: var(--ak-font-14);
}
#akashic-health-records-patient-portal-root nav .dashboard-nav-children > .dashboard-nav-item[data-nav-depth="2"] > button[data-slot="button"] {
  min-height: 29px;
  padding-left: 60px;
  font-size: var(--ak-font-13);
}
#akashic-health-records-patient-portal-root nav .dashboard-nav-children > .dashboard-nav-item[data-active="false"] > button[data-slot="button"]:not(:hover) {
  color: var(--ink-muted);
}