:root {
    --zeb-navy: #243665;
    --zeb-blue: #0b18bc;
    --zeb-sky: #52a5db;
    --zeb-mint: #61f8c3;
    --zeb-bg: #f4f7fb;
    --zeb-surface: #ffffff;
    --zeb-text: #172033;
    --zeb-muted: #6b778c;
    --zeb-border: rgba(36, 54, 101, .10);
    --zeb-shadow: 0 16px 40px rgba(28, 45, 86, .08);
}

html,
body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--zeb-bg);
    color: var(--zeb-text);
}

body {
    margin: 0;
}

.auth-loading-shell,
.content-loading {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}

.topbar {
    min-height: 70px;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--zeb-text) !important;
    border-bottom: 1px solid var(--zeb-border);
    backdrop-filter: blur(14px);
}

.mobile-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--zeb-navy);
    background: linear-gradient(145deg, rgba(97, 248, 195, .45), rgba(82, 165, 219, .16));
}

.topbar-title {
    margin-left: 12px;
    line-height: 1.1;
}

.topbar-title .mud-typography-caption {
    color: var(--zeb-muted);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--zeb-border);
    border-radius: 14px;
    background: #fff;
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .78rem;
    color: #fff;
    background: linear-gradient(145deg, var(--zeb-navy), var(--zeb-blue));
}

.topbar-user-copy {
    display: flex;
    flex-direction: column;
    min-width: 90px;
    line-height: 1.15;
}

.topbar-user-copy strong {
    font-size: .84rem;
}

.topbar-user-copy span {
    margin-top: 3px;
    font-size: .7rem;
    color: var(--zeb-muted);
}

.logout-button {
    margin-left: 6px;
}

.sidebar {
    background: linear-gradient(180deg, #1f315f 0%, #17264b 100%) !important;
    color: #fff !important;
    border-right: 0 !important;
}

.sidebar .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px 18px 18px;
}

.sidebar-brand .mud-typography-h6 {
    color: #fff;
    font-weight: 800;
    letter-spacing: .3px;
}

.sidebar-brand .mud-typography-caption {
    color: rgba(255, 255, 255, .62);
}

.sidebar-logo {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--zeb-navy);
    background: linear-gradient(145deg, var(--zeb-mint), #b7ffe6);
    box-shadow: 0 8px 24px rgba(97, 248, 195, .18);
}

.sidebar-divider {
    border-color: rgba(255, 255, 255, .10) !important;
    margin: 0 16px 14px;
}

.nav-section-label {
    display: block;
    padding: 5px 22px 8px;
    color: rgba(255, 255, 255, .45) !important;
    font-size: .66rem !important;
    letter-spacing: 1.4px !important;
}

.main-nav .mud-nav-link {
    margin: 4px 10px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .76) !important;
    font-weight: 600;
}

.main-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.main-nav .mud-nav-link.active,
.main-nav .mud-nav-link.mud-nav-link-active {
    background: rgba(97, 248, 195, .15) !important;
    color: var(--zeb-mint) !important;
}

.main-nav .mud-nav-link-icon {
    color: inherit !important;
}

.sidebar-footer {
    margin: auto 14px 16px;
    padding: 13px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
}

.sidebar-footer-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--zeb-mint);
    background: rgba(97, 248, 195, .10);
}

.sidebar-footer div:last-child {
    display: flex;
    flex-direction: column;
}

.sidebar-footer strong {
    font-size: .76rem;
}

.sidebar-footer span {
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
}

.main-content {
    padding: 102px 36px 48px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 100% 0%, rgba(82, 165, 219, .08), transparent 28%),
        var(--zeb-bg);
}

.page-title {
    font-weight: 800 !important;
    letter-spacing: -.7px !important;
}

.eyebrow {
    color: var(--zeb-blue) !important;
    font-weight: 800 !important;
    letter-spacing: 1.25px !important;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.section-title {
    font-weight: 750 !important;
}

/* Dashboard */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 220px;
    padding: 34px 38px;
    margin-bottom: 26px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 30%, rgba(97, 248, 195, .22), transparent 26%),
        linear-gradient(125deg, #1d315f 0%, #243665 52%, #173d67 100%);
    box-shadow: 0 22px 50px rgba(31, 49, 95, .18);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    bottom: -95px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, .035);
}

