.login-body .login-panel {
    margin-bottom: 40px!important;
    margin-top: 0!important;
}
.login-body .login-panel button {
    display: inline!important;
}
.layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip{
    width: 120px!important;
}
.login-container{
    width: 320px!important;
}
.noHeader.ui-datatable table thead tr {
    display: none;
}
.video-container{
    align-content: center;
    text-align: center;
    padding: 40px 0 60px 0;
}
/*chat*/
time{
    font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-weight: normal; float:right; color: #afafaf;
}
.username{
    color: #5B6BBF !important;
}
.bubble{
    border-radius: 5px;
    /*box-shadow: 0 0 6px #B2B2B2;*/
    display: inline-block;
    /*padding: 8px 18px;*/
    position: relative;
    vertical-align: top;
}
.yourMessage {
    background-color: #e4fed9;
    margin-left: 0px !important;
}
.myMessage {
    background-color: #fff7e1;
    border-color:#fff7e1;
    float: right;
}
.dashboard .chat .new-message .message-send {
    display: inline-block;
    width: 40px;
    line-height: 60px;
    height: 100%;
    text-align: center;
    vertical-align: top;
}

.myTables{
    position: relative;
}
.myMessage-input {
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
}
.project-progressbar {
    width: 100px;
    background-color: #545b61;
    margin-top: 4px;
}
.project-progressbar .project-progressbar-value {
    background-color: #8be298;
    height: 4px;
}
#cookieDialog .ui-dialog-content {
    padding: 0;
}
.layout-single-page{
    padding-left: 50px;
    padding-right: 50px;
}
.layout-wrapper .footer span {
    float: right;
    margin: 0 10px 0 10px;
}
.layout-wrapper .layout-main{
    min-height: 100vh!important;
}
.layout-wrapper .topbar .topbar-menu > li.profile-item{
    margin-top: 0!important;
}
.layout-tabmenu-content .calendar-tab ul li .calendar-event-date {
    padding: 0!important;
    align-content: space-evenly;
}
.surface-overlay{
    background-color: transparent!important;
}
.layout-wrapper .footer a {
    margin-left: 0!important;
    font-size: 16px!important;
}
.layout-wrapper .topbar .logo{
    padding-top: 6px!important;
}
.layout-wrapper .topbar .logo img{
    max-height: 50px!important;
    max-width: 50px!important;
    width: auto!important;
}
.login-body .login-panel img{
    width: 200px!important;
}
.dashboard .overview-box.overview-box-white {
    background-color: #ffffff;
}
.dashboard .overview-box.overview-box-white .overview-box-footer {
    background-color: #f8f9fa;
    color: #545b61!important;
    font-weight: bold;
}
.dashboard .overview-box .overview-box-count{
    color: #545b61!important;
}
.dashboard .overview-box .overview-box-name{
    color: #545b61!important;
}
.landing-body .landing-wrapper #introduction {
    background-image: url("")!important;
    background-size: auto!important;
    background-repeat: repeat!important;
}
.landing-body .landing-topbar .landing-topbar-left .logo img{
    height: auto!important;
    width: 24px!important;
}

.login-body .login-panel{
    border-bottom: 0!important;
}
.exception-body .exception-panel {
    border-bottom: 0!important;
}
.dropMenuItem{
    width:100%;
}



/* For WebApp*/
@media (max-width: 767px) {
    .grid{
        margin-left: 0;
        margin-right: 0;
    }
    .fc .fc-toolbar{
        display: block!important;
    }
    .layout-wrapper .topbar .logo{
        padding-top: 15px!important;
    }
    .login-body{
        padding-top: 0!important;
    }
    .login-body .login-panel{
        margin: 0!important;
        width: 100%!important;
        min-height: 100vh!important;
    }
}
@media (max-width: 767px) {
    .show-on-desktop {
        display: none!important;
    }
    .mobile-inline{
        display: inline!important;
    }
    /*.topbar{*/
    /*    display: none;*/
    /*}*/
    /*.layout-sidebar{*/
    /*    display: none;*/
    /*}*/
    /*.layout-config{*/
    /*    display: none;*/
    /*}*/
    /*.wavesContainer{*/
    /*    display: none;*/
    /*}*/
    /*.layout-wrapper .footer {*/
    /*    display: none;*/
    /*}*/
    .layout-wrapper .layout-main{
        padding-top: 2.5rem!important;
        padding-left: 0!important;
        padding-right: 0!important;
        padding-bottom: 7rem!important;
        margin: 0!important;
    }
    .layout-content{
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

@media (min-width: 768px) {
    .hide-on-desktop {
        display: none!important;
    }
}

.fc .fc-view-harness{
    z-index: 0!important;
}

@media (max-width: 768px) {

    .mobile-dialog.ui-dialog {
        width: 95vw !important;
        height: 95vh !important;
        top: 2.5vh !important;
        left: 2.5vw !important;
        margin: 0 !important;
        position: fixed !important;
    }

    .mobile-dialog .ui-dialog-content {
        /*height: calc(80vh - 50px) !important;*/
        overflow-y: auto;
    }

}

.mobile-dialog{
    /*max-width: 800px;*/
    max-width: 80%;
}

.social {
    height: 20px;
    width: 20px;
    color: #767b7f;
    font-size: 20px;
    margin-left: 20px;
}

#todayTable_head{
    display: none;
}

.custom-badge {
    border-radius: 6px;
    padding: 0.2em 0.5rem;
    /*text-transform: uppercase;*/
    font-weight: 700;
    /*font-size: 12px;*/
    letter-spacing: 0.3px;
}
.custom-badge.green {
    background: #C8E6C9;
    color: #256029;
}
.custom-badge.red {
    background: #FFCDD2;
    color: #C63737;
}
.custom-badge.yellow {
    background: #FEEDAF;
    color: #8A5340;
}
.custom-badge.blue {
    background: #B3E5FC;
    color: #23547B;
}
.custom-badge.purple {
    background: #ECCFFF;
    color: #694382;
}
.custom-badge.orange {
    background: #FFD8B2;
    color: #805B36;
}

.google-login-wrapper {
    display: flex;
    justify-content: center;
}
.login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: .75rem 0;
    color: var(--text-color-secondary);
}
.login-separator:before,
.login-separator:after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--surface-border);
}
.login-separator span {
    padding: 0 .75rem;
    font-size: .875rem;
}

.workpotTabButtons.ui-selectonebutton {
    display: inline-flex;
    align-items: center;

    max-width: 100%;
    padding: .35rem;

    border: 1px solid var(--workpot-tabs-border);
    border-radius: 999px;

    background: var(--workpot-tabs-background);
    box-shadow: var(--workpot-tabs-shadow);

    overflow-x: auto;
    scrollbar-width: none;
}
.workpotTabButtons.ui-selectonebutton::-webkit-scrollbar {
    display: none;
}
.workpotTabButtons.ui-selectonebutton .ui-button {
    flex: 0 0 auto;
    min-height: 2.8rem;
    margin: 0;
    padding: .65rem 1rem;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--text-color-secondary);
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 750;
    transition:
            color 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
}
.workpotTabButtons.ui-selectonebutton .ui-button:hover {
    color: var(--text-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 6%,
                    transparent
            ) !important;
}
.workpotTabButtons.ui-selectonebutton .ui-button.ui-state-active {
    color: var(--primary-color-text) !important;

    background: var(--primary-color) !important;

    box-shadow:
            0 8px 18px
            color-mix(
                    in srgb,
                    var(--primary-color) 25%,
                    transparent
            ) !important;

    transform: translateY(-1px);
}
.workpotTabButtons.ui-selectonebutton .ui-button .ui-button-text {
    padding: 0;
    white-space: nowrap;
}
.workpotTabButtons.ui-selectonebutton .ui-button:focus-visible {
    outline: 2px solid
    color-mix(
            in srgb,
            var(--primary-color) 65%,
            transparent
    );
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .workpotTabButtons.ui-selectonebutton {
        display: flex;
        width: 100%;
        border-radius: 1rem;
    }

    .workpotTabButtons.ui-selectonebutton .ui-button {
        min-height: 2.65rem;
        padding-inline: .85rem;
    }
}

.statistic-item {
    .ui-overlay-badge {
        width: 100%;
    }
}
.company-grid{
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    align-items: center;
    justify-content: center;
}
.yellow-tag {
    padding: 14px 24px;
    background: linear-gradient(112.58deg, #FFD029 22.19%, #F1AF60 100%);
    box-shadow: 0px 10px 40px rgba(41, 50, 65, 0.06);
    border-radius: 12px;
    /*transform: rotate(-7.18deg);*/
    /*position: absolute;*/
    /*top: -32px;*/
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
}
.menu-wrapper .sidebar-logo {
    padding-left: 20px!important;
    padding-right: 18px!important;
}
.sidebar-logo img{
    width: 24px!important;
    height: auto!important;
}
.landing-button{
    background: linear-gradient(108.43deg, var(--primary-color) 12.5%, color-mix(in srgb, var(--primary-color) 12%, white) 96.32%)!important;
}

.home-color-card {
    --card-accent: var(--primary-color);
    position: relative;
    overflow: hidden;
    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--card-accent) var(--home-card-accent-start),
                            var(--surface-card)
                    ),
                    color-mix(
                            in srgb,
                            var(--card-accent) var(--home-card-accent-end),
                            var(--surface-card)
                    )
            );
    border: 1px solid
    color-mix(
            in srgb,
            var(--card-accent) var(--home-card-border-strength),
            var(--surface-border)
    );
    border-radius: var(--home-card-radius);
    box-shadow:
            0 2px 4px color-mix(
                    in srgb,
                    var(--card-accent) 5%,
                    transparent
            ),
            0 12px 30px color-mix(
                    in srgb,
                    var(--card-accent) var(--home-card-shadow-strength),
                    transparent
            );
    color: var(--text-color);
    transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            border-color 180ms ease;
}

