.location-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 5px 0px 0px;
    background: var(--mud-palette-background);
    border-radius: var(--mud-default-borderradius);
}

.location-button {
    appearance: none;
    border: 1px solid var(--lims-border-soft);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    color: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
    min-width: 42px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

    
    .location-button.active {
        background: #111111;
        color: #ffffff;
        border-color: #111111;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    }

    .location-button.inactive {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
        color: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
        box-shadow: none;
        border: 1px solid var(--border-color);
    }



.app-page {
    padding: 0px 12px !important;
    background: var(--mud-palette-background);
}

.portal-home {
    width: 100%;
    padding: 0 15px 35px;
    color: var(--text-primary);
    font-size: 13px
}

    .portal-home * {
        box-sizing: border-box
    }

/* HEADER */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px
}

.home-greeting h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    color: var(--text-title)
}

.home-greeting p {
    font-size: 13px;
    color: var(--text-secondary)
}

.home-stats {
    display: flex;
    gap: 10px
}

.stat-card {
    width: 135px;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card)
}

    .stat-card > .mud-icon-root {
        font-size: 21px
    }

    .stat-card div {
        display: flex;
        flex-direction: column;
        gap: 2px
    }

    .stat-card strong {
        font-size: 16px
    }

    .stat-card span {
        font-size: 11px;
        color: var(--text-secondary)
    }

/* COMMON SECTIONS */
.dashboard-section {
    width: 100%;
    margin-bottom: 12px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card)
}

.section-header {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 9px
}

.section-heading-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .section-heading-icon .mud-icon-root {
        font-size: 21px
    }

.section-heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650
}

.section-heading p {
    margin: 3px 0 0;
    font-size: 11px;
    color: var(--text-secondary)
}

.view-all {
    min-height: 30px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    text-transform: none !important;
    color: var(--text-primary) !important
}

/* PROCESS MAP */


.process-map-section {
    overflow: hidden;
}

.home-process-map {
    padding: 12px;
    overflow-x: auto;
    max-height: 440px;
    overflow-y: auto;
}

.home-process-row {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    align-items: center;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-width: 800px;
}

    .home-process-row:last-child {
        border-bottom: 0;
    }

.home-process-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

    .home-process-name span {
        flex: 1;
    }

    .home-process-name small {
        border-radius: 20px;
        background: var(--mud-palette-background-gray);
        padding: 2px 7px;
        font-size: 10px;
    }

    .home-process-name:hover, .home-process-node:hover {
        border-color: var(--mud-palette-primary);
    }

    .home-process-name.active {
        background: var(--mud-palette-primary);
        color: white;
        border-color: var(--mud-palette-primary);
    }

.home-process-nodes {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: max-content;
}

.home-process-node {
    position: relative;
    min-width: 150px;
    max-width: 200px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    font-size: 12px;
    cursor: pointer;
}

    .home-process-node:not(:last-child):after {
        content: "";
        position: absolute;
        right: -24px;
        top: 50%;
        width: 24px;
        height: 1px;
        background: var(--mud-palette-text-disabled);
    }

    .home-process-node:not(:last-child):before {
        content: "";
        position: absolute;
        right: -25px;
        top: calc(50% - 4px);
        border-left: 6px solid var(--mud-palette-text-disabled);
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }

    .home-process-node.active {
        background: #202939;
        color: #fff;
        border-color: #202939;
        box-shadow: 0 2px 7px rgba(0,0,0,.12);
    }

.home-process-empty {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.home-process-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

@media(max-width:768px) {
    .home-process-map {
        padding: 8px 12px;
    }

    .home-process-row {
        grid-template-columns: 170px minmax(0,1fr);
        gap: 14px;
    }
}


/* FAVORITES */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px
}

.favorite-card {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 6px 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: .15s
}

    .favorite-card:hover {
        background: var(--surface-hover-bg);
        border-color: var(--primary)
    }

.favorite-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--surface-hover-bg)
}

    .favorite-icon .mud-icon-root {
        font-size: 19px
    }

.favorite-info {
    min-width: 0;
    flex: 1
}

    .favorite-info strong {
        display: block;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.favorite-actions {
    display: flex
}

    .favorite-actions .mud-icon-button {
        width: 26px !important;
        height: 26px !important;
        padding: 3px !important
    }

    .favorite-actions .mud-icon-root {
        font-size: 15px !important
    }

.application-categories {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 10px;
}

.favorite-application-categories {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 10px;
}

/* APPLICATION*/

/* APPLICATION CATEGORIES */
.application-categories {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.application-category {
    min-width: 0;
    min-height: 155px;
    padding: 16px 18px 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    transition: border-color .2s,box-shadow .2s;
}

    .application-category.wide {
        grid-column: span 2;
    }

    .application-category.process-category-highlight {
        border: 2px solid #00b96b;
        box-shadow: 0 0 0 2px rgba(0,185,107,.10);
    }

.application-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin-bottom: 12px;
}

    .application-category-header strong {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: var(--mud-palette-text-primary);
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.application-count {
    min-width: 24px;
    height: 19px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    line-height: 1;
}

/* APPLICATION LIST */
.application-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,130px);
    gap: 8px;
    align-items: start;
    justify-content: start;
}

/* APPLICATION CARD - NO APPLICATION ICON */
.application-card {
    position: relative;
    width: 130px;
    height: 78px;
    padding: 15px 9px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-gray);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s,transform .15s,border-color .15s;
}

    .application-card:hover {
        background: var(--mud-palette-action-default-hover);
        transform: translateY(-1px);
    }

.application-icon {
    display: none !important;
}

.application-name {
    width: 100%;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* THREE DOTS MENU */
.application-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .15s;
}

    .application-card:hover .application-actions, .application-actions:focus-within {
        opacity: 1;
    }

    .application-actions .mud-icon-button {
        width: 24px;
        height: 24px;
        padding: 3px;
    }

    .application-actions .mud-icon-root {
        font-size: 16px;
    }

.application-menu .mud-list-item-text {
    font-size: 11px !important;
}

.application-menu .mud-list-item-icon {
    min-width: 26px !important;
}

    .application-menu .mud-list-item-icon .mud-icon-root {
        font-size: 17px !important;
    }

.application-menu .mud-list-item {
    min-height: 32px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* FAVORITE STAR - KEEP EXISTING BEHAVIOR */
.application-star.active {
    opacity: 1;
    color: #fdbb30 !important;
}

.application-card:has(.application-star.active) .application-actions {
    opacity: 1;
}

    .application-card:has(.application-star.active) .application-actions > :not(.application-star) {
        opacity: 0;
    }

.application-card:hover .application-actions > * {
    opacity: 1 !important;
}

/* PROCESS HIGHLIGHT */
.application-card.process-highlight {
    border: 1px solid #00b96b;
    background: rgba(0,185,107,.07);
    box-shadow: 0 0 0 1px rgba(0,185,107,.12);
}

    .application-card.process-highlight:hover {
        background: rgba(0,185,107,.13);
    }

/* PROCESS MAP PIN */
.application-process-marker {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 4;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--mud-palette-surface);
    cursor: pointer;
}

    .application-process-marker .mud-icon-root {
        font-size: 20px;
        color: var(--mud-palette-text-primary);
    }

    .application-process-marker:hover {
        background: rgba(0,185,107,.15);
    }

        .application-process-marker:hover .mud-icon-root {
            color: #00b96b;
        }

/* RESPONSIVE */
@media(max-width:1200px) {
    .application-categories {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .application-category.wide {
        grid-column: span 2;
    }
}

@media(max-width:700px) {
    .application-categories {
        grid-template-columns: 1fr;
    }

    .application-category.wide {
        grid-column: auto;
    }

    .application-actions {
        opacity: 1;
    }
}

/* CATEGORY HIGHLIGHT - BLACK BORDER */
.application-category.process-category-highlight {
    border: 2px solid var(--mud-palette-text-primary) !important;
    box-shadow: none !important;
}

/* APPLICATION HIGHLIGHT */
.application-card.process-highlight {
    border: 2px solid var(--mud-palette-text-primary) !important;
    background: var(--mud-palette-background-gray) !important;
    box-shadow: none !important;
}

/* PROCESS PIN - TOP LEFT */
.application-process-marker {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 4;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .application-process-marker .mud-icon-root {
        font-size: 20px;
        color: var(--mud-palette-text-primary) !important;
    }

    .application-process-marker:hover {
        background: transparent;
    }

        .application-process-marker:hover .mud-icon-root {
            color: var(--mud-palette-text-primary) !important;
        }

/* KEEP APPLICATION NAME CENTERED */
.application-card {
    position: relative;
}


/* UNDER DEVELOPMENT */
.development-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
}

.development-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    transition: border-color .2s,box-shadow .2s,transform .2s;
}

    .development-card:hover {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 4px 16px rgba(0,0,0,.05);
        transform: translateY(-2px);
    }

.development-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.development-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

    .development-icon .mud-icon-root {
        font-size: 21px;
    }

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-upcoming {
    color: #a66a0a;
    background: rgba(234,179,8,.11);
}

.status-development {
    color: #2563eb;
    background: rgba(59,130,246,.10);
}