.dashboard-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.hero-eyebrow {
    color: var(--zeb-mint) !important;
}

.dashboard-greeting {
    margin-top: 4px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

.dashboard-subtitle {
    max-width: 620px;
    margin-top: 10px !important;
    color: rgba(255, 255, 255, .74) !important;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.dashboard-hero .hero-actions .mud-button-filled {
    color: var(--zeb-navy) !important;
    background: var(--zeb-mint) !important;
}

.dashboard-hero .hero-actions .mud-button-outlined {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
}

.dashboard-hero-mark {
    position: relative;
    z-index: 2;
    width: 122px;
    height: 122px;
    flex: 0 0 122px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    color: var(--zeb-mint);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    transform: rotate(5deg);
}

.dashboard-hero-mark .mud-icon-root {
    font-size: 64px !important;
}

.metric-card,
.overview-panel,
.attention-panel,
.queue-stat-card,
.ticket-list-shell,
.conversation-panel,
.detail-panel,
.workflow-panel,
.activity-panel,
.internal-note-panel,
.approval-card,
.empty-approval-state {
    border: 1px solid var(--zeb-border);
    border-radius: 20px !important;
    background: var(--zeb-surface) !important;
    box-shadow: var(--zeb-shadow);
}

.metric-card {
    min-height: 172px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(28, 45, 86, .11);
}

.metric-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon,
.queue-stat-icon,
.empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
}

.primary-soft {
    color: var(--zeb-blue);
    background: rgba(11, 24, 188, .08);
}

.info-soft {
    color: #2784be;
    background: rgba(82, 165, 219, .13);
}

.warning-soft {
    color: #9a6800;
    background: rgba(245, 171, 53, .15);
}

.error-soft {
    color: #c43b48;
    background: rgba(217, 72, 87, .10);
}

.success-soft {
    color: #158064;
    background: rgba(35, 181, 140, .12);
}

.metric-label {
    color: var(--zeb-muted);
    font-size: .82rem;
    font-weight: 700;
}

.metric-value {
    margin-top: 18px !important;
    margin-bottom: 2px !important;
    font-weight: 800 !important;
    color: var(--zeb-navy);
}

.overview-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.overview-stat {
    padding: 18px;
    border-radius: 16px;
    background: #f7f9fc;
    border: 1px solid rgba(36, 54, 101, .06);
}

.overview-stat span {
    display: block;
    font-size: .78rem;
    color: var(--zeb-muted);
}

.overview-stat strong {
    display: block;
    margin-top: 5px;
    font-size: 1.7rem;
    color: var(--zeb-navy);
}

.attention-panel {
    height: 100%;
    background:
        radial-gradient(circle at 100% 0%, rgba(97, 248, 195, .15), transparent 35%),
        #fff !important;
}

.attention-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--zeb-navy);
    background: rgba(97, 248, 195, .24);
}

.attention-value {
    margin-top: 12px !important;
    font-weight: 800 !important;
    color: var(--zeb-navy);
}

/* Ticket list */
.queue-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.queue-stat-card .mud-typography-h5 {
    font-weight: 800;
    color: var(--zeb-navy);
}

.ticket-list-shell {
    overflow: hidden;
}

.ticket-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.ticket-search {
    width: min(520px, 100%);
}

.queue-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ticket-table {
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(36, 54, 101, .07);
}

.modern-ticket-table .mud-table-head {
    background: #f7f9fc;
}

.modern-ticket-table .mud-table-cell {
    border-bottom-color: rgba(36, 54, 101, .07) !important;
}

.ticket-no-cell {
    color: var(--zeb-blue);
    font-weight: 800 !important;
}

.subject-cell {
    min-width: 230px;
}

.unassigned-pill {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: #8c6208;
    background: rgba(245, 171, 53, .13);
}

.empty-state,
.empty-approval-state {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
}

.empty-state-icon {
    margin-bottom: 4px;
}

/* Ticket detail */
.ticket-detail-header {
    margin-bottom: 22px;
}

.back-button {
    margin-left: -10px;
    margin-bottom: 8px;
}