.home-color-card:hover {
    transform: translateY(-2px);
    border-color:
            color-mix(
                    in srgb,
                    var(--card-accent) var(--home-card-border-hover-strength),
                    var(--surface-border)
            );
    box-shadow:
            0 4px 8px color-mix(
                    in srgb,
                    var(--card-accent) 7%,
                    transparent
            ),
            0 18px 38px color-mix(
                    in srgb,
                    var(--card-accent) var(--home-card-shadow-hover-strength),
                    transparent
            );
}

/* Subtle decorative glow */
.home-color-card::before {
    content: "";
    position: absolute;
    width: 9rem;
    height: 9rem;
    top: -4.5rem;
    right: -3.5rem;
    border-radius: 50%;
    background:
            color-mix(
                    in srgb,
                    var(--card-accent) var(--home-card-glow-strength),
                    transparent
            );
    filter: blur(6px);
    pointer-events: none;
}

/* Small accent line */
.home-color-card::after {
    content: "";
    position: absolute;
    left: 2.25rem;
    right: 2.25rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 3px 3px 0 0;
    background:
            linear-gradient(
                    90deg,
                    var(--card-accent),
                    color-mix(
                            in srgb,
                            var(--card-accent) 10%,
                            transparent
                    )
            );
}

/* Card content stays above decorative layers */
.home-color-card > * {
    position: relative;
    z-index: 1;
}

/* Icon container */
.home-color-card .card-icon,
.home-color-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    color:
            color-mix(
                    in srgb,
                    var(--card-accent) 82%,
                    var(--text-color)
            );
    background:
            color-mix(
                    in srgb,
                    var(--card-accent) var(--home-card-icon-background-strength),
                    var(--surface-card)
            );
    border: 1px solid
    color-mix(
            in srgb,
            var(--card-accent) 28%,
            transparent
    );
}

/* Main number/value */
.home-color-card h1,
.home-color-card .card-value {
    color: var(--text-color);
}

/* Supporting label */
.home-color-card h6,
.home-color-card .card-label {
    color: var(--text-color-secondary);
}

/* Semantic card colors */
.card-blue {
    --card-accent: var(--home-card-blue);
}

.card-teal {
    --card-accent: var(--home-card-teal);
}

.card-cyan {
    --card-accent: var(--home-card-cyan);
}

.card-orange {
    --card-accent: var(--home-card-orange);
}

.card-grey {
    --card-accent: var(--home-card-grey);
}

.app-card {
    background: var(--app-card-background);
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
    transition:
            border-color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
}

.app-card-interactive {
    cursor: pointer;
}
.app-card-interactive:hover {
    transform: translateY(-2px);
    border-color: var(--app-card-border-hover);
    box-shadow: var(--app-card-shadow-hover);
}

.app-card-accent {
    position: relative;
    overflow: hidden;
}
.app-card-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: linear-gradient(
            90deg,
            transparent,
            color-mix(
                    in srgb,
                    var(--primary-color) 65%,
                    transparent
            ),
            transparent
    );
}

.app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin: -0.15rem 0 1.25rem;
    padding-bottom: 0.9rem;

    border-bottom: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 88%,
            transparent
    );
}
.app-card-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 650;
}
.app-card-subtitle {
    margin-top: 0.25rem;
    color: var(--text-color-secondary);
    font-size: 0.875rem;
}

.layout-main-container,
.layout-main {
    background: var(--app-page-background);
}

.inner-card {
    margin-bottom: 1rem!important;
    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 94%,
                    var(--surface-ground)
            );
    border: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 88%,
            transparent
    );
    border-radius: calc(var(--app-card-radius) * .72);
    box-shadow:
            inset 0 1px 0
            color-mix(
                    in srgb,
                    white 15%,
                    transparent
            );
    transition:
            border-color 180ms ease,
            background-color 180ms ease;
}

.inner-card-interactive {
    cursor: pointer;
}
.inner-card-interactive:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 28%,
                    var(--inner-card-border)
            );
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    var(--inner-card-background)
            );
}

.featured-card {
    position: relative;
    background: var(--featured-card-background);
    border: 1px solid var(--featured-card-border);
    box-shadow: var(--featured-card-shadow);
    color: var(--text-color);
}
.featured-card .card-icon,
.featured-card > i {
    color: var(--primary-color);
}

.options-card {
    background: var(--options-card-background);
    border: 1px solid var(--options-card-border);
    border-radius: calc(var(--app-card-radius) * .7);
    box-shadow: var(--options-card-shadow);

    padding: .875rem 1rem;
}

.ui-sortable-column{
    background-color: inherit!important;
}
.ui-datatable thead th{
    background-color: inherit!important;
}
body .ui-datatable .ui-datatable-data > tr {
    background-color: inherit;
}
.ui-datatable .ui-datatable-data > tr{
    background-color: inherit;
}
.ui-datatable .ui-paginator{
    background-color: inherit!important;
}
.ui-datatable .ui-datatable-header{
    background-color: inherit!important;
}

.loading-dialog .ui-dialog-content {
    padding: 2.5rem;
    background: transparent;
    box-shadow: none;
}
.loading-dialog .ui-dialog {
    border: none;
    background: transparent;
}

.filter-container .ui-inputtext {
    width: 400px;
}

.ui-selection-column {
    width: 2rem;
}

@media (max-width: 640px) {
    .filter-container {
        width: 100%;
        margin-top: 0.5rem;
    }

    .filter-container .ui-inputtext {
        width: 100%;
    }

    .ui-selection-column {
        width: auto;
        text-align: center;
    }
    .ui-selection-column .ui-column-title {
        display: none !important;
    }
}

.workpot-notification-trigger {
    position: relative;
    align-items: center;
    justify-content: center;
}
.workpot-notification-trigger .topbar-icon {
    font-size: 1.35rem;
}
.workpot-notification-badge {
    position: absolute;
    top: -.2rem;
    right: -.25rem;
}
.workpot-notification-dropdown {
    width: min(25rem, calc(100vw - 2rem)) !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--notification-panel-border) !important;
    border-radius: 1.2rem !important;
    background: var(--notification-panel-background) !important;
    box-shadow: var(--notification-panel-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.workpot-notification-panel {
    width: 100%;
}
.workpot-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--notification-panel-border);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--notification-panel-background)
            );
}
.workpot-notification-header strong,
.workpot-notification-header small {
    display: block;
}
.workpot-notification-header strong {
    color: var(--text-color);
    font-size: .95rem;
}
.workpot-notification-header small {
    margin-top: .2rem;
    color: var(--text-color-secondary);
    font-size: .7rem;
}
.workpot-notification-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.workpot-notification-list {
    display: grid;
    gap: .5rem;
    max-height: 24rem;
    padding: .65rem;
    overflow-y: auto;
}
.workpot-notification-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    min-height: 4.5rem;
    padding: .75rem .8rem;
    border: 1px solid transparent;
    border-radius: .95rem;
    color: var(--text-color);
    text-decoration: none!important;
    transition:
            transform 180ms ease,
            border-color 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease;
}
.workpot-notification-item:hover {
    transform: translateY(-1px);
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 26%,
                    var(--surface-border)
            );
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 7%,
                    var(--surface-card)
            );
    box-shadow:
            0 8px 22px
            color-mix(
                    in srgb,
                    var(--primary-color) 8%,
                    transparent
            );
}

.workpot-notification-item.is-unread {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 21%,
                    var(--surface-border)
            );

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.workpot-notification-item.is-read {
    opacity: .74;
}
.workpot-notification-item.is-read:hover {
    opacity: 1;
}
.workpot-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 18%,
            var(--surface-border)
    );
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.is-unread .workpot-notification-icon {
    color: var(--primary-color-text);
    background: var(--primary-color);

    box-shadow:
            0 8px 18px
            color-mix(
                    in srgb,
                    var(--primary-color) 22%,
                    transparent
            );
}
.workpot-notification-content {
    min-width: 0;
}
.workpot-notification-content strong,
.workpot-notification-content small {
    display: block;
}
.workpot-notification-content strong {
    overflow: hidden;

    color: var(--text-color);
    font-size: .79rem;
    font-weight: 720;
    line-height: 1.4;

    text-overflow: ellipsis;
}
.workpot-notification-content small {
    margin-top: .2rem;

    color: var(--text-color-secondary);
    font-size: .65rem;
}
.workpot-notification-state {
    width: .55rem;
    height: .55rem;

    border-radius: 50%;

    background: var(--primary-color);

    box-shadow:
            0 0 0 .3rem
            color-mix(
                    in srgb,
                    var(--primary-color) 12%,
                    transparent
            );
}
.workpot-notification-arrow {
    color: var(--text-color-secondary);
    font-size: .75rem;

    transition: transform 180ms ease;
}
.workpot-notification-item:hover .workpot-notification-arrow {
    color: var(--primary-color);
    transform: translateX(.15rem);
}
.workpot-notification-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 12rem;
    padding: 1.5rem;
    text-align: center;
}
.workpot-notification-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .8rem;

    border-radius: 1.1rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );

    font-size: 1.35rem;
}
.workpot-notification-empty strong,
.workpot-notification-empty small {
    display: block;
}
.workpot-notification-empty strong {
    color: var(--text-color);
    font-size: .85rem;
}
.workpot-notification-empty small {
    margin-top: .3rem;
    color: var(--text-color-secondary);
    font-size: .7rem;
}