.development-body {
    flex: 1;
    min-width: 0;
    margin-bottom: 13px;
}

    .development-body strong {
        display: block;
        font-size: 13px;
        font-weight: 650;
        color: var(--mud-palette-text-primary);
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .development-body p {
        margin: 5px 0 0;
        font-size: 11px;
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.development-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
}

.project-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

    .project-category .mud-icon-root {
        font-size: 14px;
    }

.project-id {
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
}

@media(max-width:960px) {
    .development-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

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

.development-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

    .development-meta span {
        font-size: 11px;
    }

    .development-meta .project-category {
        color: var(--mud-palette-text-secondary);
    }

.development-body .project-category {
    display: none;
}

.development-body strong, .development-body p {
    padding-right: 0;
}

/* NEWS + QUICKLINKS */
.information-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px
}

.portal-extra-paper {
    width: 100%;
    padding: 16px 18px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    background: var(--surface-bg) !important;
    box-shadow: var(--shadow-card) !important
}

.full-paper {
    margin-top: 12px
}

.portal-info-section {
    min-width: 0
}

.classic-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color)
}

    .classic-title h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .1px;
        color: var(--text-title)
    }

    .classic-title > span {
        font-size: 11px;
        font-weight: 500;
        color: var(--text-secondary)
    }

.news-list {
    width: 100%
}

.news-row {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color)
}

.news-tag {
    display: table;
    width: max-content;
    margin-bottom: 5px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--text-primary);
    color: var(--surface-bg);
    font-size: 9px;
    font-weight: 700
}

.news-row strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap
}

.news-row p {
    overflow: hidden;
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap
}

.all-news {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer
}
.news-row, .quick-link, .all-news {
    color: inherit;
    text-decoration: none;
}

    .news-row:hover, .quick-link:hover, .all-news:hover {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }
.all-news-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: var(--text-primary);
    color: var(--surface-bg)
}

    .all-news-icon .mud-icon-root {
        font-size: 15px
    }

/* QUICK LINKS */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 18px;
    padding-top: 5px
}

.quick-link {
    height: 47px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: .15s
}

    .quick-link:hover {
        background: var(--surface-hover-bg)
    }

.quick-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--text-primary);
    color: var(--surface-bg)
}

    .quick-icon .mud-icon-root {
        font-size: 20px
    }

.quick-link:hover > span:last-child {
    text-decoration: none
}

/* DEPARTMENTS + LOCATIONS */
.classic-section {
    padding: 0;
    margin: 0;
    border: 0
}

.classic-title.section-title {
    height: 42px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color)
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px 14px
}

.directory-card {
    min-width: 0;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-bg);
    cursor: pointer;
    transition: .15s
}

    .directory-card:hover {
        background: var(--surface-hover-bg);
        border-color: var(--primary)
    }

.directory-logo {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--surface-hover-bg)
}

    .directory-logo img {
        width: 16px !important;
        height: auto !important
    }

.directory-info {
    min-width: 0;
    flex: 1
}

    .directory-info strong {
        display: block;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .directory-info small {
        display: block;
        margin-top: 3px;
        font-size: 10px;
        color: var(--text-secondary)
    }

.empty-directory {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary)
}


/* =========================
   WORLD CLOCK
   ========================= */

.clock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}

.world-clock {
    min-width: 0;
    height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-bg);
    color: var(--text-primary);
    transition: .15s;
}

    .world-clock:hover {
        background: var(--surface-hover-bg);
        border-color: var(--primary);
    }

.world-clock-title {
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
}

.world-clock-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.world-clock-time {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.4px;
    color: var(--text-primary);
}

    .world-clock-time small {
        margin-left: 2px;
        font-size: 8px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

.world-clock-date {
    font-size: 9px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.information-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.information-half {
    min-width: 0;
}

    /* đường ngăn giữa 2 bên */
    .information-half:first-child {
        padding-right: 20px;
    }

    .information-half:last-child {
        padding-left: 20px;
    }

/* Responsive */
@media (max-width: 900px) {
    .information-split {
        grid-template-columns: 1fr;
    }

    .information-half:first-child {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .information-half:last-child {
        padding-top: 20px;
        padding-left: 0;
    }
}

/* Tablet */
@media (max-width: 1100px) {
    .clock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .clock-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* RESPONSIVE */
@media(max-width:1200px) {
    .favorites-grid {
        grid-template-columns: repeat(4,1fr)
    }

    .application-category {
        grid-column: span 6
    }

    .development-grid, .directory-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:900px) {
    .portal-home {
        padding: 10px 14px 28px
    }

    .home-header {
        align-items: flex-start;
        flex-direction: column
    }

    .home-stats {
        width: 100%
    }

    .stat-card {
        flex: 1;
        width: auto
    }

    .favorites-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .application-category {
        grid-column: span 12
    }

    .development-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .information-grid {
        grid-template-columns: 1fr
    }

    .portal-extra-paper {
        padding: 14px !important
    }
}

@media(max-width:560px) {
    .portal-home {
        padding: 8px 9px 24px
    }

    .home-stats {
        display: none
    }

    .favorites-grid, .development-grid, .directory-grid, .quick-grid {
        grid-template-columns: 1fr
    }

    .dashboard-section {
        padding: 11px
    }

    .home-greeting h1 {
        font-size: 21px
    }

    .section-heading h2, .classic-title h2 {
        font-size: 15px
    }
}


/* =========================================================
   MY PERMISION GROUP
   ========================================================= */
.permission-page {
    width: 100%;
    padding: 0 15px 30px;
    color: var(--text-primary);
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
}

    .permission-page * {
        box-sizing: border-box
    }

/* HEADER */
.permission-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px
}

.permission-title h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-title)
}

.permission-title p {
    margin: 4px 0 0;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary)
}

.permission-summary {
    display: flex;
    align-items: center;
    gap: 8px
}

.summary-card {
    min-width: 108px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card)
}

    .summary-card > .mud-icon-root {
        font-size: 18px;
        color: var(--text-primary)
    }

    .summary-card > div {
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .summary-card strong {
        font-size: 13px;
        line-height: 1;
        font-weight: 600;
        color: var(--text-primary)
    }

    .summary-card span {
        font-size: 9px;
        line-height: 1;
        font-weight: 400;
        color: var(--text-secondary)
    }

/* PANEL */
.access-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card)
}

.access-header {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color)
}

    .access-header h2 {
        margin: 0;
        font-size: 15px;
        line-height: 1.15;
        font-weight: 600;
        color: var(--text-title)
    }

    .access-header p {
        margin: 3px 0 0;
        font-size: 9px;
        font-weight: 400;
        color: var(--text-secondary)
    }

.access-search {
    width: 280px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--surface-bg);
    transition: border-color .15s ease,box-shadow .15s ease
}

    .access-search:focus-within {
        border-color: var(--focus-border);
        box-shadow: 0 0 0 2px var(--focus-ring)
    }

    .access-search .mud-icon-root {
        font-size: 17px;
        color: var(--text-secondary)
    }

    .access-search input {
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 10px;
        font-weight: 400;
        color: var(--text-primary)
    }

        .access-search input::placeholder {
            color: var(--text-secondary)
        }

/* APPLICATION LIST */
.access-list {
    width: 100%
}

.access-list-head, .access-row {
    display: grid;
    grid-template-columns: minmax(260px,1.05fr) minmax(220px,.95fr) minmax(300px,1.3fr) 155px;
    align-items: center;
    gap: 20px;
    padding-left: 14px;
    padding-right: 14px
}

.access-list-head {
    min-height: 38px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-hover-bg)
}

    .access-list-head span {
        font-size: 9px;
        font-weight: 500;
        color: var(--text-secondary)
    }

        .access-list-head span:last-child {
            text-align: right;
            padding-right: 36px
        }

.access-item {
    border-bottom: 1px solid var(--border-color)
}

    .access-item:last-child {
        border-bottom: 0
    }

.access-row {
    min-height: 70px;
    padding-top: 9px;
    padding-bottom: 9px;
    cursor: pointer;
    transition: background .15s ease
}

    .access-row:hover, .access-item.expanded > .access-row {
        background: var(--surface-hover-bg)
    }

/* APPLICATION */
.site-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px
}

.site-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb,var(--primary) 28%,var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb,var(--primary) 7%,var(--surface-bg));
    color: var(--primary)
}

    .site-icon .mud-icon-root {
        font-size: 19px
    }

.site-info {
    min-width: 0
}

    .site-info strong {
        display: block;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 550;
        color: var(--text-primary);
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .site-info span {
        display: block;
        overflow: hidden;
        margin-top: 4px;
        font-size: 9px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--text-secondary);
        text-overflow: ellipsis;
        white-space: nowrap
    }

/* CHIPS */
.chip-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px
}

.access-chip {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--surface-hover-bg);
    font-size: 9px;
    line-height: 1;
    font-weight: 450;
    color: var(--text-primary);
    white-space: nowrap
}

    .access-chip .mud-icon-root {
        font-size: 12px
    }

.location-chip .mud-icon-root {
    color: var(--primary)
}

.role-chip {
    background: color-mix(in srgb,var(--primary) 7%,var(--surface-bg));
    border-color: color-mix(in srgb,var(--primary) 18%,var(--border-color))
}

    .role-chip .mud-icon-root {
        color: var(--primary)
    }

.empty-value {
    font-size: 10px;
    color: var(--text-secondary)
}

/* ACCESS END */
.access-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px
}

.function-badge {
    height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--surface-hover-bg);
    font-size: 9px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap
}