.ticket-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.ticket-number {
    color: var(--zeb-blue) !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

.ticket-header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.claim-banner {
    border-radius: 20px !important;
    color: #fff !important;
    background: linear-gradient(110deg, #25396b, #1c4f6d) !important;
    box-shadow: 0 16px 36px rgba(31, 49, 95, .16);
}

.claim-banner-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.claim-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: var(--zeb-mint);
    background: rgba(255, 255, 255, .10);
}

.claim-text {
    flex: 1;
}

.claim-text .mud-typography-body2 {
    color: rgba(255, 255, 255, .70);
}

.conversation-panel {
    min-height: 540px;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.message-card {
    display: flex;
    gap: 13px;
    padding: 16px;
    border: 1px solid rgba(36, 54, 101, .08);
    border-radius: 16px;
    background: #fbfcfe;
}

.message-card.internal-note {
    border-color: rgba(245, 171, 53, .25);
    background: #fffaf0;
}

.message-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: var(--zeb-navy);
}

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

.message-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
    font-size: .78rem;
    color: var(--zeb-muted);
}

.message-meta strong {
    color: var(--zeb-text);
}

.internal-label {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    color: #8c6208;
    background: rgba(245, 171, 53, .16);
}

.message-body {
    white-space: pre-wrap;
    line-height: 1.65;
}

.composer-card {
    margin-top: 22px;
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(36, 54, 101, .07);
}

.composer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.internal-note-panel {
    background: #fffcf5 !important;
}

.ticket-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-line {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(36, 54, 101, .07);
    font-size: .85rem;
}

.detail-line:last-child {
    border-bottom: 0;
}

.detail-line span {
    color: var(--zeb-muted);
}

.detail-line strong {
    text-align: right;
    color: var(--zeb-text);
}

.text-danger {
    color: #c53f4d !important;
}

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

.status-action-grid {
    display: grid;
    gap: 9px;
}

.approval-panel {
    border-color: rgba(245, 171, 53, .20);
}

.approval-actions {
    display: flex;
    gap: 8px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    padding: 7px 0 14px;
}

.activity-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 19px;
    bottom: -5px;
    width: 1px;
    background: rgba(36, 54, 101, .10);
}

.activity-item:last-child::before {
    display: none;
}

.activity-dot {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--zeb-mint);
    box-shadow: 0 0 0 4px rgba(97, 248, 195, .18);
}

/* Approvals */
.approval-count-badge {
    width: 78px;
    height: 66px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--zeb-navy);
    background: rgba(97, 248, 195, .22);
    border: 1px solid rgba(97, 248, 195, .35);
}

.approval-count-badge span {
    font-size: 1.45rem;
    font-weight: 850;
    line-height: 1;
}

.approval-count-badge small {
    margin-top: 4px;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.approval-card {
    height: 100%;
}

.approval-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.approval-subject {
    margin-top: 2px !important;
    font-weight: 750 !important;
}

.approval-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.approval-meta-grid > div {
    padding: 12px;
    border-radius: 13px;
    background: #f8fafc;
}

.approval-meta-grid span,
.approval-meta-grid strong {
    display: block;
}

.approval-meta-grid span {
    font-size: .68rem;
    color: var(--zeb-muted);
    text-transform: uppercase;
    letter-spacing: .45px;
}

.approval-meta-grid strong {
    margin-top: 4px;
    font-size: .82rem;
}

.approval-reason-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border-left: 3px solid #e1a529;
    background: #fffbf2;
}

.approval-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Existing forms / login */
.form-card {
    max-width: 850px;
    border-radius: 20px !important;
    border: 1px solid var(--zeb-border);
    box-shadow: var(--zeb-shadow);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(82, 165, 219, .18), transparent 32%),
        radial-gradient(circle at 80% 70%, rgba(97, 248, 195, .17), transparent 28%),
        #f4f7fb;
}

.login-card {
    width: min(480px, 100%);
    border-radius: 26px !important;
    border: 1px solid var(--zeb-border);
    box-shadow: 0 26px 65px rgba(31, 49, 95, .15) !important;
}

.login-brand {
    display: flex;
    gap: 16px;
    align-items: center;
}

.brand-avatar {
    background: var(--zeb-navy) !important;
    color: var(--zeb-mint) !important;
    box-shadow: 0 10px 24px rgba(36, 54, 101, .22);
}