/*=========================================================*/
/*  WORKPOT GROWL / TOAST  */
/*  Full PrimeFaces visual override */
/*========================================================= */
body .ui-growl {
    width: min(25rem, calc(100vw - 2rem));
}
body .ui-growl .ui-growl-item-container {
    --growl-accent: var(--primary-color);
    --growl-icon-content: "i";
    position: relative !important;
    overflow: hidden !important;
    margin: 0 0 .75rem !important;
    border: 1px solid var(--growl-border) !important;
    border-radius: 1rem !important;
    color: var(--text-color) !important;
    background: var(--growl-background) !important;
    box-shadow: var(--growl-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body .ui-growl .ui-growl-item-container.ui-state-highlight {
    color: var(--text-color) !important;
    background: var(--growl-background) !important;
}
body .ui-growl .ui-growl-item-container::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: .7rem;
    bottom: .7rem;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--growl-accent);
}
body .ui-growl .ui-growl-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    min-height: 4.6rem;
    padding: .85rem 1rem !important;
    color: var(--text-color) !important;
    background: transparent !important;
}
body .ui-growl .ui-growl-image,
body .ui-growl .ui-growl-severity,
body .ui-growl .ui-growl-icon-close,
body .ui-growl .ui-growl-item > div[style*="clear"] {
    display: none !important;
}
body .ui-growl .ui-growl-item::before {
    content: var(--growl-icon-content);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--growl-accent) 22%,
            var(--surface-border)
    );
    border-radius: .85rem;
    color: var(--growl-accent);
    background:
            color-mix(
                    in srgb,
                    var(--growl-accent) 10%,
                    var(--surface-card)
            );
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
}
body .ui-growl .ui-growl-message {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-color) !important;
}
body .ui-growl .ui-growl-title {
    display: block;
    margin: 0 !important;
    color: var(--text-color) !important;
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.35;
}
body .ui-growl .ui-growl-message p {
    margin: .2rem 0 0 !important;
    color: var(--text-color-secondary) !important;
    font-size: .7rem;
    line-height: 1.45;
}
body .ui-growl .ui-growl-message p:empty {
    display: none;
}
body .ui-growl .ui-growl-item-container.ui-growl-info {
    --growl-accent: var(--primary-color);
    --growl-icon-content: "i";
}
body .ui-growl .ui-growl-item-container.ui-growl-success {
    --growl-accent: var(--green-500, #22c55e);
    --growl-icon-content: "✓";
}
body .ui-growl .ui-growl-item-container.ui-growl-warn {
    --growl-accent: var(--orange-500, #f59e0b);
    --growl-icon-content: "!";
}
body .ui-growl .ui-growl-item-container.ui-growl-error,
body .ui-growl .ui-growl-item-container.ui-growl-fatal {
    --growl-accent: var(--red-500, #ef4444);
    --growl-icon-content: "×";
}
body .ui-growl
.ui-growl-item-container.ui-growl-info
.ui-growl-item::before {
    font-family: Georgia, serif;
    font-style: italic;
}
body .ui-growl
.ui-growl-item-container.ui-growl-error
.ui-growl-item::before,
body .ui-growl
.ui-growl-item-container.ui-growl-fatal
.ui-growl-item::before {
    font-size: 1.35rem;
}
@media (max-width: 480px) {
    body .ui-growl {
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
    }
    body .ui-growl .ui-growl-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: .7rem;
        padding: .75rem !important;
    }
    body .ui-growl .ui-growl-item::before {
        width: 2.5rem;
        height: 2.5rem;
    }
}
.ui-growl-item-container{
    cursor:pointer;
}
body .ui-growl .ui-growl-item-container{
    cursor:pointer;
    transition:
            transform .15s ease,
            box-shadow .15s ease,
            filter .15s ease;
}
body .ui-growl .ui-growl-item-container:hover{
    transform:translateY(-1px);
    filter:brightness(1.015);
    box-shadow:
            0 18px 45px rgba(0,0,0,.12);
}
#adminStatusDialog{
    background: transparent;
    box-shadow: none;
    border: none!important;
}
#adminStatusDialog_content{
    background: transparent;
    border: none;
    padding: 0;
}
.ui-link{
    text-decoration: none!important;
}
.ui-commandlink{
    text-decoration: none!important;
}
/*=========================================================*/
/*  WORKPOT BUTTON SYSTEM  */
/*========================================================= */
.wp-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /*gap: .55rem;*/
    border-radius: .9rem !important;
    line-height: 1.2;
    text-decoration: none!important;
    transition:
            transform 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease,
            filter 180ms ease !important;
}
.wp-button-primary {
    border: 0 !important;
    color: var(--primary-color-text, #fff) !important;
    background:
            linear-gradient(
                    135deg,
                    var(--primary-300, var(--primary-color)),
                    var(--primary-color)
            ) !important;
    box-shadow:
            0 12px 28px
            color-mix(
                    in srgb,
                    var(--primary-color) 28%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
.wp-button-primary:hover {
    color: var(--primary-color-text, #fff) !important;
    transform: translateY(-2px);
    filter: brightness(1.05);
    background:
            linear-gradient(
                    135deg,
                    var(--primary-color),
                    var(--primary-700, var(--primary-color))
            ) !important;
    box-shadow:
            0 17px 34px
            color-mix(
                    in srgb,
                    var(--primary-color) 34%,
                    transparent
            ),
            inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.wp-button-primary:active {
    transform: translateY(0);
    filter: brightness(.98);
}
.wp-button-secondary {
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 28%,
            var(--surface-border)
    ) !important;
    color: var(--primary-color) !important;
    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            ) !important;

    box-shadow:
            0 4px 12px
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    transparent
            ) !important;
}
.wp-button-secondary:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 48%,
                    var(--surface-border)
            ) !important;

    color: var(--primary-color) !important;
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 7%,
                    var(--surface-card)
            ) !important;

    box-shadow:
            0 7px 18px
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    transparent
            ) !important;
}
.wp-button-secondary:active {
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 11%,
                    var(--surface-card)
            ) !important;
}
.wp-button-static {
    transform: none!important;
}
.wp-button-fat {
    width: 100%!important;
    min-height: 3rem!important;
}
.wp-button-compact {
    font-size: .78rem !important;
}
.wp-button-glass {
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #f4fbff !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}
.wp-button-glass:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .24) !important;
}
body .ui-button.wp-button-danger {
    border: 1px solid
    color-mix(
            in srgb,
            var(--red-500, #ef4444) 32%,
            var(--surface-border)
    ) !important;
    color: var(--red-500, #ef4444) !important;
    background:
            color-mix(
                    in srgb,
                    var(--red-500, #ef4444) 5%,
                    var(--surface-card)
            ) !important;
    box-shadow: none !important;
}
body .ui-button.wp-button-danger:hover {
    border-color: var(--red-500, #ef4444) !important;
    background:
            color-mix(
                    in srgb,
                    var(--red-500, #ef4444) 10%,
                    var(--surface-card)
            ) !important;
}

/* ========================================================= */
/*   OPTIONS CARD */
/*   ======================================================= */

.options-card {
    padding: 1rem 1.1rem;
}
.options-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid
    color-mix(
            in srgb,
            var(--options-card-border) 70%,
            transparent
    );
}
.options-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.options-card-title {
    margin: .25rem 0 0;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 700;
}
.options-card-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(14rem, 1fr));
    align-items: start;
    gap: 1rem 1.25rem;
}
.options-card-field {
    min-width: 0;
}
.options-card-field--compact {
    max-width: 14rem;
}
.options-card-label {
    display: block;
    margin-bottom: .45rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: 700;
}
.options-card-control {
    width: 100%;
}
.options-card-control.ui-selectcheckboxmenu {
    max-width: none !important;
    width: 100%;
}
@media (max-width: 720px) {
    .options-card-header {
        align-items: flex-start;
    }
    .options-card-grid {
        grid-template-columns: 1fr;
    }
    .options-card-field--compact {
        max-width: none;
    }
}

/* =========================================================
   WORKPOT BOOLEAN TOGGLE
   ========================================================= */
body .ui-button.workpot-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 8rem;
    padding: .62rem 1rem !important;
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 28%,
            var(--surface-border)
    ) !important;
    border-radius: .8rem !important;
    color: var(--primary-color) !important;
    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            ) !important;
    box-shadow:
            0 4px 12px
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    transparent
            ) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    transition:
            background 180ms ease,
            border-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease !important;
}
body .ui-button.workpot-toggle-button:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 48%,
                    var(--surface-border)
            ) !important;

    color: var(--primary-color) !important;
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 7%,
                    var(--surface-card)
            ) !important;
}
body .ui-button.workpot-toggle-button.ui-state-active {
    color: var(--primary-color-text, #fff) !important;
    background:
            linear-gradient(
                    135deg,
                    var(--primary-300, var(--primary-color)),
                    var(--primary-color)
            ) !important;
    box-shadow:
            0 10px 24px
            color-mix(
                    in srgb,
                    var(--primary-color) 22%,
                    transparent
            ),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
}
body .ui-button.workpot-toggle-button.ui-state-active:hover {
    color: var(--primary-color-text, #fff) !important;
    background:
            linear-gradient(
                    135deg,
                    var(--primary-color),
                    var(--primary-700, var(--primary-color))
            ) !important;
    filter: brightness(.96);
}
body .ui-button.workpot-toggle-button .ui-button-text {
    padding: 0 !important;
}
body .ui-button.workpot-toggle-button .ui-button-icon-left,
body .ui-button.workpot-toggle-button .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
}

/* ========================================================= */
/*   MESSAGE LIST */
/* ========================================================= */
.message-list-card {
    padding: 1.1rem;
}
.message-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--surface-border);
}
.message-list-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.message-list-title {
    margin: .25rem 0 0;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 700;
}
.message-list-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding-inline: .55rem;
    border-radius: .75rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
    font-size: .75rem;
    font-weight: 800;
}
.workpot-message-list {
    display: grid;
    gap: .75rem;
}
.workpot-message-item {
    --message-accent: var(--primary-color);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid
    color-mix(
            in srgb,
            var(--message-accent) 18%,
            var(--surface-border)
    );
    border-radius: 1.1rem;
    background:
            color-mix(
                    in srgb,
                    var(--message-accent) 4%,
                    var(--surface-card)
            );
    box-shadow:
            0 6px 18px
            color-mix(
                    in srgb,
                    var(--message-accent) 5%,
                    transparent
            );
    transition:
            border-color 180ms ease,
            box-shadow 180ms ease,
            background-color 180ms ease;
}
.workpot-message-item:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--message-accent) 32%,
                    var(--surface-border)
            );
    box-shadow:
            0 10px 26px
            color-mix(
                    in srgb,
                    var(--message-accent) 8%,
                    transparent
            );
}
.workpot-message-item::before {
    content: "";
    position: absolute;
    top: .85rem;
    bottom: .85rem;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--message-accent);
}
.workpot-message-item.is-information {
    --message-accent: var(--primary-color);
}
.workpot-message-item.is-pending-sign {
    --message-accent: var(--orange-500, #f59e0b);
}
.workpot-message-item.is-signed {
    --message-accent: var(--green-500, #22c55e);
}
.workpot-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--message-accent) 24%,
            var(--surface-border)
    );
    border-radius: .9rem;
    color: var(--message-accent);
    background:
            color-mix(
                    in srgb,
                    var(--message-accent) 10%,
                    var(--surface-card)
            );
}
.workpot-message-main {
    min-width: 0;
}
.workpot-message-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.workpot-message-heading {
    min-width: 0;
}
.workpot-message-heading h6 {
    margin: 0;
    color: var(--text-color);
    font-size: .95rem;
    font-weight: 750;
    line-height: 1.35;
}
.workpot-message-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
    color: var(--text-color-secondary);
    font-size: .68rem;
}
.workpot-message-route i {
    color: var(--primary-color);
    font-size: .62rem;
}
.workpot-message-body {
    margin-top: .85rem;
    padding: .85rem .95rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 80%,
            transparent
    );
    border-radius: .85rem;
    color: var(--text-color);
    background:
            color-mix(
                    in srgb,
                    var(--surface-ground) 68%,
                    var(--surface-card)
            );
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-line;
}
.workpot-message-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .85rem;
}
.workpot-message-date {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-color-secondary);
    font-size: .67rem;
}
.workpot-message-date i {
    color: var(--message-accent);
}
.workpot-message-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}
.message-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .6rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 750;
}
.message-status-badge.is-info {
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.message-status-badge.is-warning {
    color: var(--orange-600, #d97706);
    background:
            color-mix(
                    in srgb,
                    var(--orange-500, #f59e0b) 11%,
                    var(--surface-card)
            );
}
.message-status-badge.is-success {
    color: var(--green-600, #16a34a);
    background:
            color-mix(
                    in srgb,
                    var(--green-500, #22c55e) 11%,
                    var(--surface-card)
            );
}
.message-signatures-panel {
    width: min(30rem, calc(100vw - 2rem));
}
.message-signatures-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color);
    font-size: .8rem;
    font-weight: 750;
}
.message-signatures-header i {
    color: var(--primary-color);
}
.message-signatures-table .ui-datatable-tablewrapper {
    border-radius: .85rem;
}
.message-signature-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem 0;
}
.message-signature-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .75rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.message-signature-row strong,
.message-signature-row small {
    display: block;
}
.message-signature-row strong {
    color: var(--text-color);
    font-size: .75rem;
}
.message-signature-row small {
    margin-top: .15rem;
    color: var(--text-color-secondary);
    font-size: .64rem;
}
.workpot-message-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 13rem;
    text-align: center;
}
.workpot-message-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: .8rem;
    border-radius: 1.15rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
    font-size: 1.4rem;
}
.workpot-message-empty strong {
    color: var(--text-color);
}
@media (max-width: 680px) {
    .workpot-message-item {
        grid-template-columns: 1fr;
    }
    .workpot-message-icon {
        width: 2.55rem;
        height: 2.55rem;
    }
    .workpot-message-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .workpot-message-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .workpot-message-actions {
        width: 100%;
    }
    .workpot-message-actions .ui-button {
        flex: 1;
    }
}
/* ========================================================= */
/*   MESSAGE COMPOSER */
/* ========================================================= */
.message-composer-card {
    padding: 1.1rem;
}
.message-composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--surface-border);
}
.message-composer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.message-composer-title {
    margin: .25rem 0 0;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 700;
}
.message-composer-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .85rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.message-composer-body {
    display: grid;
    gap: 1rem;
}
.message-composer-recipient {
    padding: .85rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 18%,
            var(--surface-border)
    );
    border-radius: 1rem;
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}
.message-composer-recipient__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}
.message-composer-recipient__label > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-color-secondary);
    font-size: .7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.message-composer-recipient__label i {
    color: var(--primary-color);
}
.message-composer-recipient__value {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--surface-border);
    border-radius: .85rem;
    background: var(--surface-card);
}
.message-composer-recipient__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.message-composer-recipient__value small,
.message-composer-recipient__value strong {
    display: block;
}
.message-composer-recipient__value small {
    color: var(--text-color-secondary);
    font-size: .62rem;
}
.message-composer-recipient__value strong {
    margin-top: .15rem;
    color: var(--text-color);
    font-size: .8rem;
}
.message-composer-fields {
    display: grid;
    gap: .9rem;
}
.message-composer-field label {
    display: block;
    margin-bottom: .4rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: 700;
}
.message-composer-input-wrapper {
    display: block;
    width: 100%;
}
.message-composer-input-wrapper .ui-inputfield,
.message-composer-input {
    width: 100%;
    border-radius: .85rem;
}
.message-composer-textarea {
    width: 100%;
    min-height: 11rem;
    padding: .9rem !important;
    border-radius: .9rem !important;
    line-height: 1.6;
    resize: vertical;
}
.message-composer-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem;
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background:
            color-mix(
                    in srgb,
                    var(--surface-ground) 70%,
                    var(--surface-card)
            );
}
.message-composer-option__copy {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.message-composer-option__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.message-composer-option strong,
.message-composer-option small {
    display: block;
}
.message-composer-option strong {
    color: var(--text-color);
    font-size: .78rem;
}
.message-composer-option small {
    max-width: 23rem;
    margin-top: .15rem;
    color: var(--text-color-secondary);
    font-size: .65rem;
    line-height: 1.4;
}
.message-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .2rem;
}
.message-composer-limit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-color-secondary);
    font-size: .65rem;
}
.message-composer-limit i {
    color: var(--primary-color);
}
/* ========================================================= */
/* MESSAGE RECIPIENT DIALOG */
/* ========================================================= */
.message-recipient-dialog {
    width: min(58rem, calc(100vw - 2rem)) !important;
}
.message-recipient-dialog .ui-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 1.25rem;
    background: var(--surface-card);
}
.message-recipient-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--surface-border);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}
.message-recipient-dialog__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.message-recipient-dialog__header h4 {
    margin: .25rem 0 0;
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 750;
}
.message-recipient-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--surface-border);
    border-radius: .8rem;
    color: var(--text-color-secondary);
    background: var(--surface-card);
    cursor: pointer;
    transition:
            color 180ms ease,
            border-color 180ms ease,
            background 180ms ease;
}
.message-recipient-dialog__close:hover {
    color: var(--text-color);
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 30%,
                    var(--surface-border)
            );
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 6%,
                    var(--surface-card)
            );
}
.message-recipient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 28rem;
}
.message-recipient-section {
    min-width: 0;
    padding: 1rem;
}
.message-recipient-section + .message-recipient-section {
    border-left: 1px solid var(--surface-border);
}
.message-recipient-section__header {
    padding: .45rem .4rem .8rem;
}
.message-recipient-section__header span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: 750;
}
.message-recipient-section__header i {
    color: var(--primary-color);
}
.message-recipient-list {
    display: grid;
    gap: .45rem;
    max-height: 25rem;
    overflow-y: auto;
    padding-top: .25rem;
}
.message-recipient-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    color: var(--text-color);
    text-decoration: none;
    transition:
            border-color 180ms ease,
            background 180ms ease,
            transform 180ms ease;
}
.message-recipient-item:hover {
    transform: translateY(-1px);
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 24%,
                    var(--surface-border)
            );
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 6%,
                    var(--surface-card)
            );
}
.message-recipient-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.message-recipient-item strong,
.message-recipient-item small {
    display: block;
}
.message-recipient-item strong {
    color: var(--text-color);
    font-size: .78rem;
}
.message-recipient-item small {
    margin-top: .14rem;
    color: var(--text-color-secondary);
    font-size: .63rem;
}
.message-recipient-item > i {
    color: var(--text-color-secondary);
    font-size: .72rem;
}
@media (max-width: 760px) {
    .message-composer-option {
        align-items: flex-start;
        flex-direction: column;
    }
    .message-composer-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .message-composer-footer .ui-button {
        width: 100%;
    }
    .message-recipient-grid {
        grid-template-columns: 1fr;
    }
    .message-recipient-section + .message-recipient-section {
        border-top: 1px solid var(--surface-border);
        border-left: 0;
    }
}
.quick-message-dialog .message-composer-card {
    margin: 0;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* ========================================================= */
/* QUICK ACTION — NEW WORKSHIFT */
/* ========================================================= */
.quick-workshift-card {
    padding: 1.1rem;
}
.quick-workshift-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--surface-border);
}
.quick-workshift-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.quick-workshift-title {
    margin: .25rem 0 0;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 700;
}
.quick-workshift-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .85rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.quick-workshift-body {
    display: grid;
    gap: 1rem;
}
.quick-workshift-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.quick-workshift-field {
    min-width: 0;
}
.quick-workshift-label {
    display: block;
    margin-bottom: .45rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: 700;
}
.quick-workshift-control-wrapper {
    display: block;
    width: 100%;
}
.quick-workshift-control-wrapper > i {
    z-index: 3;
    color: var(--text-color-secondary);
}
.quick-workshift-control {
    width: 100%;
}
.quick-workshift-control.ui-selectonemenu,
.quick-workshift-control.ui-datepicker {
    width: 100% !important;
}
.quick-workshift-control.ui-selectonemenu .ui-selectonemenu-label {
    padding-left: 2.65rem !important;
}
.quick-workshift-date-input {
    width: 100% !important;
    padding-left: 2.65rem !important;
}
.quick-workshift-control-wrapper:focus-within > i {
    color: var(--primary-color);
}
.quick-workshift-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );
    border-radius: 1rem;
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}
.quick-workshift-summary__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.quick-workshift-summary strong,
.quick-workshift-summary small {
    display: block;
}
.quick-workshift-summary strong {
    color: var(--text-color);
    font-size: .78rem;
}
.quick-workshift-summary small {
    margin-top: .15rem;
    color: var(--text-color-secondary);
    font-size: .65rem;
}
.quick-workshift-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .2rem;
}
.quick-workshift-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-color-secondary);
    font-size: .66rem;
}
.quick-workshift-hint i {
    color: var(--primary-color);
}
@media (max-width: 900px) {
    .quick-workshift-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .quick-workshift-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .quick-workshift-footer .ui-button {
        width: 100%;
    }
}
/* ========================================================= */
/* QUICK ACTION — NEW EMPLOYEE WIZARD */
/* ========================================================= */