.expand-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--text-secondary);
    transition: background .15s ease,color .15s ease
}

.access-row:hover .expand-btn {
    background: var(--hover-overlay);
    color: var(--text-primary)
}

.expand-btn .mud-icon-root {
    font-size: 20px
}

/* DETAIL */
.permission-detail {
    margin: 0 12px 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card)
}

.permission-detail-header {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 9px
}

    .permission-detail-header strong {
        display: block;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 550;
        color: var(--text-primary)
    }

    .permission-detail-header > div > span {
        display: block;
        margin-top: 3px;
        font-size: 8.5px;
        font-weight: 400;
        color: var(--text-secondary)
    }

.detail-count {
    height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 20px;
    background: var(--surface-hover-bg);
    font-size: 8.5px;
    font-weight: 500;
    color: var(--text-secondary)
}

/* PERMISSION TABLE */
.permission-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 7px
}

.permission-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed
}

    .permission-table th {
        height: 34px;
        padding: 0 10px;
        border-bottom: 1px solid var(--border-color);
        background: var(--surface-hover-bg);
        font-size: 8.5px;
        font-weight: 500;
        color: var(--text-secondary);
        text-align: left
    }

    .permission-table td {
        height: 46px;
        padding: 6px 10px;
        border-bottom: 1px solid var(--border-color);
        font-size: 9px;
        font-weight: 400;
        color: var(--text-primary);
        vertical-align: middle
    }

    .permission-table tbody tr:last-child td {
        border-bottom: 0
    }

    .permission-table tbody tr:hover {
        background: var(--surface-hover-bg)
    }

    .permission-table th:first-child {
        width: 25%
    }

    .permission-table th:nth-child(2) {
        width: 12%
    }

    .permission-table th:nth-child(3) {
        width: 21%
    }

    .permission-table th:nth-child(n+4) {
        width: 7%;
        text-align: center
    }

/* FUNCTION */
.function-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px
}

.function-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--surface-hover-bg);
    color: var(--text-secondary)
}

    .function-icon .mud-icon-root {
        font-size: 16px
    }

.function-cell > div:last-child {
    min-width: 0
}

.function-cell strong {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap
}

.function-cell span {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    line-height: 1;
    color: var(--text-secondary)
}

/* MINI CHIPS + CHECK */
.mini-chip {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--surface-hover-bg);
    font-size: 8px;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap
}

    .mini-chip .mud-icon-root {
        font-size: 10px
    }

.location-mini .mud-icon-root {
    color: var(--primary)
}

.permission-check {
    text-align: center !important
}

    .permission-check .mud-icon-root {
        font-size: 17px !important
    }

/* EMPTY */
.access-empty {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center
}

    .access-empty > .mud-icon-root {
        margin-bottom: 10px;
        font-size: 34px;
        color: var(--text-secondary)
    }

    .access-empty strong {
        font-size: 12px;
        font-weight: 550;
        color: var(--text-primary)
    }

    .access-empty span {
        margin-top: 5px;
        font-size: 9px;
        color: var(--text-secondary)
    }

@media(max-width:1100px) {
    .access-list {
        min-width: 900px
    }

    .access-panel {
        overflow-x: auto
    }
}

@media(max-width:800px) {
    .permission-page {
        padding: 10px 10px 25px
    }

    .permission-header {
        align-items: flex-start;
        flex-direction: column
    }

    .permission-summary {
        width: 100%
    }

    .summary-card {
        min-width: 0;
        flex: 1
    }

    .access-header {
        align-items: flex-start;
        flex-direction: column
    }

    .access-search {
        width: 100%
    }
}

/* =========================================================
   APPLICATION GROUP
   ========================================================= */

.application-group {
    height: 100%;
    overflow: hidden;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: none;
    color: var(--text-primary);
}

.group-header {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border-bottom: 1px solid color-mix(in srgb,currentColor 10%,transparent);
}

.group-title {
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
}

.group-header .mud-icon-root {
    font-size: 16px !important;
}

.group-header .mud-badge-root {
    display: flex;
    align-items: center;
}

.group-header .mud-badge-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: color-mix(in srgb,currentColor 12%,var(--surface-bg)) !important;
    color: currentColor !important;
    border: 0;
    font-size: 8px;
    font-weight: 600;
}

/* =========================================================
   ADD APPLICATION MODAL
   ========================================================= */

.favorite-picker-dialog {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.favorite-picker-dialog .mud-dialog-title {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-color);
}

.favorite-picker-dialog .mud-dialog-content {
    padding: 16px 20px 20px !important;
}


/* TITLE */

.favorite-picker-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.favorite-picker-title > .mud-icon-root {
    width: 22px;
    height: 22px;
    color: var(--primary);
}

.favorite-picker-title-text {
    color: var(--text-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}

.favorite-picker-subtitle {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 400;
}


/* SEARCH */

.favorite-picker-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;
}

.favorite-picker-search > .mud-icon-root {
    position: absolute;
    left: 12px;
    z-index: 2;

    width: 18px;
    height: 18px;

    color: var(--text-secondary);
    pointer-events: none;
}

.favorite-picker-search input {
    width: 100%;
    height: 38px;

    padding: 0 40px;

    color: var(--text-primary);
    background: var(--surface-bg);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    outline: none;

    font-family: inherit;
    font-size: 12px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.favorite-picker-search input::placeholder {
    color: var(--text-secondary);
}

.favorite-picker-search input:hover {
    border-color: var(--text-subtle);
}

.favorite-picker-search input:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.favorite-picker-search button {
    position: absolute;
    right: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;
    padding: 0;

    color: var(--text-secondary);
    background: transparent;

    border: 0;
    border-radius: var(--radius-sm);

    cursor: pointer;
}

.favorite-picker-search button:hover {
    color: var(--text-primary);
    background: var(--surface-hover-bg);
}


/* CONTENT */

.favorite-picker-content {
    max-height: 460px;
    padding-right: 3px;
    padding-bottom: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

.favorite-picker-content::-webkit-scrollbar {
    width: 5px;
}

.favorite-picker-content::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 10px;
}


/* GROUP */

.favorite-picker-group + .favorite-picker-group {
    margin-top: 20px;
}

.favorite-picker-group-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;
}

.favorite-picker-group-title > span {
    color: var(--text-title);
    font-size: 12px;
    font-weight: 700;
}

.favorite-picker-group-title > small {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;
    padding: 0 6px;

    color: var(--text-secondary);
    background: var(--item-hover-bg);

    border-radius: 20px;

    font-size: 10px;
}


/* GRID */

.favorite-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}


/* APPLICATION */

.favorite-picker-item {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    height: 60px;

    padding: 9px 10px;

    background: var(--surface-bg);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.favorite-picker-item:hover {
    background: var(--item-hover-bg);
    border-color: var(--primary);
}

.favorite-picker-item:hover .favorite-picker-add {
    opacity: 1;
}


/* ICON */

.favorite-picker-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    color: var(--text-primary);
    background: var(--item-hover-bg);

    border-radius: var(--radius-md);
}

.favorite-picker-icon .mud-icon-root {
    font-size: 20px;
}


/* INFO */

.favorite-picker-info {
    flex: 1;
    min-width: 0;
}

.favorite-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-primary);

    font-size: 12px;
    font-weight: 600;
}

.favorite-picker-type {
    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-secondary);

    font-size: 10px;
}


/* ADD ICON */

.favorite-picker-add {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    color: var(--primary);
    background: var(--item-active-bg);

    border-radius: var(--radius-sm);

    opacity: .65;

    transition: opacity .15s ease;
}

.favorite-picker-add .mud-icon-root {
    font-size: 17px;
}


/* EMPTY */

.favorite-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 210px;

    color: var(--text-secondary);
    text-align: center;
}

.favorite-picker-empty > .mud-icon-root {
    margin-bottom: 10px;

    color: var(--primary);
    font-size: 34px;
}

.favorite-picker-empty strong {
    color: var(--text-title);
    font-size: 13px;
}

.favorite-picker-empty span {
    margin-top: 4px;
    font-size: 11px;
}


/* MOBILE */

@media (max-width: 600px) {
    .favorite-picker-grid {
        grid-template-columns: 1fr;
    }

    .favorite-picker-content {
        max-height: 55vh;
    }
}

/* =========================================================
   APPLICATION ITEMS
   ========================================================= */

.application-items {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-bg);
}

.application-item {
    height: 64px;
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-bg);
    border: 0 !important;
    border-right: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary);
    transition: background-color .15s ease;
}

    .application-item:last-child {
        border-right: 0 !important;
    }

    .application-item:hover {
        background: var(--surface-hover-bg);
    }

    .application-item > .mud-stack {
        width: 100%;
        min-width: 0;
        padding: 0 5px;
    }

.application-name {
    width: 100%;
    max-width: 130px;
    overflow: hidden;
    color: var(--text-primary) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 12px !important;
    text-align: center;
}


/* =========================================================
   APPLICATION AVATAR
   ========================================================= */

.application-item .mud-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

    .application-item .mud-avatar .mud-icon-root {
        font-size: 17px !important;
    }


/* =========================================================
   CATEGORY - BUSINESS OPERATIONS
   ========================================================= */