@media (max-width: 1100px) {
    .main-content {
        padding: 96px 24px 42px;
    }

    .dashboard-hero-mark {
        display: none;
    }
}

@media (max-width: 760px) {
    .main-content {
        padding: 90px 16px 34px;
    }

    .page-header,
    .ticket-title-row,
    .ticket-toolbar,
    .claim-banner-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-hero {
        min-height: auto;
        padding: 28px 24px;
    }

    .dashboard-greeting {
        font-size: 2rem !important;
    }

    .overview-stat-grid,
    .approval-meta-grid {
        grid-template-columns: 1fr;
    }

    .ticket-search {
        width: 100%;
    }

    .queue-filter-buttons {
        width: 100%;
    }

    .queue-filter-buttons .mud-button-root {
        flex: 1;
    }

    .topbar-user-copy {
        display: none;
    }

    .topbar-user {
        padding: 4px;
        border: 0;
    }
}


/* Current dashboard refinements */
.dashboard-page-header {
    align-items: flex-end;
}

.dashboard-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ticket-no-link {
    color: var(--zeb-blue);
    font-weight: 800;
    text-decoration: none;
    letter-spacing: .1px;
}

.ticket-no-link:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .dashboard-header-actions {
        width: 100%;
    }

    .dashboard-header-actions .mud-button-root {
        flex: 1;
    }
}

/* -------------------------------------------------------------
   Mobile navigation + profile menu
   ------------------------------------------------------------- */
.mobile-menu-button {
    display: none !important;
    margin-right: 4px;
}

.profile-menu-shell {
    position: relative;
    margin-left: 10px;
}

.profile-trigger {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--zeb-border);
    border-radius: 14px;
    background: #fff;
    color: var(--zeb-text);
    font: inherit;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-trigger:hover,
.profile-trigger:focus-visible {
    border-color: rgba(36, 54, 101, .22);
    background: #fbfcff;
    box-shadow: 0 8px 24px rgba(28, 45, 86, .08);
    outline: none;
}

.profile-chevron {
    color: var(--zeb-muted) !important;
    font-size: 19px !important;
}

.profile-card {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1500;
    width: 280px;
    padding: 14px;
    border: 1px solid var(--zeb-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(28, 45, 86, .18);
}

.profile-card::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    border-left: 1px solid var(--zeb-border);
    border-top: 1px solid var(--zeb-border);
    background: #fff;
    transform: rotate(45deg);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 14px;
}

.profile-card-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(145deg, var(--zeb-navy), var(--zeb-blue));
}

.profile-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.profile-card-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

.profile-card-copy span {
    margin-top: 3px;
    color: var(--zeb-muted);
    font-size: .74rem;
}

.profile-card-client {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 4px 8px;
    color: var(--zeb-muted);
    font-size: .8rem;
}

.profile-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 11px 12px;
    border: 0;
    border-radius: 11px;
    background: rgba(208, 47, 75, .08);
    color: #b4233d;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.profile-logout:hover {
    background: rgba(208, 47, 75, .13);
}

@media (max-width: 1100px) {
    .mobile-menu-button {
        display: inline-flex !important;
    }
}

@media (max-width: 760px) {
    .topbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mobile-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .topbar-title {
        margin-left: 8px;
        min-width: 0;
    }

    .topbar-title .mud-typography-h6 {
        max-width: 245px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem !important;
    }

    .topbar-title .mud-typography-caption {
        display: none;
    }

    .profile-menu-shell {
        margin-left: 4px;
    }

    .profile-trigger {
        min-height: 42px;
        padding: 4px;
        border: 0;
        background: transparent;
    }

    .profile-trigger:hover,
    .profile-trigger:focus-visible {
        background: rgba(36, 54, 101, .06);
        box-shadow: none;
    }

    .profile-trigger .topbar-user-copy,
    .profile-chevron {
        display: none !important;
    }

    .profile-card {
        position: fixed;
        top: 64px;
        right: 10px;
        width: min(300px, calc(100vw - 20px));
    }

    .profile-card::before {
        right: 22px;
    }
}

@media (max-width: 480px) {
    .mobile-brand-mark {
        display: none;
    }

    .topbar-title .mud-typography-h6 {
        max-width: 190px;
    }
}