.employee-wizard-card {
    padding: 1.1rem;
}

.employee-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
    padding-bottom: .9rem;

    border-bottom: 1px solid var(--surface-border);
}

.employee-wizard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    color: var(--primary-color);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.employee-wizard-title {
    margin: .25rem 0 0;

    color: var(--text-color);

    font-size: 1.05rem;
    font-weight: 700;
}

.employee-wizard-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.65rem;
    height: 2.65rem;

    border-radius: .85rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}
.employee-wizard.ui-wizard {
    background: transparent;
}

.employee-wizard .ui-wizard-content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.employee-wizard .ui-wizard-step-titles {
    display: none;
}

.employee-wizard-step {
    display: grid;
    gap: 1.25rem;
}
.employee-wizard-progress {
    display: grid;
    grid-template-columns:
        auto minmax(1.5rem, 1fr)
        auto minmax(1.5rem, 1fr)
        auto;
    align-items: center;

    width: min(100%, 20rem);
}

.employee-wizard-progress > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    border: 1px solid var(--surface-border);
    border-radius: 50%;

    color: var(--text-color-secondary);
    background: var(--surface-card);

    font-size: .68rem;
    font-weight: 800;
}

.employee-wizard-progress > i {
    display: block;

    height: 2px;
    margin-inline: .45rem;

    border-radius: 999px;

    background: var(--surface-border);
}