.group-blue {
    background: color-mix(in srgb,#5675e8 10%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#5675e8 88%,var(--text-primary)) !important;
}

.icon-blue {
    background: color-mix(in srgb,#5675e8 12%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#5675e8 90%,var(--text-primary)) !important;
}


/* =========================================================
   CATEGORY - MANUFACTURING
   ========================================================= */

.group-green {
    background: color-mix(in srgb,#3bbd67 10%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#3bbd67 88%,var(--text-primary)) !important;
}

.icon-green {
    background: color-mix(in srgb,#3bbd67 12%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#3bbd67 90%,var(--text-primary)) !important;
}


/* =========================================================
   CATEGORY - SUPPLY CHAIN
   ========================================================= */

.group-orange {
    background: color-mix(in srgb,#ef9c22 11%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#ef9c22 88%,var(--text-primary)) !important;
}

.icon-orange {
    background: color-mix(in srgb,#ef9c22 13%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#ef9c22 90%,var(--text-primary)) !important;
}


/* =========================================================
   CATEGORY - HR
   ========================================================= */

.group-purple {
    background: color-mix(in srgb,#995ee8 10%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#995ee8 88%,var(--text-primary)) !important;
}

.icon-purple {
    background: color-mix(in srgb,#995ee8 12%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#995ee8 90%,var(--text-primary)) !important;
}


/* =========================================================
   CATEGORY - INNOVATION
   ========================================================= */

.group-red {
    background: color-mix(in srgb,#e45b5b 10%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#e45b5b 88%,var(--text-primary)) !important;
}

.icon-red {
    background: color-mix(in srgb,#e45b5b 12%,var(--surface-bg)) !important;
    color: color-mix(in srgb,#e45b5b 90%,var(--text-primary)) !important;
}


/* =========================================================
   MUD GRID
   ========================================================= */

.favorite-section .mud-grid,
.applications-section .mud-grid {
    margin-top: 0;
}

.favorite-section .mud-grid-item,
.applications-section .mud-grid-item {
    min-width: 0;
}


/* =========================================================
   DARK MODE
   Không cần hard-code background dark.
   Mud variables tự thay theo theme.
   Chỉ tăng nhẹ độ sáng category.
   ========================================================= */

.mud-theme-dark .favorite-card:hover,
.mud-theme-dark .application-item:hover {
    background: color-mix(in srgb,var(--primary) 9%,var(--surface-bg));
}

.mud-theme-dark .favorite-card {
    border-color: color-mix(in srgb,var(--text-secondary) 20%,transparent);
}

.mud-theme-dark .application-group {
    border-color: color-mix(in srgb,var(--text-secondary) 20%,transparent);
}

.mud-theme-dark .application-item {
    border-right-color: color-mix(in srgb,var(--text-secondary) 18%,transparent) !important;
}

.mud-theme-dark .group-blue {
    background: color-mix(in srgb,#6f8cff 15%,var(--surface-bg)) !important;
    color: #91a7ff !important;
}

.mud-theme-dark .icon-blue {
    background: color-mix(in srgb,#6f8cff 17%,var(--surface-bg)) !important;
    color: #91a7ff !important;
}

.mud-theme-dark .group-green {
    background: color-mix(in srgb,#52cc79 15%,var(--surface-bg)) !important;
    color: #78dc96 !important;
}

.mud-theme-dark .icon-green {
    background: color-mix(in srgb,#52cc79 17%,var(--surface-bg)) !important;
    color: #78dc96 !important;
}

.mud-theme-dark .group-orange {
    background: color-mix(in srgb,#f0aa42 15%,var(--surface-bg)) !important;
    color: #f4bd69 !important;
}

.mud-theme-dark .icon-orange {
    background: color-mix(in srgb,#f0aa42 17%,var(--surface-bg)) !important;
    color: #f4bd69 !important;
}

.mud-theme-dark .group-purple {
    background: color-mix(in srgb,#ad75f1 15%,var(--surface-bg)) !important;
    color: #c49bf6 !important;
}

.mud-theme-dark .icon-purple {
    background: color-mix(in srgb,#ad75f1 17%,var(--surface-bg)) !important;
    color: #c49bf6 !important;
}

.mud-theme-dark .group-red {
    background: color-mix(in srgb,#ef7373 15%,var(--surface-bg)) !important;
    color: #f49393 !important;
}

.mud-theme-dark .icon-red {
    background: color-mix(in srgb,#ef7373 17%,var(--surface-bg)) !important;
    color: #f49393 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 959px) {
    .application-item {
        height: 62px;
    }

    .application-name {
        max-width: 105px;
    }
}

@media (max-width: 600px) {
    .favorite-section,
    .applications-section {
        padding: 8px;
    }

    .application-items {
        overflow-x: auto;
    }

    .application-item {
        min-width: 115px;
        flex: 0 0 115px;
    }
}

/* =========================
   UNDER DEVELOPMENT
   ========================= */
.tools-section {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.tools-section {
    margin-bottom: 0;
}

    .tools-section .section-title-row {
        margin-bottom: 8px;
    }

        .tools-section .section-title-row .mud-button-root {
            min-width: auto;
            padding: 3px 7px;
            font-size: 9px;
            font-weight: 500;
        }

.tool-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    background: var(--mud-palette-surface);
}

.tool-visual {
    height: 64px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #172544;
    color: #6fa6ff;
}

    .tool-visual > .mud-icon-root {
        font-size: 27px !important;
    }

.launch-chip {
    position: absolute !important;
    top: 7px;
    right: 7px;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    background: #ffe36d !important;
    color: #5d5000 !important;
    font-size: 8px !important;
    border: 0 !important;
}

.tool-body {
    padding: 9px;
}

    .tool-body .mud-typography-subtitle2 {
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 15px !important;
    }

    .tool-body .mud-typography-caption {
        font-size: 9px !important;
        line-height: 12px !important;
    }

.tool-progress {
    margin-top: 10px;
}

.tool-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.tool-progress .mud-progress-linear {
    height: 3px !important;
}


/* =========================
   MUD OVERRIDES
   ========================= */

.favorite-section .mud-grid,
.applications-section .mud-grid,
.tools-section .mud-grid {
    margin-top: 0;
}

.favorite-section .mud-chip,
.applications-section .mud-chip {
    font-size: 9px;
}

.applications-section .mud-badge {
    font-size: 8px;
}

.applications-section .mud-badge-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 8px;
}


/* =========================
   DARK MODE
   ========================= */

.mud-theme-dark .group-blue {
    background: rgba(73, 104, 212, .14);
    color: #8da5ff;
}

.mud-theme-dark .group-green {
    background: rgba(60, 155, 76, .14);
    color: #72d583;
}

.mud-theme-dark .group-orange {
    background: rgba(200, 137, 27, .14);
    color: #e8b455;
}

.mud-theme-dark .group-purple {
    background: rgba(141, 82, 216, .14);
    color: #bb8cf4;
}

.mud-theme-dark .group-red {
    background: rgba(225, 93, 93, .14);
    color: #f58b8b;
}

.mud-theme-dark .icon-blue {
    background: rgba(86, 117, 232, .14) !important;
}

.mud-theme-dark .icon-green {
    background: rgba(59, 189, 103, .14) !important;
}

.mud-theme-dark .icon-orange {
    background: rgba(239, 156, 34, .14) !important;
}

.mud-theme-dark .icon-purple {
    background: rgba(153, 94, 232, .14) !important;
}

.mud-theme-dark .icon-red {
    background: rgba(228, 91, 91, .14) !important;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 959px) {
    .application-item {
        height: 62px;
    }

    .application-name {
        max-width: 100px;
    }
}

@media (max-width: 600px) {
    .favorite-section,
    .applications-section,
    .tools-section {
        padding: 8px;
    }

    .application-items {
        overflow-x: auto;
    }

    .application-item {
        min-width: 120px;
        flex: 0 0 120px;
    }
}




/* =========================================================
   SNAPSHOT
   ========================================================= */

.snapshot-card {
    height: 100%;
    padding: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 9px;
    background: var(--mud-palette-surface);
}

.snapshot-heading {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .snapshot-heading .mud-typography {
        font-weight: 700 !important;
    }

.snapshot-item {
    padding: 11px;
    margin-bottom: 7px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-background);
}

.snapshot-value-row {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .snapshot-value-row .mud-typography-h5 {
        font-size: 22px !important;
        font-weight: 600 !important;
    }

.snapshot-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
}

    .snapshot-change .mud-icon-root {
        font-size: 13px !important;
    }

    .snapshot-change.up {
        color: var(--mud-palette-success);
    }

    .snapshot-change.down {
        color: var(--mud-palette-error);
    }

.snapshot-footer {
    display: block;
    margin-top: 12px;
    color: var(--mud-palette-text-secondary) !important;
}

/* =========================================================
   NEW TOOLS
   ========================================================= */

.tool-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 9px;
    background: var(--mud-palette-surface);
}

.tool-visual {
    height: 92px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tool-visual > .mud-icon-root {
        font-size: 38px !important;
    }

.launch-chip {
    position: absolute !important;
    top: 8px;
    right: 8px;
    font-size: 10px !important;
}

.tool-body {
    padding: 12px;
}

    .tool-body .mud-typography-subtitle2 {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

.tool-progress {
    margin-top: 20px;
}

.tool-progress-row {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tool-progress .mud-progress-linear {
    height: 4px !important;
}

/* =========================================================
   LIGHT
   ========================================================= */

.portal-light .favorites-page {
    background: #f4f6f9;
}

.portal-light .favorite-section,
.portal-light .applications-section,
.portal-light .tools-section,
.portal-light .application-group,
.portal-light .snapshot-card,
.portal-light .tool-card {
    background: #fff;
    border-color: #e5e7eb;
}

.portal-light .favorite-card {
    background: #fff;
    border-color: #e5e7eb;
}

    .portal-light .favorite-card:hover {
        background: #fafcff;
        border-color: #cbd5e1;
        box-shadow: 0 6px 18px rgba(15,23,42,.06);
    }

.portal-light .application-item:hover {
    background: #f8fafc;
}

.portal-light .snapshot-item {
    background: #fff;
    border-color: #e5e7eb;
}

.portal-light .tool-visual {
    background: #152440;
}

    .portal-light .tool-visual > .mud-icon-root {
        color: #60a5fa;
    }

.portal-light .launch-chip {
    background: #fde68a !important;
    color: #854d0e !important;
}

/* light icon colors */
.portal-light .icon-blue {
    background: #eef4ff;
    color: #4f7df3;
}

.portal-light .icon-green {
    background: #ecfdf3;
    color: #22c55e;
}

.portal-light .icon-purple {
    background: #f5efff;
    color: #8b5cf6;
}

.portal-light .icon-orange {
    background: #fff6e8;
    color: #f59e0b;
}

.portal-light .icon-cyan {
    background: #ecfeff;
    color: #22b8cf;
}

.portal-light .icon-red {
    background: #fff0f0;
    color: #ef4444;
}

.portal-light .icon-dark {
    background: #f1f5f9;
    color: #334155;
}

.portal-light .group-blue {
    background: #eef4ff;
    color: #4f67d8;
}

.portal-light .group-green {
    background: #effaf1;
    color: #38a34a;
}

.portal-light .group-orange {
    background: #fff7e8;
    color: #c88714;
}

.portal-light .group-purple {
    background: #f5f0ff;
    color: #7c4ee4;
}

.portal-light .group-red {
    background: #fff0f0;
    color: #dd5a5a;
}

/* =========================================================
   DARK
   ========================================================= */

.portal-dark .favorites-page {
    background: var(--mud-palette-background);
}

.portal-dark .favorite-section,
.portal-dark .applications-section,
.portal-dark .tools-section,
.portal-dark .application-group,
.portal-dark .snapshot-card,
.portal-dark .tool-card {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
}

.portal-dark .favorite-card {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
}

    .portal-dark .favorite-card:hover {
        background: rgba(255,255,255,.025);
        border-color: rgba(148,163,184,.35);
        box-shadow: 0 8px 20px rgba(0,0,0,.18);
    }

.portal-dark .application-item:hover {
    background: rgba(255,255,255,.025);
}

.portal-dark .snapshot-item {
    background: rgba(255,255,255,.02);
    border-color: var(--mud-palette-divider);
}

.portal-dark .tool-visual {
    background: #0b1426;
}

    .portal-dark .tool-visual > .mud-icon-root {
        color: #60a5fa;
    }

.portal-dark .launch-chip {
    background: #422006 !important;
    color: #fde68a !important;
}

/* dark icon colors */
.portal-dark .icon-blue {
    background: rgba(79,125,243,.12);
    color: #7da2ff;
}

.portal-dark .icon-green {
    background: rgba(34,197,94,.12);
    color: #4ade80;
}

.portal-dark .icon-purple {
    background: rgba(139,92,246,.12);
    color: #a78bfa;
}

.portal-dark .icon-orange {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
}

.portal-dark .icon-cyan {
    background: rgba(34,184,207,.12);
    color: #67e8f9;
}

.portal-dark .icon-red {
    background: rgba(239,68,68,.12);
    color: #f87171;
}

.portal-dark .icon-dark {
    background: rgba(148,163,184,.10);
    color: #cbd5e1;
}

.portal-dark .group-blue {
    background: rgba(79,125,243,.10);
    color: #93b0ff;
}

.portal-dark .group-green {
    background: rgba(34,197,94,.10);
    color: #6ee7a0;
}

.portal-dark .group-orange {
    background: rgba(245,158,11,.10);
    color: #fbbf24;
}

.portal-dark .group-purple {
    background: rgba(139,92,246,.10);
    color: #c4b5fd;
}

.portal-dark .group-red {
    background: rgba(239,68,68,.10);
    color: #fca5a5;
}

@media (max-width: 960px) {
    .applications-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .application-search {
        width: 100%;
    }
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -.4px !important;
    color: var(--text-primary) !important;
}

.dashboard-muted {
    color: var(--text-secondary) !important;
}

.overview-card, .dashboard-card {
    background: var(--surface-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.025);
}

.overview-card {
    position: relative;
    padding: 18px 20px;
    min-height: 160px;
    overflow: hidden;
    transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

    .overview-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--mud-palette-primary),transparent);
        opacity: .65;
    }

    .overview-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb,var(--mud-palette-primary) 32%,var(--border-color));
        box-shadow: 0 10px 30px rgba(0,0,0,.07);
    }

.overview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.overview-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .overview-icon .mud-icon-root {
        font-size: 21px !important;
    }

    .overview-icon.primary {
        color: var(--mud-palette-primary);
        background: color-mix(in srgb,var(--mud-palette-primary) 12%,transparent);
    }

    .overview-icon.success {
        color: var(--mud-palette-success);
        background: color-mix(in srgb,var(--mud-palette-success) 11%,transparent);
    }

    .overview-icon.warning {
        color: var(--mud-palette-warning);
        background: color-mix(in srgb,var(--mud-palette-warning) 13%,transparent);
    }

    .overview-icon.info {
        color: var(--mud-palette-info);
        background: color-mix(in srgb,var(--mud-palette-info) 12%,transparent);
    }

.overview-more {
    color: var(--text-subtle) !important;
}

.overview-value {
    margin-top: 2px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    color: var(--text-primary) !important;
}

.overview-label {
    margin-top: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.overview-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.trend {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

    .trend .mud-icon-root {
        font-size: 15px !important;
    }

    .trend.positive {
        color: var(--mud-palette-success);
    }

    .trend.neutral {
        color: var(--text-secondary);
    }

.dashboard-card {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.card-header {
    min-height: 66px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

    .card-header .mud-typography-h6 {
        font-size: 16px !important;
        font-weight: 650 !important;
        letter-spacing: -.2px !important;
        color: var(--text-primary) !important;
    }

    .card-header .mud-typography-caption {
        display: block;
        margin-top: 3px !important;
        font-size: 11.5px !important;
        color: var(--text-secondary) !important;
    }

    .card-header .mud-button-root {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

        .card-header .mud-button-root:hover {
            color: var(--mud-palette-primary) !important;
            background: var(--hover-overlay) !important;
        }

.app-row {
    min-height: 72px;
    padding: 11px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s ease;
}

    .app-row:last-child {
        border-bottom: 0;
    }

    .app-row:hover {
        background: var(--surface-hover-bg);
    }

.app-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

    .app-info .mud-typography-body1 {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    .app-info .mud-typography-caption {
        font-size: 11.5px !important;
        color: var(--text-secondary) !important;
    }

.app-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 10%,transparent);
}

    .app-icon .mud-icon-root {
        font-size: 19px !important;
    }

.app-usage {
    display: grid;
    grid-template-columns: 40px minmax(120px,220px);
    align-items: center;
    gap: 10px;
    width: 280px;
}

    .app-usage .mud-typography-body2 {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: right;
        color: var(--text-primary) !important;
    }

    .app-usage .mud-progress-linear {
        height: 5px !important;
        border-radius: 10px !important;
    }

.visit-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 59px;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s ease,padding-left .15s ease;
}

    .visit-item:last-of-type {
        border-bottom: 0;
    }

    .visit-item:hover {
        padding-left: 19px;
        background: var(--surface-hover-bg);
    }

        .visit-item:hover .visit-arrow {
            color: var(--mud-palette-primary) !important;
            transform: translateX(2px);
        }

.visit-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 9%,transparent);
}

    .visit-icon .mud-icon-root {
        font-size: 17px !important;
    }

.visit-content {
    flex: 1;
    min-width: 0;
}

.visit-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-content .mud-typography-caption {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
}

.visit-arrow {
    color: var(--text-subtle) !important;
    transition: .15s ease;
}

.website-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 69px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s ease;
}

    .website-item:last-child {
        border-bottom: 0;
    }

    .website-item:hover {
        background: var(--surface-hover-bg);
    }

.website-rank {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: color-mix(in srgb,var(--text-secondary) 8%,transparent);
}

.website-item:first-child .website-rank {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 11%,transparent);
}

.website-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 9%,transparent);
}

    .website-icon .mud-icon-root {
        font-size: 18px !important;
    }

.website-content {
    flex: 1;
    min-width: 0;
}

.website-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.website-name {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.website-count {
    min-width: 65px;
    text-align: right;
}

    .website-count .mud-typography-body2 {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }

    .website-count .mud-typography-caption {
        font-size: 10px !important;
        color: var(--text-secondary) !important;
    }

.website-progress {
    height: 4px !important;
    margin-top: 7px !important;
    border-radius: 10px !important;
}

.activity-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 9px 15px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s ease;
}

    .activity-item:last-child {
        border-bottom: 0;
    }

    .activity-item:hover {
        background: var(--surface-hover-bg);
    }

.activity-content {
    flex: 1;
    min-width: 0;
}

    .activity-content .mud-typography-body2 {
        font-size: 12.5px !important;
        color: var(--text-primary) !important;
    }

    .activity-content .mud-typography-caption {
        font-size: 11px !important;
        color: var(--text-secondary) !important;
    }

.activity-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    background: color-mix(in srgb,var(--mud-palette-primary) 14%,var(--surface-bg)) !important;
    color: var(--mud-palette-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.activity-item .mud-chip {
    height: 22px !important;
    font-size: 10.5px !important;
    color: var(--text-secondary) !important;
    background: color-mix(in srgb,var(--text-secondary) 7%,transparent) !important;
}

.dashboard-card > .mud-button-root:last-child {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

    .dashboard-card > .mud-button-root:last-child:hover {
        color: var(--mud-palette-primary) !important;
    }

@media (max-width:960px) {
    .dashboard-page {
        padding: 16px;
    }

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-usage {
        width: 210px;
        grid-template-columns: 36px minmax(90px,1fr);
    }
}

@media (max-width:600px) {
    .dashboard-page {
        padding: 12px;
    }

    .quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .app-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .app-usage {
        width: 100%;
        grid-template-columns: 38px 1fr;
    }
}

.location-selected {
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

    .location-selected:hover {
        background: var(--mud-palette-background) !important;
    }


.login-input  .mud-input-outlined-border {
    border-color: #d9dce3;
    border-radius: 8px;
}

.login-input  .mud-input-root {
    font-size: 14px;
}

.login-input  .mud-input-adornment {
    color: #7b8190;
}

.login-primary {
    height: 44px;
    margin-top: 4px;
    border-radius: 8px !important;
    background: #1b1718 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

    .login-primary:hover {
        background: #302a2c !important;
    }

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 12px;
    margin: 2px 0;
}

    .login-divider::before,
    .login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }

    .login-divider span {
        line-height: 1;
    }

.login-microsoft {
    height: 44px;
    border: 1px solid #d9dce3 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #25272d !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

    .login-microsoft:hover {
        background: #f7f7f8 !important;
        border-color: #c7cad1 !important;
    }

    .login-microsoft .mud-button-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

.ms-logo {
    width: 16px;
    height: 16px;
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    gap: 2px;
    flex: none;
}

    .ms-logo i:nth-child(1) {
        background: #f25022;
    }

    .ms-logo i:nth-child(2) {
        background: #7fba00;
    }

    .ms-logo i:nth-child(3) {
        background: #00a4ef;
    }

    .ms-logo i:nth-child(4) {
        background: #ffb900;
    }

.access-page {
    padding: 4px 0;
}

.access-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.summary-item {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

.summary-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

.summary-value {
    font-size: 24px;
    line-height: 26px;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.summary-label {
    margin-top: 3px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.access-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.site-tabs {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.site-tab {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: .15s ease;
}

    .site-tab:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .site-tab.active {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    .site-tab > div {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

.site-tab-name {
    font-size: 13px;
    font-weight: 600;
}

.site-tab-meta {
    margin-top: 2px;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

.site-overview {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
}

.site-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 10px;
    color: var(--mud-palette-primary);
}

.site-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.site-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

    .site-meta span:first-child {
        color: var(--mud-palette-primary);
    }

.site-numbers {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
}

    .site-numbers > div {
        min-width: 90px;
        padding: 8px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .site-numbers > div + div {
            border-left: 1px solid var(--mud-palette-lines-default);
        }

    .site-numbers strong {
        font-size: 15px;
        line-height: 18px;
        color: var(--mud-palette-text-primary);
    }

    .site-numbers span {
        margin-top: 2px;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .35px;
        color: var(--mud-palette-text-secondary);
    }

.role-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.role-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.role-chip {
    padding: 4px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary);
    font-size: 11px;
    font-weight: 500;
}

.function-section {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.function-section-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.section-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.section-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.function-count {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

.access-table {
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .access-table .mud-table-head {
        background: var(--mud-palette-background-gray);
    }

        .access-table .mud-table-head .mud-table-cell {
            height: 36px;
            padding: 0 14px;
            font-size: 10px;
            font-weight: 600;
            color: var(--mud-palette-text-secondary);
        }

    .access-table .mud-table-body .mud-table-cell {
        height: 50px;
        padding: 6px 14px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

.function-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.function-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.function-name {
    font-size: 12px;
    font-weight: 550;
    color: var(--mud-palette-text-primary);
}

.function-group {
    margin-top: 1px;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

.code-chip {
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-family: monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

.permission-col {
    width: 68px;
    text-align: center !important;
}

.access-empty {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

.access-empty-card {
    padding: 50px;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

@media (max-width: 960px) {
    .access-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-overview {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .access-summary {
        grid-template-columns: 1fr;
    }

    .site-tabs {
        overflow-x: auto;
    }

    .site-tab {
        flex: 0 0 auto;
    }

    .site-numbers {
        width: 100%;
    }

        .site-numbers > div {
            flex: 1;
            min-width: 0;
        }
}

.location-header {
    height: 55px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.location-list {
    padding: 6px;
}

.location-row {
    position: relative;
    height: 54px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .15s ease;
}

    .location-row:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .location-row.selected {
        background: var(--mud-palette-primary-hover);
    }

.location-active-bar {
    display: none;
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mud-palette-primary);
}

.location-row.selected .location-active-bar {
    display: block;
}

.location-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.location-code {
    font-weight: 600;
    line-height: 18px;
}

.location-description {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 16px;
}

.location-row.selected .location-code {
    color: var(--mud-palette-primary);
}

.location-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.location-tab {
    min-width: 150px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    transition: .15s ease;
}

    .location-tab:hover {
        background: var(--surface-hover-bg);
    }

    .location-tab.active {
        color: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover);
    }

    .location-tab > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

.location-tab-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.location-tab-meta {
    font-size: 11px;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.application-item {
    position: relative;
    cursor: pointer;
}

.application-favorite {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
}

.portal-row-disabled {
    opacity: .42;
    cursor: not-allowed !important;
}

    .portal-row-disabled td {
        cursor: not-allowed !important;
    }

.um-page {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.um-header {
    height: 72px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.um-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.um-title {
    font-weight: 700;
}

.um-stat {
    min-width: 62px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .um-stat strong {
        font-size: .82rem;
    }

    .um-stat span {
        font-size: .6rem;
        opacity: .6;
    }

.um-layout {
    display: grid;
    grid-template-columns: 285px minmax(0,1fr);
    min-height: 680px;
}

.um-users {
    border-right: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.um-panel-header {
    height: 64px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.um-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--mud-palette-action-default-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
}

.um-search {
    padding: 0 10px 8px;
}

.um-user-list {
    padding: 4px 7px 10px;
    max-height: 565px;
    overflow: auto;
}

.um-user {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 2px;
}

    .um-user:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .um-user.selected {
        background: var(--mud-palette-primary-hover);
    }

.um-user-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.um-user-name {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

    .um-user-name strong {
        font-size: .78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.um-user-info > span {
    font-size: .64rem;
    opacity: .58;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.um-admin-badge {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning);
    font-size: .48rem;
    font-weight: 800;
    white-space: nowrap;
}

    .um-admin-badge.big {
        padding: 2px 6px;
        font-size: .52rem;
    }

.um-content {
    min-width: 0;
}

.um-user-header {
    min-height: 82px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.um-selected-user {
    min-width: 0;
}

.um-selected-name {
    display: flex;
    align-items: center;
    gap: 7px;
}

.um-admin-switch {
    min-width: 275px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .um-admin-switch.active {
        border-color: var(--mud-palette-warning);
        background: var(--mud-palette-warning-hover);
    }

.um-admin-switch-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.um-admin-switch > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.um-admin-switch strong {
    font-size: .72rem;
}

.um-admin-switch span {
    font-size: .61rem;
    opacity: .62;
}

.um-access {
    padding: 16px 18px 24px;
}

.um-section {
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .um-section:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }

.um-section-heading {
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.um-step {
    width: 27px;
    height: 27px;
    min-width: 27px;
    border-radius: 7px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 800;
}

.um-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 8px;
}

.um-site {
    min-height: 62px;
    padding: 9px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: var(--mud-palette-surface);
    color: inherit;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}

    .um-site:hover {
        border-color: var(--mud-palette-primary);
    }

    .um-site.selected {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover);
        box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    }

.um-site-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.um-site.selected .um-site-icon {
    color: var(--mud-palette-primary);
}

.um-site-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .um-site-info strong {
        font-size: .76rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .um-site-info span {
        font-size: .62rem;
        opacity: .6;
    }

.um-location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.um-location {
    min-width: 160px;
    min-height: 55px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: var(--mud-palette-surface);
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

    .um-location:hover {
        border-color: var(--mud-palette-primary);
    }

    .um-location.selected {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover);
        box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    }

.um-location-icon {
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 7px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.um-location-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .um-location-info strong {
        font-size: .74rem;
    }

    .um-location-info span {
        font-size: .61rem;
        opacity: .6;
    }

.um-role-count {
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--mud-palette-action-default-hover);
    font-size: .68rem;
}

.um-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    gap: 8px;
}

.um-role {
    min-height: 70px;
    padding: 9px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .um-role.active {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover);
    }

.um-role-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.um-role.active .um-role-icon {
    color: var(--mud-palette-primary);
}

.um-role-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .um-role-info > div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .um-role-info strong {
        font-size: .75rem;
    }

    .um-role-info > span, .um-role-info small {
        font-size: .61rem;
        opacity: .6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.um-role-admin {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning);
    font-size: .48rem;
    font-weight: 800;
}

.um-section-empty {
    min-height: 70px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .7rem;
    opacity: .6;
}

    .um-section-empty.roles {
        min-height: 130px;
        flex-direction: column;
    }

.um-empty {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.um-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.um-empty-small {
    padding: 30px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .7rem;
    opacity: .6;
}

@media(max-width:900px) {
    .um-layout {
        grid-template-columns: 1fr;
    }

    .um-users {
        border-right: 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .um-user-list {
        max-height: 260px;
    }

    .um-user-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .um-admin-switch {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   USER MANAGEMENT
   ========================================================= */

.access-page {
    width: 100%;
    padding: 18px;
    color: var(--mud-palette-text-primary);
    font-family: "Inter","Segoe UI",Arial,sans-serif;
}

.access-layout {
    min-height: calc(100vh - 145px);
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

/* USERS */
.users-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.users-header {
    min-height: 70px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.users-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-header-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 8%,var(--mud-palette-surface));
}

    .users-header-icon .mud-icon-root {
        font-size: 18px;
    }

.users-heading {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

.users-description {
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    line-height: 14px;
}

.users-count {
    min-width: 27px;
    height: 22px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 8%,var(--mud-palette-surface));
    font-size: 10px;
    font-weight: 600;
}

.users-search {
    height: 36px;
    margin: 11px 10px 8px;
    padding: 0 8px 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    background: var(--mud-palette-background);
    transition: .15s;
}

    .users-search:focus-within {
        border-color: color-mix(in srgb,var(--mud-palette-primary) 45%,var(--mud-palette-lines-default));
        background: var(--mud-palette-surface);
    }

    .users-search > .mud-icon-root {
        flex: 0 0 auto;
        color: var(--mud-palette-text-secondary);
        font-size: 16px;
    }

    .users-search input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font-size: 11px;
    }

.search-clear {
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
}

    .search-clear:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .search-clear .mud-icon-root {
        font-size: 14px;
    }

.users-list {
    flex: 1;
    padding: 3px 7px 10px;
    overflow-y: auto;
}

.user-entry {
    min-height: 58px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: .12s;
}

    .user-entry + .user-entry {
        margin-top: 3px;
    }

    .user-entry:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .user-entry.selected {
        border-color: color-mix(in srgb,var(--mud-palette-primary) 16%,transparent);
        background: color-mix(in srgb,var(--mud-palette-primary) 7%,var(--mud-palette-surface));
    }

.user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    font-size: 10px;
    font-weight: 600;
}

.user-entry.selected .user-avatar {
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb,var(--mud-palette-primary) 25%,var(--mud-palette-lines-default));
    background: color-mix(in srgb,var(--mud-palette-primary) 9%,var(--mud-palette-surface));
}

.user-entry-content {
    min-width: 0;
    flex: 1;
}

.user-entry-name {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-entry-email {
    margin-top: 1px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-entry.selected .user-entry-name {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.user-entry-action {
    width: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-chevron {
    color: var(--mud-palette-text-disabled);
    font-size: 17px !important;
    opacity: 0;
    transition: .12s;
}

.user-entry:hover .user-chevron {
    opacity: 1;
    transform: translateX(2px);
}

.user-selected {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface));
}

    .user-selected .mud-icon-root {
        font-size: 13px;
    }

.users-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    font-size: 10px;
}

    .users-empty .mud-icon-root {
        margin-bottom: 4px;
        color: var(--mud-palette-text-disabled);
        font-size: 27px;
    }

    .users-empty strong {
        color: var(--mud-palette-text-primary);
        font-size: 11px;
        font-weight: 600;
    }

.users-footer {
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 9px;
}

/* CONTENT */
.access-content {
    min-width: 0;
    padding: 18px;
}

.user-overview {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selected-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 9%,var(--mud-palette-surface));
    font-size: 11px;
    font-weight: 600;
}

.selected-name {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
}

.selected-email {
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    line-height: 16px;
}

.add-access-wrapper {
    position: relative;
}

/* SUMMARY */
.summary-grid {
    margin: 16px 0 22px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
}

.summary-card {
    height: 76px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: var(--mud-palette-background);
}

.summary-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

    .summary-icon .mud-icon-root {
        font-size: 20px;
    }

    .summary-icon.blue {
        color: #356fd0;
        background: #eaf1ff;
    }

    .summary-icon.purple {
        color: #7455ce;
        background: #f0ebff;
    }

    .summary-icon.green {
        color: #16845d;
        background: #e8f7f0;
    }

    .summary-icon.orange {
        color: #c77b15;
        background: #fff3df;
    }

.summary-value {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
}

.summary-label {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    line-height: 16px;
}

/* SECTION */
.access-section-header {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.section-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.section-subtitle {
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    line-height: 15px;
}

.access-search {
    width: 270px;
    height: 35px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

    .access-search .mud-icon-root {
        color: var(--mud-palette-text-secondary);
        font-size: 16px;
    }

    .access-search input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font-size: 11px;
    }

/* TABLE */
.assignment-table {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
}

.assignment-row {
    min-height: 68px;
    padding: 9px 12px;
    display: grid;
    grid-template-columns: minmax(190px,1.1fr) minmax(200px,1fr) minmax(300px,1.6fr) 90px 45px;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .assignment-row:last-child {
        border-bottom: 0;
    }

    .assignment-row:not(.assignment-head):hover {
        background: color-mix(in srgb,var(--mud-palette-primary) 2.5%,var(--mud-palette-surface));
    }

.assignment-head {
    min-height: 40px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .25px;
}

.application-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.application-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
}

    .application-icon .mud-icon-root {
        font-size: 17px;
    }

.cell-primary {
    overflow: hidden;
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cell-secondary {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    line-height: 14px;
}

.roles-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.role-badge {
    height: 25px;
    padding: 0 3px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 8%,var(--mud-palette-surface));
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

    .role-badge button {
        width: 18px;
        height: 18px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 4px;
        color: var(--mud-palette-primary);
        background: transparent;
        cursor: pointer;
    }

        .role-badge button:hover {
            color: var(--mud-palette-error);
            background: color-mix(in srgb,var(--mud-palette-error) 9%,transparent);
        }

        .role-badge button .mud-icon-root {
            font-size: 13px;
        }

.locations-cell {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

    .locations-cell > .mud-icon-root {
        margin-top: 2px;
        flex: 0 0 auto;
        color: var(--mud-palette-text-secondary);
        font-size: 15px;
    }

.location-values {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .location-values span {
        color: var(--mud-palette-text-primary);
        font-size: 11px;
        line-height: 17px;
        white-space: nowrap;
    }

        .location-values span:not(:last-child)::after {
            content: "·";
            margin: 0 7px;
            color: var(--mud-palette-text-disabled);
        }

.access-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-success);
    font-size: 11px;
    font-weight: 500;
}

    .access-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--mud-palette-success);
    }

.row-actions {
    display: flex;
    justify-content: flex-end;
}

/* ROLE POPOVER */
.role-popover {
    width: 360px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.role-popover-header {
    min-height: 57px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.role-popover-title {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

.role-popover-subtitle {
    margin-top: 1px;
    max-width: 250px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.role-site-info {
    margin: 9px 10px 0;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    background: var(--mud-palette-background);
}

    .role-site-info > .mud-icon-root {
        color: var(--mud-palette-primary);
        font-size: 18px;
    }

    .role-site-info div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .role-site-info span {
        color: var(--mud-palette-text-secondary);
        font-size: 8px;
    }

    .role-site-info strong {
        overflow: hidden;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.assigned-roles {
    padding: 10px 10px 2px;
}

.assigned-roles-title {
    margin-bottom: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.assigned-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.assigned-role {
    height: 27px;
    padding: 0 3px 0 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 6px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 8%,var(--mud-palette-surface));
}

    .assigned-role strong {
        font-size: 9px;
        font-weight: 500;
    }

    .assigned-role button {
        width: 19px;
        height: 19px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 4px;
        color: var(--mud-palette-primary);
        background: transparent;
        cursor: pointer;
    }

        .assigned-role button:hover {
            color: var(--mud-palette-error);
            background: color-mix(in srgb,var(--mud-palette-error) 9%,transparent);
        }

        .assigned-role button .mud-icon-root {
            font-size: 13px;
        }

.role-popover-search {
    height: 34px;
    margin: 9px 10px 7px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    background: var(--mud-palette-background);
}

    .role-popover-search:focus-within {
        border-color: color-mix(in srgb,var(--mud-palette-primary) 40%,var(--mud-palette-lines-default));
        background: var(--mud-palette-surface);
    }

    .role-popover-search .mud-icon-root {
        color: var(--mud-palette-text-secondary);
        font-size: 15px;
    }

    .role-popover-search input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        color: var(--mud-palette-text-primary);
        background: transparent;
        font-size: 11px;
    }

.role-popover-list {
    max-height: 310px;
    padding: 2px 6px 7px;
    overflow-y: auto;
}

.role-popover-item {
    min-height: 50px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: .12s;
}

    .role-popover-item:hover {
        background: color-mix(in srgb,var(--mud-palette-primary) 6%,var(--mud-palette-surface));
    }

.role-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
}

    .role-icon .mud-icon-root {
        font-size: 16px;
    }

.role-popover-info {
    min-width: 0;
    flex: 1;
}

.role-popover-name {
    overflow: hidden;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.role-popover-code {
    margin-top: 1px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 9px;
    line-height: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.role-admin-badge {
    padding: 3px 6px;
    border-radius: 5px;
    color: #a56c00;
    background: color-mix(in srgb,var(--mud-palette-warning) 12%,var(--mud-palette-surface));
    font-size: 8px;
    font-weight: 600;
}

.role-add {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--mud-palette-text-disabled);
}

    .role-add .mud-icon-root {
        font-size: 15px;
    }

.role-popover-item:hover .role-add {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb,var(--mud-palette-primary) 8%,transparent);
}

.role-popover-loading {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
}

.role-popover-empty {
    height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    font-size: 9px;
}

    .role-popover-empty .mud-icon-root {
        margin-bottom: 5px;
        color: var(--mud-palette-success);
        font-size: 24px;
    }

    .role-popover-empty strong {
        color: var(--mud-palette-text-primary);
        font-size: 10px;
        font-weight: 600;
    }

    .role-popover-empty span {
        margin-top: 2px;
    }

/* EMPTY */
.empty-access, .select-user-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

    .empty-icon, .select-user-empty > .mud-icon-root {
        margin-bottom: 10px;
        color: var(--mud-palette-text-disabled);
        font-size: 32px;
    }

.empty-title {
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.empty-text {
    margin: 4px 0 12px;
    font-size: 10px;
}

.users-list::-webkit-scrollbar, .role-popover-list::-webkit-scrollbar {
    width: 4px;
}

.users-list::-webkit-scrollbar-thumb, .role-popover-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: color-mix(in srgb,var(--mud-palette-text-secondary) 18%,transparent);
}

@media(max-width:1100px) {
    .access-layout {
        grid-template-columns: 250px minmax(0,1fr);
    }

    .summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .assignment-table {
        overflow-x: auto;
    }

    .assignment-row {
        min-width: 900px;
    }
}


.quick-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}

    .quick-icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.recent-page {
    width: 100%;
    padding: 0px 12px 10px 12px;
    color: var(--mud-palette-text-primary)
}

.recent-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px
}

    .recent-page-header h1 {
        margin: 0;
        font-size: 25px;
        font-weight: 700;
        letter-spacing: -.5px
    }

    .recent-page-header p {
        margin: 4px 0 0;
        font-size: 13px;
        color: var(--mud-palette-text-secondary)
    }

.refresh-button {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
    text-transform: none !important;
    border-radius: 8px !important
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 14px
}

.stat-card {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 10px;
    padding: 18px 20px;
    min-height: 130px;
    display: flex;
    flex-direction: column
}

.stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--mud-palette-text-secondary)
}

    .stat-head span {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .7px
    }

    .stat-head .mud-icon-root {
        font-size: 20px;
        color: var(--mud-palette-text-primary)
    }

.stat-card > strong {
    font-size: 30px;
    line-height: 1;
    margin-top: 17px;
    font-weight: 700;
    letter-spacing: -1px
}

.stat-card > small {
    margin-top: auto;
    padding-top: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px
}

.analytics-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(330px,1fr);
    gap: 14px;
    margin-bottom: 14px
}

.panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden
}

.panel-header {
    height: 73px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-lines-default)
}

    .panel-header h2, .activity-header h2 {
        margin: 0;
        font-size: 14px;
        font-weight: 700
    }

    .panel-header p, .activity-header p {
        margin: 3px 0 0;
        font-size: 11px;
        color: var(--mud-palette-text-secondary)
    }

.panel-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 5px 8px;
    border-radius: 5px
}

.chart-panel {
    overflow: hidden
}

    .chart-panel .app-chart {
        height: 280px;
        display: flex;
        padding: 18px 28px 18px 18px;
        box-sizing: border-box
    }

    .chart-panel .chart-y {
        width: 35px;
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding-right: 9px;
        font-size: 10px;
        color: var(--mud-palette-text-secondary);
        box-sizing: border-box
    }

    .chart-panel .chart-main {
        position: relative;
        flex: 1;
        height: 245px
    }

    .chart-panel .chart-grid {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none
    }

        .chart-panel .chart-grid span {
            display: block;
            width: 100%;
            border-top: 1px dashed color-mix(in srgb,var(--mud-palette-text-primary) 10%,transparent)
        }

            .chart-panel .chart-grid span:last-child {
                border-top: 1px solid color-mix(in srgb,var(--mud-palette-text-primary) 20%,transparent)
            }

    .chart-panel .chart-bars {
        position: absolute;
        inset: 0 0 auto 0;
        height: 245px;
        display: grid;
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: 20px
    }

    .chart-panel .chart-item {
        height: 245px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .chart-panel .chart-bar-space {
        height: 220px;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center
    }

    .chart-panel .chart-bar {
        position: relative;
        width: 48px;
        max-width: 55%;
        min-height: 5px;
        background: var(--mud-palette-primary);
        border-radius: 5px 5px 0 0
    }

        .chart-panel .chart-bar span {
            position: absolute;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 700;
            color: var(--mud-palette-text-primary)
        }

    .chart-panel .chart-label {
        width: 100%;
        padding: 9px 5px 0;
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box
    }

.empty-chart {
    height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    font-size: 12px
}

.top-list {
    padding: 4px 0
}

.top-row {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 11px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background .15s ease
}

    .top-row:last-child {
        border-bottom: 0
    }

    .top-row:hover {
        background: var(--mud-palette-background)
    }

.top-rank {
    width: 23px;
    font-size: 10px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary)
}

.app-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background)
}

    .app-icon .mud-icon-root {
        font-size: 18px
    }

.top-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column
}

    .top-content strong {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .top-content span {
        font-size: 10px;
        color: var(--mud-palette-text-secondary);
        margin-top: 1px
    }

.top-count {
    text-align: right;
    display: flex;
    flex-direction: column
}

    .top-count strong {
        font-size: 12px
    }

    .top-count span {
        font-size: 9px;
        color: var(--mud-palette-text-secondary)
    }

.row-arrow {
    font-size: 16px !important;
    margin-left: 3px
}

.empty-list {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary)
}

.activity-panel {
    margin-top: 0
}

.activity-header {
    min-height: 74px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-lines-default)
}

.activity-actions {
    display: flex;
    align-items: center
}

.activity-search {
    width: 250px
}

    .activity-search ::deep .mud-input-outlined-border {
        border-color: var(--mud-palette-lines-default) !important
    }

    .activity-search ::deep .mud-input-control {
        margin-top: 0
    }

.activity-table-header {
    height: 38px;
    display: grid;
    grid-template-columns: minmax(260px,2fr) minmax(140px,1fr) minmax(160px,1fr) 90px 40px;
    align-items: center;
    padding: 0 20px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary)
}

.activity-row {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(260px,2fr) minmax(140px,1fr) minmax(160px,1fr) 90px 40px;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background .15s ease
}

    .activity-row:last-child {
        border-bottom: 0
    }

    .activity-row:hover {
        background: var(--mud-palette-background)
    }

.application-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0
}

.application-name {
    display: flex;
    flex-direction: column;
    min-width: 0
}

    .application-name strong {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .application-name span {
        font-size: 10px;
        color: var(--mud-palette-text-secondary);
        margin-top: 2px
    }

.location-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px
}

    .location-cell .mud-icon-root {
        font-size: 15px;
        color: var(--mud-palette-text-secondary)
    }

.visit-time {
    display: flex;
    flex-direction: column
}

    .visit-time strong {
        font-size: 11px;
        font-weight: 600
    }

    .visit-time span {
        font-size: 9px;
        color: var(--mud-palette-text-secondary);
        margin-top: 2px
    }

.visit-count {
    font-size: 12px;
    font-weight: 700
}

.open-cell {
    display: flex;
    justify-content: flex-end
}

    .open-cell .mud-icon-root {
        font-size: 17px
    }

.empty-activity {
    padding: 55px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary)
}

    .empty-activity .mud-icon-root {
        font-size: 30px;
        margin-bottom: 8px
    }

    .empty-activity strong {
        font-size: 13px;
        color: var(--mud-palette-text-primary)
    }

    .empty-activity span {
        font-size: 11px;
        margin-top: 3px
    }

@media(max-width:1100px) {
    .stats-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .analytics-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:750px) {
    .stats-grid {
        grid-template-columns: 1fr
    }

    .recent-page-header {
        align-items: flex-start
    }

    .activity-header {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column
    }

    .activity-search {
        width: 100%
    }

    .activity-actions {
        width: 100%
    }

    .activity-table-header {
        display: none
    }

    .activity-row {
        grid-template-columns: 1fr auto;
        padding: 13px 15px;
        gap: 8px
    }

    .application-cell {
        grid-column: 1
    }

    .location-cell {
        grid-column: 1
    }

    .visit-time {
        grid-column: 1
    }

    .visit-count {
        grid-column: 2;
        grid-row: 1
    }

    .open-cell {
        grid-column: 2;
        grid-row: 2
    }
}