/* Profile dropdown rendered through MudMenu/MudPopover so it is not clipped by the app bar. */
.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    padding: 12px 14px;
}

.profile-menu-shell .mud-menu-activator {
    display: flex;
    align-items: center;
}

@media (max-width: 760px) {
    .profile-menu-header {
        min-width: 230px;
    }
}

/* --------------------------------------------------------------------------
   Ticket master fields + attachments
   -------------------------------------------------------------------------- */
.ticket-attachment-picker,
.ticket-detail-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px dashed rgba(36, 54, 101, .22);
    border-radius: 16px;
    background: rgba(246, 249, 255, .75);
}

.attachment-picker-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.attachment-picker-icon,
.attachment-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(92, 72, 232, .10);
    color: #4f46df;
}

.attachment-picker-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #5b49e7;
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(91, 73, 231, .18);
}

.attachment-picker-button:hover {
    filter: brightness(.97);
}

.attachment-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.selected-attachment-list,
.ticket-attachment-list {
    display: grid;
    gap: 10px;
}

.selected-attachment-item,
.ticket-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(36, 54, 101, .10);
    border-radius: 13px;
    background: #fff;
}

.attachment-file-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.attachment-file-info > div:last-child {
    min-width: 0;
}

.attachment-file-info strong,
.attachment-file-info span {
    display: block;
}

.attachment-file-info strong {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d2945;
    font-size: .86rem;
}

.attachment-file-info span {
    margin-top: 2px;
    color: #77829b;
    font-size: .74rem;
}

.attachments-panel {
    border: 1px solid rgba(36, 54, 101, .10);
    border-radius: 18px !important;
    background: #fff;
}

.attachment-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 80px;
    border: 1px dashed rgba(36, 54, 101, .15);
    border-radius: 13px;
    color: #8993a8;
    font-size: .84rem;
}

@media (max-width: 760px) {
    .ticket-attachment-picker,
    .ticket-detail-upload {
        align-items: stretch;
    }

    .attachment-picker-button {
        width: 100%;
    }

    .attachment-file-info strong {
        max-width: 230px;
    }
}

/* --------------------------------------------------------------------------
   Category & Department administration
   -------------------------------------------------------------------------- */
.sidebar-admin-divider {
    margin-top: 18px !important;
}

.masterdata-page-header {
    align-items: flex-end;
    gap: 20px;
}

.masterdata-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.masterdata-summary-item {
    min-width: 138px;
    padding: 11px 14px;
    border: 1px solid rgba(36, 54, 101, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px rgba(36, 54, 101, .05);
}

.masterdata-summary-item span,
.masterdata-summary-item strong {
    display: block;
}

.masterdata-summary-item span {
    color: #7b869d;
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.masterdata-summary-item strong {
    margin-top: 2px;
    color: #213866;
    font-size: 1.45rem;
    line-height: 1.1;
}

.masterdata-grid {
    margin-top: 2px;
}

.masterdata-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(36, 54, 101, .10);
    border-radius: 20px !important;
    background: #fff;
    box-shadow: 0 15px 38px rgba(36, 54, 101, .07);
}

.masterdata-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(36, 54, 101, .08);
}

.masterdata-card-icon,
.masterdata-row-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(91, 73, 231, .10);
    color: #4f46df;
}

.masterdata-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.masterdata-card-icon.department,
.masterdata-row-avatar.department {
    background: rgba(23, 156, 133, .11);
    color: #157f70;
}

.masterdata-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 18px 20px;
    background: #f8faff;
    border-bottom: 1px solid rgba(36, 54, 101, .07);
}

.masterdata-editor-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.masterdata-list {
    display: grid;
    gap: 9px;
    padding: 15px;
    max-height: 510px;
    overflow-y: auto;
}

.masterdata-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 67px;
    padding: 10px 11px 10px 12px;
    border: 1px solid rgba(36, 54, 101, .08);
    border-radius: 14px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.masterdata-row:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 73, 231, .20);
    box-shadow: 0 8px 18px rgba(36, 54, 101, .06);
}

.masterdata-row.is-inactive {
    background: #fafbfc;
    opacity: .72;
}

.masterdata-row-main,
.masterdata-row-actions {
    display: flex;
    align-items: center;
}