.employee-wizard-progress > span.is-active {
    border-color: var(--primary-color);

    color: var(--primary-color-text, #fff);
    background: var(--primary-color);

    box-shadow:
            0 0 0 .32rem
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    transparent
            );
}

.employee-wizard-progress > span.is-done {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 45%,
                    var(--surface-border)
            );

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}

.employee-wizard-progress > i.is-done {
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 55%,
                    var(--surface-border)
            );
}
.employee-wizard-step-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.employee-wizard-step-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border-radius: .95rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}

.employee-wizard-step-label {
    display: block;

    color: var(--primary-color);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.employee-wizard-step-header h4,
.employee-employment-header h4 {
    margin: .3rem 0 0;

    color: var(--text-color);

    font-size: 1.25rem;
    font-weight: 750;
}

.employee-wizard-step-header p,
.employee-employment-header p {
    max-width: 42rem;
    margin: .5rem 0 0;

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

    font-size: .78rem;
    line-height: 1.55;
}

.employee-wizard-email-box {
    display: grid;
    gap: .9rem;

    padding: 1rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    var(--surface-card)
            );
}

.employee-wizard-info {
    display: flex;
    align-items: flex-start;
    gap: .55rem;

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

    font-size: .67rem;
    line-height: 1.45;
}

.employee-wizard-info i {
    margin-top: .1rem;
    color: var(--primary-color);
}
.employee-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.employee-wizard-field {
    min-width: 0;
}

.employee-wizard-field--wide {
    grid-column: 1 / -1;
}

.employee-wizard-label {
    display: block;

    margin-bottom: .42rem;

    color: var(--text-color);

    font-size: .73rem;
    font-weight: 700;
}

.employee-wizard-input-wrapper {
    display: block;
    width: 100%;
}

.employee-wizard-input-wrapper > i {
    z-index: 3;
    color: var(--text-color-secondary);
}

.employee-wizard-input,
.employee-wizard-field .ui-inputfield,
.employee-wizard-control {
    width: 100%;
}

.employee-wizard-field .ui-inputfield,
.employee-wizard-control.ui-selectonemenu {
    border-radius: .82rem;
}

.employee-wizard-message {
    display: block;
    margin-top: .35rem;
}
.employee-profile-summary {
    display: flex;
    align-items: center;
    gap: .8rem;

    padding: .9rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 17%,
            var(--surface-border)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.employee-profile-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;

    border-radius: .9rem;

    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 11%,
                    var(--surface-card)
            );
}

.employee-profile-summary small,
.employee-profile-summary strong,
.employee-profile-summary > div > span {
    display: block;
}

.employee-profile-summary small,
.employee-profile-summary > div > span {
    color: var(--text-color-secondary);
    font-size: .65rem;
}

.employee-profile-summary strong {
    margin: .1rem 0;

    color: var(--text-color);
    font-size: .86rem;
}
.employee-employment-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.employee-employment-content {
    min-width: 0;
}

.employee-employment-order {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

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

.employee-employment-order i {
    color: var(--primary-color);
    cursor: grab;
}

.employee-employment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.employee-employment-actions-column {
    width: 7rem;
    text-align: right;
}

.employee-employment-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 12rem;
    padding: 1rem;

    text-align: center;
}

.employee-employment-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.7rem;
    height: 3.7rem;
    margin-bottom: .8rem;

    border-radius: 1.1rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );

    font-size: 1.35rem;
}

.employee-employment-empty strong,
.employee-employment-empty small {
    display: block;
}

.employee-employment-empty strong {
    color: var(--text-color);
}

.employee-employment-empty small {
    margin-top: .3rem;
    color: var(--text-color-secondary);
}
.employee-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;

    padding-top: .4rem;
}

.employee-wizard-actions--end {
    justify-content: flex-end;
}

@media (max-width: 800px) {
    .employee-details-grid {
        grid-template-columns: 1fr;
    }

    .employee-wizard-field--wide {
        grid-column: auto;
    }

    .employee-employment-header {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-employment-header .ui-button {
        align-self: flex-start;
    }
}

@media (max-width: 560px) {
    .employee-wizard-card {
        padding: .85rem;
    }

    .employee-wizard-step-header {
        flex-direction: column;
    }

    .employee-wizard-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .employee-wizard-actions .ui-button {
        width: 100%;
    }

    .employee-wizard-progress {
        width: 100%;
    }
}


/* ========================================================= */
/* COMPANY SELECTOR */
/* ========================================================= */

.company-selector-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(15rem, 18rem));

    justify-content: center;
    gap: .85rem;

    width: 100%;
}

.company-selector-link {
    display: block;

    color: inherit !important;
    text-decoration: none !important;

    font-size: inherit !important;
}

.company-selector-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 13rem;
    padding: 1rem;

    overflow: hidden;

    border: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 76%,
            var(--primary-color)
    );

    border-radius: 1.1rem;

    color: var(--text-color);

    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            );

    box-shadow:
            0 8px 22px
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    transparent
            );

    transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease,
            background-color 180ms ease;
}

.company-selector-card:hover {
    transform: translateY(-2px);

    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 34%,
                    var(--surface-border)
            );

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );

    box-shadow:
            0 14px 30px
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    transparent
            );
}
.company-selector-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.company-selector-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.55rem;
    height: 2.55rem;

    border-radius: .85rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.company-selector-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .35rem .55rem;

    border-radius: 999px;

    font-size: .62rem;
    font-weight: 750;
}

.company-selector-status > span {
    width: .46rem;
    height: .46rem;

    border-radius: 50%;
}

.company-selector-status.is-active {
    color: var(--green-600, #16a34a);

    background:
            color-mix(
                    in srgb,
                    var(--green-500, #22c55e) 10%,
                    var(--surface-card)
            );
}

.company-selector-status.is-active > span {
    background: var(--green-500, #22c55e);
}

.company-selector-status.is-inactive {
    color: var(--red-500, #ef4444);

    background:
            color-mix(
                    in srgb,
                    var(--red-500, #ef4444) 9%,
                    var(--surface-card)
            );
}

.company-selector-status.is-inactive > span {
    background: var(--red-500, #ef4444);
}
.company-selector-card__body {
    flex: 1;

    margin-top: 1rem;
}

.company-selector-card__body h3 {
    margin: 0;

    overflow: hidden;

    color: var(--text-color);

    font-size: 1rem;
    font-weight: 750;

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

.company-selector-card__type {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    margin-top: .35rem;

    color: var(--primary-color);

    font-size: .65rem;
    font-weight: 700;
}

.company-selector-card__details {
    display: grid;
    gap: .4rem;

    margin-top: .9rem;
}

.company-selector-card__details > div {
    display: grid;
    gap: .4rem;
}

.company-selector-detail {
    display: flex;
    align-items: center;
    gap: .45rem;

    min-width: 0;

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

    font-size: .67rem;
}

.company-selector-detail i {
    flex: 0 0 auto;

    color: var(--primary-color);

    font-size: .68rem;
}

.company-selector-detail strong {
    overflow: hidden;

    color: var(--text-color);

    font-size: .68rem;
    font-weight: 700;

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

.company-selector-detail small {
    overflow: hidden;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-selector-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;

    margin-top: .9rem;
    padding-top: .75rem;

    border-top: 1px solid var(--surface-border);

    color: var(--primary-color);

    font-size: .68rem;
    font-weight: 750;
}

.company-selector-card__footer i {
    font-size: .7rem;

    transition: transform 180ms ease;
}

.company-selector-card:hover
.company-selector-card__footer i {
    transform: translateX(.2rem);
}
.company-selector-link.ui-state-disabled {
    opacity: 1 !important;
}

.company-selector-card.is-disabled {
    cursor: not-allowed;

    opacity: .55;
    filter: grayscale(.25);
}

.company-selector-card.is-disabled:hover {
    transform: none;

    border-color: var(--surface-border);

    box-shadow:
            0 8px 22px
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    transparent
            );
}

.company-selector-card.is-disabled
.company-selector-card__footer {
    color: var(--text-color-secondary);
}
/* ========================================================= */
/* PREFERENCE DIALOG */
/* ========================================================= */

.preference-dialog {
    width: min(46rem, calc(100vw - 2rem)) !important;
}

.preference-dialog .ui-dialog-content {
    padding: 1rem !important;
}

.preference-dialog-content {
    display: grid;
    gap: .85rem;
}

.preference-form-section {
    padding: .9rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 76%,
            var(--primary-color)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            );
}

.preference-section-heading {
    display: flex;
    align-items: center;
    gap: .7rem;

    margin-bottom: .85rem;
}

.preference-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.45rem;
    height: 2.45rem;

    border-radius: .8rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.preference-section-heading strong,
.preference-section-heading small {
    display: block;
}

.preference-section-heading strong {
    color: var(--text-color);
    font-size: .78rem;
}

.preference-section-heading small {
    margin-top: .12rem;

    color: var(--text-color-secondary);
    font-size: .63rem;
}

.preference-control-field,
.preference-field {
    min-width: 0;
}

.preference-field-label {
    display: block;

    margin-bottom: .4rem;

    color: var(--text-color);

    font-size: .72rem;
    font-weight: 700;
}

.preference-select {
    width: 100% !important;
}

.preference-select.ui-selectonemenu {
    width: 100% !important;
    border-radius: .8rem;
}
.preference-datepicker.ui-calendar {
    display: flex !important;
    align-items: stretch;

    width: 100% !important;
}

.preference-datepicker.ui-calendar .ui-inputfield {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    border-radius: .8rem 0 0 .8rem !important;
}

.preference-datepicker.ui-calendar .ui-datepicker-trigger {
    position: static !important;

    display: inline-flex !important;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;

    width: 2.75rem !important;
    height: auto !important;
    margin: 0 !important;

    border-radius: 0 .8rem .8rem 0 !important;
}

/* Σε περίπτωση που το PF παράγει ui-button-icon-only */
.preference-datepicker.ui-calendar
.ui-datepicker-trigger.ui-button-icon-only {
    padding: 0 !important;
}

.preference-datepicker.ui-calendar
.ui-datepicker-trigger .ui-button-icon-left {
    position: static !important;

    margin: 0 !important;

    transform: none !important;
}
.preference-date-range,
.preference-time-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .75rem;
}

.preference-range-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 2.75rem;

    color: var(--primary-color);
}

.preference-event-params {
    display: grid;
    gap: .85rem;

    margin-top: .9rem;
}

.preference-time-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: .7rem .75rem;

    border: 1px solid var(--surface-border);
    border-radius: .85rem;

    background: var(--surface-card);
}

.preference-time-option-copy {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.preference-time-option-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.3rem;
    height: 2.3rem;

    border-radius: .75rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.preference-time-option-copy strong,
.preference-time-option-copy small {
    display: block;
}

.preference-time-option-copy strong {
    color: var(--text-color);
    font-size: .75rem;
}

.preference-time-option-copy small {
    margin-top: .12rem;

    color: var(--text-color-secondary);
    font-size: .61rem;
}

.preference-time-panel:empty {
    display: none;
}

.preference-timepicker {
    width: 100% !important;
}

.preference-timepicker.ui-calendar,
.preference-timepicker.ui-calendar .ui-inputfield {
    width: 100% !important;
}

.preference-repeat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.preference-approval-message {
    width: 100%;
    margin: 0 !important;

    border-radius: .9rem !important;
}

.preference-notes {
    width: 100%;
    min-height: 7rem;

    padding: .8rem !important;

    border-radius: .85rem !important;

    line-height: 1.5;

    resize: vertical;
}
.preference-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;

    padding-top: .85rem;

    border-top: 1px solid var(--surface-border);
}

.preference-dialog-actions-right {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.preference-delete-dialog {
    width: min(31rem, calc(100vw - 2rem)) !important;
}

.preference-delete-content {
    display: grid;
    gap: 1rem;
}

.preference-delete-heading {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.preference-delete-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;

    border-radius: .9rem;

    color: var(--red-500, #ef4444);

    background:
            color-mix(
                    in srgb,
                    var(--red-500, #ef4444) 10%,
                    var(--surface-card)
            );
}

.preference-delete-heading strong,
.preference-delete-heading small {
    display: block;
}

.preference-delete-heading strong {
    color: var(--text-color);

    font-size: .85rem;
    line-height: 1.45;
}

.preference-delete-heading small {
    margin-top: .3rem;

    color: var(--text-color-secondary);
    font-size: .66rem;
}

.preference-delete-options {
    display: grid;
    gap: .55rem;

    padding: .8rem;

    border: 1px solid var(--surface-border);
    border-radius: .9rem;

    background:
            color-mix(
                    in srgb,
                    var(--surface-ground) 65%,
                    var(--surface-card)
            );
}

.preference-delete-options label {
    color: var(--text-color);
    font-size: .74rem;
}

.preference-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;

    padding-top: .85rem;

    border-top: 1px solid var(--surface-border);
}
@media (max-width: 620px) {
    .preference-dialog .ui-dialog-content {
        padding: .75rem !important;
    }

    .preference-date-range,
    .preference-time-range,
    .preference-repeat-grid {
        grid-template-columns: 1fr;
    }

    .preference-range-divider {
        height: auto;
        padding-block: .15rem;

        transform: rotate(90deg);
    }

    .preference-dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .preference-dialog-actions-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preference-dialog-actions > .ui-button {
        width: 100%;
    }

    .preference-delete-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ========================================================= */
/* USER SETTINGS */
/* ========================================================= */

.user-settings-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
}

.user-settings-card {
    padding: 1.1rem;
}

.user-settings-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
    padding-bottom: .9rem;

    border-bottom: 1px solid var(--surface-border);
}

.user-settings-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    color: var(--primary-color);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.user-settings-card__header h5 {
    margin: .25rem 0 0;

    color: var(--text-color);

    font-size: 1.05rem;
    font-weight: 700;
}
.user-profile-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;

    padding: .9rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 17%,
            var(--surface-border)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.user-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.2rem;
    height: 3.2rem;

    border-radius: 1rem;

    color: var(--profile-color, var(--primary-color));

    background:
            color-mix(
                    in srgb,
                    var(--profile-color, var(--primary-color)) 12%,
                    var(--surface-card)
            );

    font-size: 1.2rem;
}

.user-profile-summary strong,
.user-profile-summary > div > span {
    display: block;
}

.user-profile-summary strong {
    color: var(--text-color);
    font-size: .9rem;
}

.user-profile-summary > div > span {
    margin-top: .2rem;

    color: var(--text-color-secondary);
    font-size: .68rem;
}

.user-profile-color {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    border-radius: 999px;
    color: var(--profile-color, var(--primary-color));
    background:
            color-mix(
                    in srgb,
                    var(--profile-color, var(--primary-color)) 10%,
                    var(--surface-card)
            );
    font-size: .64rem;
    font-weight: 700;
}
.user-settings-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;

    margin-top: .85rem;
}

.user-settings-detail {
    display: flex;
    align-items: center;
    gap: .65rem;

    min-width: 0;
    padding: .7rem;

    border: 1px solid var(--surface-border);
    border-radius: .85rem;

    background: var(--surface-card);
}

.user-settings-detail__icon,
.user-setting-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.35rem;
    height: 2.35rem;

    border-radius: .75rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.user-settings-detail small,
.user-settings-detail strong {
    display: block;
}

.user-settings-detail small {
    color: var(--text-color-secondary);
    font-size: .61rem;
}

.user-settings-detail strong {
    overflow: hidden;
    margin-top: .12rem;

    color: var(--text-color);
    font-size: .75rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-settings-list {
    display: grid;
    gap: .55rem;
}

.user-setting-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;

    padding: .75rem;

    border: 1px solid var(--surface-border);
    border-radius: .9rem;

    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 98%,
                    var(--primary-color)
            );
}

.user-setting-row__copy {
    min-width: 0;
}

.user-setting-row__copy strong,
.user-setting-row__copy small {
    display: block;
}

.user-setting-row__copy strong {
    color: var(--text-color);
    font-size: .76rem;
}

.user-setting-row__copy small {
    overflow: hidden;
    margin-top: .14rem;

    color: var(--text-color-secondary);
    font-size: .63rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-setting-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: .38rem .58rem;

    border-radius: 999px;

    font-size: .61rem;
    font-weight: 750;
}

.user-setting-status.is-success {
    color: var(--green-600, #16a34a);

    background:
            color-mix(
                    in srgb,
                    var(--green-500, #22c55e) 10%,
                    var(--surface-card)
            );
}

.user-setting-status.is-warning {
    color: var(--orange-600, #d97706);

    background:
            color-mix(
                    in srgb,
                    var(--orange-500, #f59e0b) 10%,
                    var(--surface-card)
            );
}

.user-setting-status.is-disabled {
    color: var(--text-color-secondary);

    background:
            color-mix(
                    in srgb,
                    var(--text-color-secondary) 8%,
                    var(--surface-card)
            );
}

.user-setting-status.is-primary {
    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}
.user-setting-row--password {
    align-items: start;
}

.user-password-action {
    min-width: 9rem;
}

.user-password-editor {
    grid-column: 1 / -1;

    width: 100%;
    margin-top: .6rem;
    padding: .8rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );

    border-radius: .85rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    var(--surface-card)
            );
}

.user-password-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.user-password-editor__actions {
    display: flex;
    justify-content: flex-end;

    margin-top: .7rem;
}
.user-settings-dialog {
    width: min(36rem, calc(100vw - 2rem)) !important;
}

.user-settings-dialog-content {
    display: grid;
    gap: 1rem;
}

.user-settings-dialog-intro {
    display: flex;
    align-items: center;
    gap: .75rem;

    padding: .8rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );

    border-radius: .9rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.user-settings-dialog-intro > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.6rem;
    height: 2.6rem;

    border-radius: .85rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}

.user-settings-dialog-intro strong,
.user-settings-dialog-intro small {
    display: block;
}

.user-settings-dialog-intro strong {
    color: var(--text-color);
    font-size: .78rem;
}

.user-settings-dialog-intro small {
    margin-top: .15rem;

    color: var(--text-color-secondary);
    font-size: .64rem;
}

.user-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.user-settings-field {
    min-width: 0;
}

.user-settings-field--wide {
    grid-column: 1 / -1;
}

.user-settings-field label {
    display: block;

    margin-bottom: .4rem;

    color: var(--text-color);

    font-size: .72rem;
    font-weight: 700;
}

.user-settings-field .ui-inputfield,
.user-settings-control,
.user-theme-select {
    width: 100%;
}

.user-settings-input-wrapper {
    display: block;
    width: 100%;
}
.user-preferences-editor {
    display: grid;
    gap: .6rem;
}

.user-preference-editor-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;

    padding: .8rem;

    border: 1px solid var(--surface-border);
    border-radius: .9rem;

    background: var(--surface-card);
}

.user-theme-select {
    min-width: 8rem;
}
@media (max-width: 900px) {
    .user-settings-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .user-settings-details,
    .user-settings-form-grid,
    .user-password-fields {
        grid-template-columns: 1fr;
    }

    .user-settings-field--wide {
        grid-column: auto;
    }

    .user-profile-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .user-profile-color {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .user-setting-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .user-setting-status,
    .user-password-action {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .user-preference-editor-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .user-preference-editor-row
    > .ui-toggleswitch,
    .user-preference-editor-row
    > .ui-selectonemenu {
        grid-column: 1 / -1;
        width: 100%;
    }
}
/* ========================================================= */
/* COMPANY SETTINGS PAGE */
/* ========================================================= */

.company-settings-page {
    padding: 1.1rem;
}

.company-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    margin-bottom: 1rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid var(--surface-border);
}

.company-settings-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    color: var(--primary-color);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.company-settings-header h5 {
    margin: .25rem 0 0;

    color: var(--text-color);

    font-size: 1.1rem;
    font-weight: 700;
}

.company-settings-header p {
    margin: .35rem 0 0;

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

    font-size: .7rem;
    line-height: 1.5;
}

.company-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: .9rem;
}
.company-settings-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 1rem;

    overflow: hidden;

    border: 1px solid
    color-mix(
            in srgb,
            var(--surface-border) 76%,
            var(--primary-color)
    );

    border-radius: 1.1rem;

    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 98%,
                    var(--primary-color)
            );

    box-shadow:
            0 7px 20px
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    transparent
            );

    transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
}