.masterdata-row-main {
    gap: 11px;
    min-width: 0;
}

.masterdata-row-main > div:last-child {
    min-width: 0;
}

.masterdata-row-main strong,
.masterdata-row-main span {
    display: block;
}

.masterdata-row-main strong {
    color: #21304f;
    font-size: .90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.masterdata-row-main span {
    margin-top: 2px;
    color: #8a94a8;
    font-size: .70rem;
}

.masterdata-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.masterdata-row-actions {
    gap: 3px;
    flex: 0 0 auto;
}

.masterdata-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
    color: #8a94a8;
    text-align: center;
    font-size: .84rem;
}

@media (max-width: 900px) {
    .masterdata-page-header {
        align-items: stretch;
    }

    .masterdata-summary {
        width: 100%;
    }

    .masterdata-summary-item {
        flex: 1 1 140px;
    }
}

@media (max-width: 620px) {
    .masterdata-editor {
        grid-template-columns: 1fr;
    }

    .masterdata-editor-actions .mud-button-root:first-child {
        flex: 1;
    }

    .masterdata-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .masterdata-row-main {
        width: 100%;
    }

    .masterdata-row-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================
   User Management
   ========================================================= */
.users-page-header {
    align-items: center;
    gap: 18px;
}

.users-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.users-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid rgba(36, 54, 101, .09);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(36, 54, 101, .055);
}

.users-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: rgba(79, 70, 223, .10);
    color: #4f46df;
}

.users-summary-icon.active {
    background: rgba(20, 154, 116, .11);
    color: #168b6d;
}

.users-summary-icon.technician {
    background: rgba(52, 132, 221, .11);
    color: #2e79c9;
}

.users-summary-icon.approver {
    background: rgba(235, 153, 42, .12);
    color: #c47d1c;
}

.users-summary-card span,
.users-summary-card strong {
    display: block;
}

.users-summary-card span {
    color: #7c879d;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.users-summary-card strong {
    margin-top: 2px;
    color: #213866;
    font-size: 1.55rem;
    line-height: 1.15;
}

.users-filter-card {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px 170px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(36, 54, 101, .09);
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 10px 28px rgba(36, 54, 101, .045);
}

.users-workspace-grid {
    align-items: flex-start;
}

.users-list-card,
.user-editor-card {
    overflow: hidden;
    border: 1px solid rgba(36, 54, 101, .09);
    border-radius: 20px !important;
    background: #fff;
    box-shadow: 0 15px 38px rgba(36, 54, 101, .065);
}

.users-list-heading,
.user-editor-header,
.user-editor-footer {
    display: flex;
    align-items: center;
}

.users-list-heading {
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(36, 54, 101, .075);
}

.users-list {
    display: grid;
}

.user-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 1fr) 105px 82px;
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(36, 54, 101, .065);
    transition: background .15s ease;
}

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

.user-row:hover {
    background: #f9fbff;
}

.user-row.is-inactive {
    background: #fafbfc;
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-avatar-image,
.user-avatar-fallback {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
}

.user-avatar-image {
    object-fit: cover;
    background: #eef2f8;
}

.user-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #293b6d, #536ca3);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.user-identity-copy {
    min-width: 0;
}

.user-identity-copy strong,
.user-identity-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-copy strong {
    color: #20304f;
    font-size: .91rem;
}

.user-login {
    margin-top: 2px;
    color: #65718a;
    font-size: .76rem;
    font-weight: 650;
}

.user-email {
    margin-top: 1px;
    color: #929bad;
    font-size: .70rem;
}

.user-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.user-role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f0f3f8;
    color: #5e687d;
    font-size: .68rem;
    font-weight: 750;
}

.user-role-chip.technician {
    background: #eaf4ff;
    color: #2f70b6;
}

.user-role-chip.approver {
    background: #fff4df;
    color: #a96b16;
}

.user-role-chip.admin {
    background: #efeafe;
    color: #6346b9;
}

.user-role-chip.user {
    background: #eaf8f3;
    color: #277961;
}

.user-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 750;
}

.user-status-pill > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.user-status-pill.active {
    color: #238060;
}

.user-status-pill.active > span {
    background: #27ad7f;
    box-shadow: 0 0 0 3px rgba(39, 173, 127, .11);
}