.company-settings-card:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 28%,
                    var(--surface-border)
            );

    box-shadow:
            0 11px 27px
            color-mix(
                    in srgb,
                    var(--primary-color) 8%,
                    transparent
            );
}

.company-settings-card.is-selected {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 55%,
                    var(--surface-border)
            );

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.company-settings-card.is-selected::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: var(--primary-color);
}

.company-settings-card.is-inactive {
    opacity: .7;
}

.company-settings-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.company-settings-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .9rem;
    color: var(--company-color, var(--primary-color));
    background:
            color-mix(
                    in srgb,
                    var(--company-color, var(--primary-color)) 11%,
                    var(--surface-card)
            );
    font-size: 1rem;
}
.company-settings-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
}
.company-settings-card__heading h4 {
    margin: 0;

    color: var(--text-color);

    font-size: .95rem;
    font-weight: 750;
}

.company-settings-card__role {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    margin-top: .25rem;

    color: var(--primary-color);

    font-size: .63rem;
    font-weight: 700;
}

.company-setting-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: .37rem .55rem;

    border-radius: 999px;

    font-size: .61rem;
    font-weight: 750;
}

.company-setting-status.is-success {
    color: var(--green-600, #16a34a);

    background:
            color-mix(
                    in srgb,
                    var(--green-500, #22c55e) 10%,
                    var(--surface-card)
            );
}

.company-setting-status.is-disabled {
    color: var(--text-color-secondary);

    background:
            color-mix(
                    in srgb,
                    var(--text-color-secondary) 8%,
                    var(--surface-card)
            );
}

.company-settings-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;

    margin-top: .9rem;
}

.company-settings-detail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;

    min-width: 0;
    padding: .65rem;

    border: 1px solid var(--surface-border);
    border-radius: .82rem;

    background: var(--surface-card);
}

.company-settings-detail > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    border-radius: .65rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 8%,
                    var(--surface-card)
            );
}

.company-settings-detail small,
.company-settings-detail strong {
    display: block;
}

.company-settings-detail small {
    color: var(--text-color-secondary);
    font-size: .58rem;
}

.company-settings-detail strong {
    overflow: hidden;
    margin-top: .1rem;

    color: var(--text-color);
    font-size: .68rem;

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

.company-settings-detail__state {
    width: .48rem;
    height: .48rem;

    border-radius: 50%;
}

.company-settings-detail__state.is-success {
    background: var(--green-500, #22c55e);
}

.company-settings-detail__state.is-disabled {
    background: var(--surface-border);
}
.company-settings-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .85rem;
}
.company-profile-color {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    border-radius: 999px;
    color: var(--company-color, var(--primary-color));
    background:
            color-mix(
                    in srgb,
                    var(--company-color, var(--primary-color)) 10%,
                    var(--surface-card)
            );
    font-size: .64rem;
    font-weight: 700;
}
.company-current-badge {
    color: var(--primary-color);
}
.company-settings-dialog {
    width: min(42rem, calc(100vw - 2rem)) !important;
}

.company-settings-dialog-content {
    display: grid;
    gap: 1rem;
}

.company-dialog-intro {
    display: flex;
    align-items: center;
    gap: .75rem;

    padding: .8rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );

    border-radius: .9rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.company-dialog-intro > span,
.company-option-icon,
.company-option-subheader > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: .8rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.company-dialog-intro strong,
.company-dialog-intro small {
    display: block;
}

.company-dialog-intro strong {
    color: var(--text-color);
    font-size: .8rem;
}

.company-dialog-intro small {
    margin-top: .15rem;

    color: var(--text-color-secondary);
    font-size: .64rem;
}

.company-dialog-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.company-settings-field {
    min-width: 0;
}

.company-settings-field--wide {
    grid-column: 1 / -1;
}

.company-settings-field label {
    display: block;

    margin-bottom: .4rem;

    color: var(--text-color);

    font-size: .72rem;
    font-weight: 700;
}

.company-settings-input-wrapper,
.company-settings-control,
.company-settings-field .ui-inputfield {
    width: 100%;
}
.company-options-list {
    display: grid;
    gap: .55rem;
}

.company-option-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;

    padding: .75rem;

    border: 1px solid var(--surface-border);
    border-radius: .9rem;

    background: var(--surface-card);
}

.company-option-copy strong,
.company-option-copy small {
    display: block;
}

.company-option-copy strong {
    color: var(--text-color);
    font-size: .76rem;
}

.company-option-copy small {
    margin-top: .14rem;

    color: var(--text-color-secondary);
    font-size: .62rem;
    line-height: 1.4;
}

.company-option-dynamic-panel:empty {
    display: none;
}

.company-timer-settings {
    display: grid;
    gap: .8rem;

    padding: .9rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 17%,
            var(--surface-border)
    );

    border-radius: .9rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    var(--surface-card)
            );
}

.company-option-subheader {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.company-option-subheader strong,
.company-option-subheader small {
    display: block;
}

.company-option-subheader strong {
    color: var(--text-color);
    font-size: .76rem;
}

.company-option-subheader small {
    margin-top: .12rem;

    color: var(--text-color-secondary);
    font-size: .62rem;
}

.company-password-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;

    margin-top: .75rem;
}
.new-company-dialog {
    width: min(30rem, calc(100vw - 2rem)) !important;
}

.new-company-content {
    min-height: 17rem;
}

.new-company-intro,
.new-company-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .9rem;

    text-align: center;
}

.new-company-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.3rem;
    height: 4.3rem;
    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 25%,
            var(--surface-border)
    );
    border-radius: 1.3rem;
    color: var(--primary-color);
    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
    font-size: 1.45rem;
}
.new-company-intro h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 750;
}
.new-company-intro > p {
    max-width: 24rem;
    margin: 0;
    color: var(--text-color-secondary);
    font-size: .72rem;
    line-height: 1.55;
}

.new-company-benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem 1rem;

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

    font-size: .65rem;
}

.new-company-benefits span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.new-company-benefits i {
    color: var(--primary-color);
}

.new-company-form .company-dialog-intro,
.new-company-form .company-settings-field {
    width: 100%;
    text-align: left;
}
@media (max-width: 720px) {
    .company-settings-header {
        align-items: stretch;
        flex-direction: column;
    }

    .company-settings-header > .ui-button {
        align-self: flex-start;
    }

    .company-settings-grid,
    .company-settings-details,
    .company-dialog-form,
    .company-password-editor {
        grid-template-columns: 1fr;
    }

    .company-settings-field--wide {
        grid-column: auto;
    }

    .company-option-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .company-option-row > .ui-toggleswitch {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
.company-timer-username-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    width: 100%;
}

.company-timer-username-field {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.company-timer-username-save {
    flex: 0 0 auto;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .company-timer-username-row {
        align-items: stretch;
        flex-direction: column;
    }

    .company-timer-username-save {
        align-self: flex-end;
    }
}
#companyColors_label{
    font-size: 1rem;
    margin-bottom: 0;
}
#colors_label{
    font-size: 1rem;
    margin-bottom: 0;
}

/* ========================================================= */
/* CLOCKING PAGE */
/* ========================================================= */

.clocking-page {
    display: flex;
    justify-content: center;

    padding-block: .5rem;
}

.clocking-terminal {
    width: min(100%, 64rem);
    padding: 1.1rem;
}

.clocking-terminal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--surface-border);
}

.clocking-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    color: var(--primary-color);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.clocking-terminal-header h3 {
    margin: .3rem 0 0;

    color: var(--text-color);

    font-size: 1.35rem;
    font-weight: 750;
}

.clocking-terminal-header p {
    margin: .4rem 0 0;

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

    font-size: .72rem;
    line-height: 1.5;
}

.clocking-input-modes {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.clocking-mode-button {
    min-width: 6.5rem;
}

.clocking-terminal-body {
    display: grid;
    gap: 1rem;

    padding-top: 1rem;
}
.clocking-current-branch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;

    padding: .8rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 17%,
            var(--surface-border)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            );
}

.clocking-current-branch > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.6rem;
    height: 2.6rem;

    border-radius: .85rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );
}

.clocking-current-branch small,
.clocking-current-branch strong,
.clocking-current-branch em {
    display: block;
}

.clocking-current-branch small {
    color: var(--text-color-secondary);
    font-size: .6rem;
}

.clocking-current-branch strong {
    margin-top: .1rem;

    color: var(--text-color);
    font-size: .78rem;
}

.clocking-current-branch em {
    margin-top: .12rem;

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

    font-size: .61rem;
    font-style: normal;
}
.clocking-guide {
    display: flex;
    align-items: center;
    gap: .8rem;

    padding: .9rem;

    border: 1px solid var(--surface-border);
    border-radius: 1rem;

    background: var(--surface-card);
}

.clocking-guide-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;

    border-radius: .9rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.clocking-guide h4 {
    margin: 0;

    color: var(--text-color);

    font-size: .85rem;
}

.clocking-guide p {
    margin: .2rem 0 0;

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

    font-size: .66rem;
}

.clocking-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

body .ui-button.clocking-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;

    min-height: 6rem;

    border: 1px solid var(--surface-border) !important;
    border-radius: 1.15rem !important;

    color: var(--text-color) !important;

    background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            ) !important;

    box-shadow: none !important;

    font-size: 1rem !important;
    font-weight: 650 !important;

    transition:
            border-color 180ms ease,
            background 180ms ease,
            box-shadow 180ms ease !important;
}

body .ui-button.clocking-action-button .ui-button-icon-left,
body .ui-button.clocking-action-button .ui-button-icon-right {
    position: static !important;

    margin: 0 !important;

    font-size: 1.35rem;
}

body .ui-button.clocking-action-button .ui-button-text {
    padding: 0 !important;
}

body .ui-button.clocking-action-button:hover {
    border-color:
            color-mix(
                    in srgb,
                    var(--primary-color) 35%,
                    var(--surface-border)
            ) !important;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 5%,
                    var(--surface-card)
            ) !important;
}

body .ui-button.clocking-action-button.ui-state-active {
    border-color: transparent !important;

    color: var(--primary-color-text, #fff) !important;

    background:
            linear-gradient(
                    135deg,
                    var(--primary-300, var(--primary-color)),
                    var(--primary-color)
            ) !important;

    box-shadow:
            0 13px 28px
            color-mix(
                    in srgb,
                    var(--primary-color) 24%,
                    transparent
            ) !important;
}
.clocking-input-area {
    display: grid;
    gap: 1rem;

    padding: 1rem;

    border: 1px solid
    color-mix(
            in srgb,
            var(--primary-color) 16%,
            var(--surface-border)
    );

    border-radius: 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 4%,
                    var(--surface-card)
            );
}

.clocking-scanner-panel,
.clocking-tin-panel {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.clocking-panel-heading {
    display: flex;
    align-items: center;
    gap: .7rem;

    justify-self: stretch;

    padding: .75rem;

    border: 1px solid var(--surface-border);
    border-radius: .9rem;

    background: var(--surface-card);
}

.clocking-panel-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.4rem;
    height: 2.4rem;

    border-radius: .78rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 9%,
                    var(--surface-card)
            );
}

.clocking-panel-heading strong,
.clocking-panel-heading small {
    display: block;
}

.clocking-panel-heading strong {
    color: var(--text-color);
    font-size: .76rem;
}

.clocking-panel-heading small {
    margin-top: .12rem;

    color: var(--text-color-secondary);
    font-size: .62rem;
}

.clocking-scanner-frame {
    position: relative;

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

    width: min(100%, 21rem);
    min-height: 21rem;
    padding: .75rem;

    overflow: hidden;

    border-radius: 1.2rem;

    background: #020b10;

    box-shadow:
            0 18px 40px rgba(0, 0, 0, .22);
}

.clocking-scanner-frame video,
.clocking-scanner-frame canvas {
    max-width: 100% !important;
    border-radius: .9rem;
}

.clocking-scanner-corner {
    position: absolute;
    z-index: 3;

    width: 2.2rem;
    height: 2.2rem;

    pointer-events: none;
}

.clocking-scanner-corner--tl {
    top: .7rem;
    left: .7rem;

    border-top: 3px solid var(--primary-color);
    border-left: 3px solid var(--primary-color);
}

.clocking-scanner-corner--tr {
    top: .7rem;
    right: .7rem;

    border-top: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
}

.clocking-scanner-corner--bl {
    bottom: .7rem;
    left: .7rem;

    border-bottom: 3px solid var(--primary-color);
    border-left: 3px solid var(--primary-color);
}

.clocking-scanner-corner--br {
    right: .7rem;
    bottom: .7rem;

    border-right: 3px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
}

.clocking-scanner-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

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

    font-size: .62rem;
}

.clocking-scanner-hint i {
    color: var(--primary-color);
}

.clocking-tin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;

    width: min(100%, 30rem);
}

.clocking-tin-input-wrapper,
.clocking-tin-input {
    width: 100%;
}

.clocking-tin-input {
    min-height: 3rem;

    border-radius: .85rem !important;

    font-size: 1rem !important;
}

.clocking-submit-button {
    white-space: nowrap;
}
.clocking-branch-dialog {
    width: min(34rem, calc(100vw - 2rem)) !important;
}

.clocking-branch-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .9rem;

    text-align: center;
}

.clocking-dialog-icon,
.clocking-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 4.2rem;
    height: 4.2rem;

    border-radius: 1.25rem;

    color: var(--primary-color);

    background:
            color-mix(
                    in srgb,
                    var(--primary-color) 10%,
                    var(--surface-card)
            );

    font-size: 1.4rem;
}

.clocking-dialog-copy h4 {
    margin: 0;

    color: var(--text-color);
}

.clocking-dialog-copy p {
    max-width: 26rem;
    margin: .4rem 0 0;

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

    font-size: .7rem;
    line-height: 1.5;
}

.clocking-branch-select {
    width: 100% !important;
}

.clocking-warning-dialog {
    width: min(31rem, calc(100vw - 2rem)) !important;
}

.clocking-warning-content {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.clocking-warning-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border-radius: .95rem;

    color: var(--orange-600, #d97706);

    background:
            color-mix(
                    in srgb,
                    var(--orange-500, #f59e0b) 11%,
                    var(--surface-card)
            );
}

.clocking-warning-content h4 {
    margin: 0;

    color: var(--text-color);

    font-size: .95rem;
}

.clocking-warning-content p {
    margin: .4rem 0 0;

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

    font-size: .7rem;
    line-height: 1.5;
}

.clocking-result-dialog {
    width: min(29rem, calc(100vw - 2rem)) !important;
}

.clocking-result-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .85rem;

    padding: .5rem;

    text-align: center;
}

.clocking-result-content h4 {
    margin: 0 0 .5rem;

    color: var(--text-color);

    font-size: 1rem;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .clocking-terminal-header {
        flex-direction: column;
    }

    .clocking-input-modes {
        width: 100%;
    }

    .clocking-input-modes .ui-button {
        flex: 1;
    }

    .clocking-action-grid {
        grid-template-columns: 1fr;
    }

    .clocking-current-branch {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .clocking-current-branch > .ui-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .clocking-tin-form {
        grid-template-columns: 1fr;
    }

    .clocking-submit-button {
        width: 100%;
    }
}