.user-status-pill.inactive {
    color: #8790a0;
}

.user-status-pill.inactive > span {
    background: #a2a9b5;
}

.user-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.users-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    min-height: 270px;
    padding: 30px;
    color: #8a94a8;
    text-align: center;
}

.users-empty .mud-icon-root {
    font-size: 2.2rem;
    color: #bac2cf;
}

.users-empty strong {
    color: #59657c;
}

.users-empty span {
    font-size: .80rem;
}

.user-editor-card {
    position: sticky;
    top: 88px;
}

.user-editor-header {
    gap: 11px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(36, 54, 101, .075);
}

.user-editor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(79, 70, 223, .10);
    color: #4f46df;
}

.user-editor-icon.warning {
    background: rgba(235, 153, 42, .13);
    color: #b8751a;
}

.user-editor-body {
    display: grid;
    gap: 14px;
    padding: 18px;
    max-height: calc(100vh - 245px);
    overflow-y: auto;
}

.user-editor-footer {
    justify-content: flex-end;
    gap: 7px;
    padding: 13px 18px;
    border-top: 1px solid rgba(36, 54, 101, .075);
    background: #fbfcfe;
}

.user-photo-editor {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px dashed rgba(36, 54, 101, .18);
    border-radius: 14px;
    background: #fafcff;
}

.user-photo-preview {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 15px;
    object-fit: cover;
    background: #edf1f7;
}

.user-photo-preview.empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8d98aa;
}

.user-photo-editor input[type="file"] {
    display: block;
    width: 100%;
    max-width: 230px;
    color: #59657c;
    font-size: .75rem;
}

.user-photo-editor span {
    display: block;
    margin-top: 4px;
    color: #929bad;
    font-size: .66rem;
}

.user-role-selector > label,
.user-role-selector > span {
    display: block;
}

.user-role-selector > label {
    color: #2e3a54;
    font-size: .79rem;
    font-weight: 750;
}

.user-role-selector > span {
    margin-top: 2px;
    color: #8993a7;
    font-size: .69rem;
}

.user-role-options {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.user-role-option {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px 8px 4px;
    border: 1px solid rgba(36, 54, 101, .09);
    border-radius: 12px;
    background: #fff;
}

.user-role-option.selected {
    border-color: rgba(79, 70, 223, .25);
    background: rgba(79, 70, 223, .035);
}

.user-role-option strong,
.user-role-option span {
    display: block;
}

.user-role-option strong {
    color: #34405a;
    font-size: .76rem;
}

.user-role-option span {
    margin-top: 1px;
    color: #919bad;
    font-size: .64rem;
    line-height: 1.3;
}

.user-active-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(36, 54, 101, .09);
    border-radius: 13px;
    background: #fafcff;
}

.user-active-control strong,
.user-active-control span {
    display: block;
}

.user-active-control strong {
    color: #34405a;
    font-size: .77rem;
}

.user-active-control span {
    margin-top: 2px;
    color: #919bad;
    font-size: .65rem;
}

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

    .user-row {
        grid-template-columns: minmax(240px, 1.35fr) minmax(150px, 1fr) 95px 78px;
    }
}

@media (max-width: 900px) {
    .users-filter-card {
        grid-template-columns: 1fr 1fr;
    }

    .users-search {
        grid-column: 1 / -1;
    }

    .user-editor-card {
        position: static;
    }

    .user-editor-body {
        max-height: none;
    }
}

@media (max-width: 720px) {
    .users-page-header {
        align-items: stretch;
    }

    .users-page-header .mud-button-root {
        width: 100%;
    }

    .user-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 14px;
    }

    .user-role-list {
        grid-column: 1 / -1;
        order: 3;
    }

    .user-row-status {
        grid-column: 1;
        order: 4;
    }

    .user-row-actions {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 520px) {
    .users-summary-grid,
    .users-filter-card {
        grid-template-columns: 1fr;
    }

    .users-search {
        grid-column: auto;
    }

    .users-summary-card {
        min-height: 78px;
    }

    .user-editor-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .user-editor-footer .mud-button-root {
        width: 100%;
    }

    .user-photo-editor {
        align-items: flex-start;
        flex-direction: column;
    }
}