/* ==========================================================================
   Global CSS & Reset Foundation
   Architecture: BEM (Block Element Modifier)
   ========================================================================== */

:root {
    /* Color Palette - Figma Tokens */
    --bg-color: #EEF2F6;
    --bg-color-light-blue: #F0F7FF;
    --surface-color: #ffffff;
    --text-light: #495665;
    --text-dark: #0F1A26;
    --text-brand-secondary: #0355A1;
    --primary-color: #074985;
    --primary-hover: #06396b;
    --input-bg: #FCFCFD;
    --input-border: #E2E8EF;
    --error-color: #e53e3e;
    --error-bg: #fff5f5;
    --success-color: #2f855a;
    --success-bg: #f0fff4;
    --subtle-bg: #F8FAFC;
    --hover-bg: var(--subtle-bg);

    /* cards */
    --card-bg: var(--surface-color);
    --card-border: #E2E8EF;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    /* buttons */
    --btn-home-bg: var(--subtle-bg);
    --btn-home-border: #E2E8EF;
    --btn-home-shadow: var(--card-shadow);
    --btn-home-hover-shadow: var(--card-hover-shadow);
    --hover-border: #A8C8E8;

    /* Typography */
    --font-family: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs-size: 0.75rem;


    /* Typography Tokens */
    --text-md-size: 1rem;
    --text-md-line-height: 1.5;
    --text-sm-size: 0.875rem;
    --text-sm-line-height: 1.5;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: var(--radius-sm);
    --radius-lg: 12px;

    /* Icon Colors */
    --icon-muted: #98A5B1;
    --icon-bg-light-brand: #FFF8EC;

    /* spacing */
    --spacing-md: 8px;
    --spacing-lg: 12px;

    /* Status Colors */
    --status-transit: #f59e0b;
    --status-delivered: var(--primary-color);
    --status-expired: #94a3b8;
    --status-viewed: var(--primary-color);
    --status-busy: var(--primary-color);
    --status-completed: #22c55e;
    --status-failed: var(--error-color);

    /* input */
    --input-inactive-bg: var(--subtle-bg);
    --border-brand: #0E89E9;

    /* Dashboard-specific tokens */
    --sidebar-width: 270px;
    --sidebar-bg: var(--bg-color);
    --sidebar-border: #E2E8EF;
    --nav-active-bg: #FFEFD3;
    --nav-active-color: #A1370B;
    --nav-hover-bg: #F5F7FA;
    --nav-text: var(--text-dark);
    --nav-icon-color: #98A5B1;
    --nav-icon-active-color: #E07800;
    --section-title-color: #8B95A2;
    --progress-bg: #E2E8EF;
    --progress-fill: #0076D6;
    --progress-low: #0076D6;
    /* 0-59: Blue */
    --progress-medium: #E07800;
    /* 60-89: Orange */
    --progress-high: #D32F2F;
    /* 90-100: Red */

    /* Statistics dots colors */
    --stat-total-dot: #CCD6DE;
    --stat-registered-dot: #0355A1;
    --stat-secured-dot: #FF6400;
    --stat-signed-dot: #12D585; 
    --stat-large-files-dot: #FAC515;    

    /* Statistics donut */
    --stat-neutral: #EEF2F6;

    /* Devices (green) */
    --stat-devices-desktop: #0A8754;
    --stat-devices-mobile: #12D585;
    --stat-devices-tablet: #7BFAC5;
    /* Security (orange) */
    --stat-security-direct: #FF6400;
    --stat-security-with2fa: #FF9B32;

    /* Open ratio (blue) */
    --stat-open-ratio: #0355A1;

    /* statistics bars */
    --stat-bar-fill: #BADDFD;

    /* settings */
    --notification-count-bg-blue: #E0EEFE;
    --notification-count-bg-grey: #EEF2F6;

}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: var(--text-md-line-height);
    letter-spacing: -0.02em;
}

input,
button {
    font-family: inherit;
}

/* ==========================================================================
   Global Utilities
   ========================================================================== */

/* Mask-icon base: apply to every element that uses CSS mask for icons */
.mask-icon {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Text truncation utility */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
     Block: Login Screen (.login)
     ========================================================================== */

.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}

/* Login Elements */
.login__hero {
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

.login__hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 720px;
    height: 100%;
    justify-content: center;
    z-index: 1;
}

.login__hero-img-wrapper {
    height: 480px;
    /* Fixed height so pagination doesn't jump */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Align slide image to bottom of this bounding box */
    margin-bottom: 2rem;
    width: 100%;
}

.login__hero-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.login--leaving {
    animation: fadeOut 0.25s ease-in forwards;
}

.login__hero-img--fade-in,
.login__hero-text--fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.login__hero-text {
    text-align: center;
    margin-top: 3rem;
    z-index: 1;
}

.login__hero-title {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.login__hero-description {
    color: var(--text-light);
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.6;
}

.login__hero-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    z-index: 1;
}

.login__hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-light);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.login__hero-dot:hover {
    opacity: 0.6;
}

.login__hero-dot--active {
    opacity: 1;
    /* Make the active dot fully opaque */
}

.login__hero-arrow {
    width: 24px;
    height: 24px;
    opacity: 0.5;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.login__hero-arrow:hover {
    opacity: 0.8;
}

.login__hero-arrow:active {
    transform: scale(0.9);
}

.login__form-section {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--surface-color);
    padding: 3rem 4rem;
}

/* Header & Language Selector */
.login__header {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.login__lang-selector-container {
    position: relative;
}

.login__lang-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
    user-select: none;
}

.login__lang-selector:hover {
    background-color: var(--input-bg);
}

.login__lang-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.login__lang-arrow {
    transition: transform 0.2s ease;
}

.login__lang-arrow--open {
    transform: rotate(180deg);
}

.login__lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    background-color: var(--surface-color);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    list-style: none;
    min-width: 140px;
    z-index: 10;
}

.login__lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-light);
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.login__lang-dropdown-item:hover {
    background-color: var(--input-bg);
}

.login__lang-dropdown-item--active {
    background-color: var(--bg-color);
    font-weight: 600;
}

/* Centered Form Content */
.login__form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
}

.login__form-content {
    width: 100%;
    max-width: 360px;
}

.login__logo-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2.5rem;
}

.login__logo {
    height: 40px;
}

.login__title {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.login__subtitle {
    color: var(--text-light);
    font-size: var(--text-md-size);
    margin-bottom: 2.5rem;
}

.login__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login__input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0;
}

.login__input {
    padding: 0.75rem 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    font-size: var(--text-md-size);
    color: var(--text-light);
    transition: all 0.2s ease;
    outline: none;
}

.login__input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

.login__input--error {
    border-color: var(--error-color) !important;
    background-color: var(--surface-color);
    background-image: url("../img/input-error-icon.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
    padding-right: 2.5rem;
}

.login__input--error:focus {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.login__input-error-text {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.login__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.5rem;
}

.login__actions--centered {
    justify-content: center;
    margin-top: 0.5rem;
}

.login__checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.login__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    border: 1px solid var(--input-border);
    cursor: pointer;
    accent-color: var(--primary-color);
}

.login__checkbox-label {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 1px;
}

.login__copyright-link {
    color: inherit;
    text-decoration: none;
}

.login__forgot-link {
    font-size: 0.875rem;
    color: var(--text-brand-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.login__forgot-link:hover {
    opacity: 0.8;
}

.login__button {
    margin-top: 1rem;
    padding: 0.875rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.login__button-spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.login__button:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.login__button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.login__message {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-align: center;
}

.login__message--error {
    background-color: var(--error-bg);
    color: var(--error-color);
    border: 1px solid #feb2b2;
}

.login__message--success {
    background-color: var(--success-bg);
    color: var(--success-color);
    border: 1px solid #9ae6b4;
}

.login__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.875rem;
    color: var(--text-light);
    opacity: 0.7;
    margin-top: 2rem;
}

.login__support-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.login__support-link:hover {
    opacity: 1;
}

/* Alert Boxes (shared login__success-box / login__error-box) */
.login__success-box,
.login__error-box {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 1px solid #D2D6DC;
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
    margin-top: 1.5rem;
    box-shadow: 0px 1px 2px 0px #0A0D120D;
}

.login__success-box {
    border-width: 2px;
}

.login__success-icon {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 40px;
    height: 40px;
}

.login__success-content,
.login__error-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login__success-title,
.login__error-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-light);
}

.login__success-text,
.login__error-text {
    font-size: var(--text-sm-size);
    color: var(--text-light);
    line-height: 1.5;
}

.login__success-email {
    color: var(--text-brand-secondary);
    text-decoration: none;
    font-weight: 500;
}

.login__success-email:hover {
    text-decoration: underline;
}

.login__error-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
}

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

    .login__info {
        padding: 3rem 2rem;
        min-height: 40vh;
    }
}

/* ==========================================================================
     Block: Dashboard Layout (.dashboard)
     ========================================================================== */

/* Dashboard tokens merged into main :root above */

.dashboard {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    width: 100%;
}

.dashboard__content {
    background-color: var(--surface-color);
    min-height: 100vh;
    padding: 0;
}

.dashboard__placeholder {
    padding: 2rem;
}

.dashboard__placeholder--composer {
    padding: 2rem 2.25rem;
}

.dashboard__placeholder-card {
    max-width: 640px;
    padding: 2rem;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--card-shadow);
}

.dashboard__placeholder-eyebrow {
    display: inline-flex;
    margin-bottom: 0.875rem;
    color: var(--text-brand-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard__placeholder-title {
    margin: 0;
    font-size: 1.875rem;
    line-height: 1.15;
    color: var(--text-dark);
}

.dashboard__placeholder-copy {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.dashboard__placeholder-note {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* ==========================================================================
     Block: Compose Mail (.compose-mail)
     ========================================================================== */

.compose-mail {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
}

.compose-mail--loading {
    align-items: center;
    justify-content: center;
}

.compose-mail__resume-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(15, 26, 38, 0.34);
}

.compose-mail__resume-dialog {
    width: min(440px, 100%);
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background-color: var(--surface-color);
    box-shadow: 0 20px 44px rgba(15, 26, 38, 0.16);
}

.compose-mail__resume-dialog--missing-phone {
    width: min(560px, 100%);
    padding: 1.5rem 1.6rem 1.45rem;
    border-radius: 18px;
}

.compose-mail__resume-dialog--leave {
    position: relative;
    width: min(400px, 100%);
    padding: 1.5rem;
    border-radius: 18px;
}

.compose-mail__leave-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.compose-mail__leave-close-icon {
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.compose-mail__leave-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 0.9rem;
    object-fit: contain;
}

.compose-mail__resume-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__resume-copy {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-light);
}

.compose-mail__resume-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.compose-mail__resume-actions--split {
    justify-content: stretch;
    gap: 0.75rem;
    margin-top: 1.45rem;
}

.compose-mail__resume-actions--split .compose-mail__btn {
    flex: 1 1 0;
    min-height: 46px;
    border-radius: 8px;
    font-size: 0.9375rem;
}

.compose-mail__resume-actions--split .compose-mail__btn--secondary {
    border-color: #e8edf3;
    background-color: #eef3f7;
    color: #37465a;
}

.compose-mail__missing-phone-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.35rem;
}

.compose-mail__missing-phone-row {
    display: grid;
    grid-template-columns: minmax(0, 242px) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    position: relative;
}

.compose-mail__missing-phone-email {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #314155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-mail__missing-phone-control {
    display: flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    overflow: visible;
    background-color: #ffffff;
    position: relative;
}

.compose-mail__missing-phone-control--dropdown-open {
    z-index: 8;
}

.compose-mail__missing-phone-control--error {
    border-color: #e8a2a2;
    background-color: #fff8f8;
}

.compose-mail__missing-phone-country-dropdown {
    position: relative;
    align-self: stretch;
    min-width: 92px;
    border-right: 1px solid #d8e0ea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.compose-mail__missing-phone-country-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 38px;
    padding: 0 0.7rem;
    border: none;
    background: transparent;
    color: #314155;
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.compose-mail__missing-phone-country-trigger:focus-visible {
    outline: none;
}

.compose-mail__missing-phone-flag {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(15, 26, 38, 0.06);
}

.compose-mail__missing-phone-country-label {
    min-width: 0;
    font-weight: 500;
}

.compose-mail__missing-phone-country,
.compose-mail__missing-phone-input {
    border: none;
    background: transparent;
    color: #314155;
    font-family: inherit;
    font-size: 0.8125rem;
}

.compose-mail__missing-phone-chevron {
    margin-left: auto;
    display: block;
    flex: 0 0 auto;
    color: #8a94a6;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.compose-mail__missing-phone-chevron--open {
    transform: rotate(180deg);
}

.compose-mail__missing-phone-country-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 125px;
    padding: 0.4rem 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.08);
    z-index: 7;
}

.compose-mail__missing-phone-country-dropdown--up .compose-mail__missing-phone-country-menu {
    top: auto;
    bottom: calc(100% + 0.375rem);
}

.compose-mail__missing-phone-country-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.625rem 0.8rem;
    font-size: 0.8125rem;
    color: #314155;
    cursor: pointer;
    user-select: none;
}

.compose-mail__missing-phone-country-option:hover {
    background-color: #f8fafc;
}

.compose-mail__missing-phone-country-option--active {
    background-color: #f5f8fc;
    font-weight: 600;
}

.compose-mail__missing-phone-country-option-code {
    min-width: 24px;
}

.compose-mail__missing-phone-country-option-dial {
    color: #718196;
}

.compose-mail__missing-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 0.9rem;
}

.compose-mail__missing-phone-country:focus,
.compose-mail__missing-phone-input:focus {
    outline: none;
}

.compose-mail__missing-phone-error {
    grid-column: 1 / -1;
    margin-top: -0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #b42318;
}

.compose-mail__loading {
    padding: 4rem 2rem;
    font-size: 0.9375rem;
    color: var(--text-light);
}

.compose-mail__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.1rem;
    border-bottom: 1px solid var(--card-border);
    background-color: #f4f8fc;
}

.compose-mail__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.compose-mail__title-icon {
    width: 32px;
    height: auto;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.compose-mail__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    transform: translatey(2px);
}

.compose-mail__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.compose-mail__btn {
    min-height: 40px;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background-color: var(--surface-color);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
}

.compose-mail__btn--primary {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
}

.compose-mail__btn--danger {
    border-color: #bf3f34;
    background-color: #bf3f34;
    color: #ffffff;
}

.compose-mail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
    flex: 1;
    min-height: 0;
}

.compose-mail__editor,
.compose-mail__sidebar {
    min-width: 0;
    padding: 1.5rem 1.4rem 1.75rem;
}

.compose-mail__sidebar {
    border-left: 1px solid var(--card-border);
}

.compose-mail__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compose-mail__section + .compose-mail__section {
    margin-top: 1.75rem;
}

.compose-mail__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.compose-mail__section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__section-copy {
    margin: -0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-light);
}

.compose-mail__field-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.compose-mail__field-group--compact {
    max-width: 232px;
}

.compose-mail__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-light);
}

.compose-mail__input,
.compose-mail__textarea,
.compose-mail__message-editor,
.compose-mail__select,
.compose-mail__recipient-search {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xs);
    background-color: #f8fafc;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.8125rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.compose-mail__input,
.compose-mail__select,
.compose-mail__recipient-search {
    min-height: 36px;
    padding: 0 0.75rem;
}

.compose-mail__textarea {
    min-height: 292px;
    padding: 0.75rem;
    resize: vertical;
    line-height: 1.55;
}

.compose-mail__message-editor-wrap {
    position: relative;
}

.compose-mail__message-editor {
    min-height: 292px;
    padding: 0.75rem;
    line-height: 1.55;
    overflow: auto;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
}

.compose-mail__message-block {
    min-height: 1.55em;
}

.compose-mail__message-block--align-center {
    text-align: center;
}

.compose-mail__message-editor a {
    color: var(--primary-color);
    text-decoration: underline;
}

.compose-mail__message-editor[data-empty="true"]::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

body.compose-mail__dragging-body,
html.compose-mail__dragging-html {
    cursor: grabbing;
}

body.compose-mail__dragging-body {
    user-select: none;
}

.compose-mail__input:focus,
.compose-mail__textarea:focus,
.compose-mail__message-editor:focus,
.compose-mail__select:focus,
.compose-mail__recipient-search:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(3, 85, 161, 0.12);
    background-color: #ffffff;
}

.compose-mail__format-toolbar {
    position: fixed;
    z-index: 1210;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.35rem;
    border: 1px solid rgba(17, 24, 39, 0.9);
    border-radius: 8px;
    background: #10141d;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.34);
    transform: translate(-50%, calc(-100% - 12px));
}

.compose-mail__format-link-popover {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 228px;
    padding: 0.75rem;
    border: 1px solid rgba(29, 41, 57, 0.18);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.compose-mail__format-link-remove-btn {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(29, 41, 57, 0.12);
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.compose-mail__format-link-remove-btn:hover,
.compose-mail__format-link-remove-btn:focus-visible {
    outline: none;
    background: #eef2f6;
    border-color: rgba(29, 41, 57, 0.18);
}

.compose-mail__format-link-remove-btn:disabled {
    cursor: default;
    opacity: 0.42;
}

.compose-mail__format-link-remove-btn:disabled:hover,
.compose-mail__format-link-remove-btn:disabled:focus-visible {
    background: #f8fafc;
    border-color: rgba(29, 41, 57, 0.12);
}

.compose-mail__format-link-remove-icon {
    display: block;
    width: 8px;
    height: 8px;
    object-fit: contain;
}

.compose-mail__format-link-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__format-link-input {
    width: 100%;
    min-height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background-color: #f8fafc;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.8125rem;
}

.compose-mail__format-link-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(3, 85, 161, 0.12);
    background-color: #ffffff;
}

.compose-mail__format-link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.compose-mail__format-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #c6ced8;
    cursor: pointer;
}

.compose-mail__format-btn:hover,
.compose-mail__format-btn:focus-visible,
.compose-mail__format-btn--active {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.compose-mail__format-icon {
    display: block;
    width: 18px;
    height: 14px;
    object-fit: contain;
}

.compose-mail__attach-btn,
.compose-mail__dropzone-btn,
.compose-mail__recipient-add-btn {
    min-height: 34px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xs);
    background-color: var(--surface-color);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-brand-secondary);
    cursor: pointer;
}

.compose-mail__recipient-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transform: translateY(5px);
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
}

.compose-mail__recipient-add-btn::before {
    content: '';
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: url(../img/mail_compose/plus-icon.svg);
    -webkit-mask-image: url(../img/mail_compose/plus-icon.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.compose-mail__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.compose-mail__recipient-add-btn:disabled {
    border-color: #e2e8ef;
    background-color: #f8fafc;
    color: #b4bec9;
    cursor: default;
}

.compose-mail__dropzone {
    min-height: 150px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xs);
    background-color: #fbfcfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.compose-mail__dropzone--active,
.compose-mail__attachment-dropzone-wrap--active {
    border-color: #2967c9;
    background-color: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(41, 103, 201, 0.08);
}

.compose-mail__dropzone--compact {
    min-height: 104px;
}

.compose-mail__attachment-dropzone-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed var(--card-border);
    border-radius: 8px;
    background-color: #fbfcfd;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.compose-mail__dropzone-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__dropzone-copy {
    max-width: 36ch;
    font-size: 0.75rem;
    color: var(--text-light);
}

.compose-mail__attachment-policy {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-light);
}

.compose-mail__attachment-feedback {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid #ffd8d6;
    border-radius: 8px;
    background-color: #fff6f5;
    color: #b42318;
}

.compose-mail__attachment-feedback-item {
    font-size: 0.75rem;
    line-height: 1.4;
}

.compose-mail__signing-dropzone {
    min-height: 160px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: #fbfcfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
    padding: 1.75rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.compose-mail__signing-dropzone--active,
.compose-mail__signing-files-grid--active {
    border-color: #2967c9;
    background-color: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(41, 103, 201, 0.08);
}

.compose-mail__signing-dropzone-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__signing-dropzone-copy {
    max-width: 38ch;
    font-size: 0.75rem;
    color: var(--text-light);
}

.compose-mail__signing-dropzone-btn {
    min-height: 34px;
    padding: 0.55rem 0.95rem;
    border: none;
    border-radius: 6px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.compose-mail__signing-files-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.compose-mail__signing-file-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 160px;
    padding: 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: #fbfcfd;
}

.compose-mail__signing-file-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.compose-mail__signing-file-remove {
    width: 10px;
    height: 10px;
    border: none;
    background-color: #98a5b1;
    cursor: pointer;
    flex-shrink: 0;
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.compose-mail__signing-file-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.compose-mail__signing-file-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    word-break: break-word;
}

.compose-mail__signing-file-size {
    font-size: 0.6875rem;
    color: #8190a3;
}

.compose-mail__signing-file-preview {
    flex: 1;
    min-height: 90px;
    border: 1px solid #eef2f6;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.5rem;
}

.compose-mail__signing-file-preview-page {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 26, 38, 0.08);
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.compose-mail__signing-file-preview-line {
    display: block;
    height: 4px;
    border-radius: 999px;
    background-color: #dbe4ee;
}

.compose-mail__signing-file-preview-line--title {
    width: 68%;
    margin-bottom: 0.2rem;
}

.compose-mail__signing-file-preview-line--short {
    width: 52%;
}

.compose-mail__signing-file-flags {
    display: flex;
    justify-content: flex-start;
}

.compose-mail__attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compose-mail__attachment-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xs);
    background-color: #fbfcfd;
}

.compose-mail__attachment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 16px;
    border-radius: 3px;
    background-color: #d92d20;
    color: #ffffff;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.compose-mail__attachment-copy {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
    flex: 1;
}

.compose-mail__attachment-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose-mail__attachment-size {
    font-size: 0.75rem;
    color: #8190a3;
    white-space: nowrap;
}

.compose-mail__attachment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 0.5rem;
    border-radius: 4px;
    background-color: #ebf3ff;
    color: #2967c9;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.compose-mail__attachment-chip--signing {
    background-color: #fff4e6;
    color: #e07800;
}

.compose-mail__attachment-remove,
.compose-mail__recipient-remove {
    width: 7px;
    height: 7px;
    border: none;
    background-color: #98a5b1;
    cursor: pointer;
    flex-shrink: 0;
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.compose-mail__service-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.compose-mail__service-card {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 1.75rem;
    align-items: center;
    min-height: 52px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: var(--surface-color);
}

.compose-mail__service-card--selectable {
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.compose-mail__service-card--selectable:focus-visible {
    outline: 2px solid rgba(41, 103, 201, 0.24);
    outline-offset: 3px;
}

.compose-mail__service-card--highlighted {
    border-color: #ee6a22;
    box-shadow: inset 0 0 0 1px rgba(238, 106, 34, 0.08);
}

.compose-mail__service-card--upsell {
    background-color: var(--icon-bg-light-brand);
    border-color: var(--icon-bg-light-brand);
}

.compose-mail__service-leading {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--icon-bg-light-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.compose-mail__service-icon {
    width: 16px;
    height: 16px;
    background-color: #ee6a22;
}

.compose-mail__service-icon--registered {
    mask-image: url(../img/mail_compose/lock-icon.svg);
    -webkit-mask-image: url(../img/mail_compose/lock-icon.svg);
}

.compose-mail__service-icon--secured {
    mask-image: url(../img/nav/secured.svg);
    -webkit-mask-image: url(../img/nav/secured.svg);
}

.compose-mail__service-icon--basic {
    mask-image: url(../img/nav/basic-mail.svg);
    -webkit-mask-image: url(../img/nav/basic-mail.svg);
}

.compose-mail__service-icon--signing {
    mask-image: url(../img/mail_compose/sign-icon.svg);
    -webkit-mask-image: url(../img/mail_compose/sign-icon.svg);
}

.compose-mail__service-icon--large-files {
    mask-image: url(../img/mail_compose/larg-files-icon.svg);
    -webkit-mask-image: url(../img/mail_compose/larg-files-icon.svg);
}

.compose-mail__service-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.compose-mail__service-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__service-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.35;
}

.compose-mail__service-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    color: #2967c9;
    white-space: nowrap;
}

.compose-mail__service-check {
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    border-left: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg) translateY(-5px);
}

.compose-mail__service-status-label {
    display: block;
    transform: translateY(1px);
}

.compose-mail__service-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #c8d0d9;
    border-radius: 999px;
    background-color: #ffffff;
    flex-shrink: 0;
}

.compose-mail__service-radio--selected {
    border-color: #2c61ad;
}

.compose-mail__service-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: transparent;
}

.compose-mail__service-radio--selected .compose-mail__service-radio-dot {
    background-color: #2c61ad;
}

.compose-mail__service-trailing {
    display: inline-flex;
    align-items: center;
    justify-self: end;
}

.compose-mail__service-upsell-btn {
    min-height: 38px;
    padding: 0.625rem 0.95rem 0.45rem 0.95rem;
    border: none;
    border-radius: 8px;
    background-color: #2f7d45;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.compose-mail__service-upsell-price {
    font-weight: 700;
    color: #2f7d45;
}

.compose-mail__service-toggle-button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.compose-mail__service-toggle-button:focus-visible {
    outline: 2px solid rgba(41, 103, 201, 0.24);
    outline-offset: 3px;
    border-radius: 999px;
}

.compose-mail__service-toggle,
.compose-mail__recipient-factor-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background-color: #e2e8ef;
    flex-shrink: 0;
}

.compose-mail__service-toggle--on,
.compose-mail__recipient-factor-toggle--on {
    background-color: #2c61ad;
}

.compose-mail__service-toggle-knob,
.compose-mail__recipient-factor-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform 0.16s ease;
}

.compose-mail__service-toggle--on .compose-mail__service-toggle-knob,
.compose-mail__recipient-factor-toggle--on .compose-mail__recipient-factor-knob {
    transform: translateX(12px);
}

.compose-mail__recipient-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: start;
}

.compose-mail__recipient-search-wrap {
    display: flex;
    flex-direction: column;
    transform: translateX(-5px);
}

.compose-mail__recipient-search-control {
    position: relative;
    padding: 5px;
    border-radius: 6px;
}

.compose-mail__recipient-search-control:focus-within {
    background-color: #5aa2f2;
}

.compose-mail__recipient-search-wrap--error .compose-mail__recipient-search-control,
.compose-mail__recipient-search-wrap--error .compose-mail__recipient-search-control:focus-within {
    background-color: transparent;
}

.compose-mail__recipient-search {
    padding-left: 2rem;
    padding-top: 0.1rem;
}

.compose-mail__recipient-search--error {
    border-color: #d92d20;
    color: #b42318;
}

.compose-mail__recipient-search--error::placeholder {
    color: #b42318;
}

input.compose-mail__recipient-search:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 0px;
    
}

input.compose-mail__recipient-search--error:focus-visible {
    outline-color: #d92d20;
}

.compose-mail__recipient-suggestions {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: var(--surface-color);
    box-shadow: 0 8px 24px rgba(15, 26, 38, 0.08);
}

.compose-mail__recipient-suggestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
}

.compose-mail__recipient-suggestion:hover {
    background-color: #f8fafc;
}

.compose-mail__recipient-suggestion-email {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.compose-mail__recipient-suggestion-phone {
    font-size: 0.75rem;
    color: var(--text-light);
}

.compose-mail__recipient-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 14px;
    height: 14px;
    background-color: #98a5b1;
    transform: translateY(-50%);
    mask-image: url(../img/shipments_header/search-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/search-icon.svg);
}

.compose-mail__recipient-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.compose-mail__recipient-list--signing {
    position: relative;
    gap: 0.5rem;
}

.compose-mail__recipient-list--signing.compose-mail__recipient-list--dragging {
    gap: 0.125rem;
}

.compose-mail__recipient-list--signing.compose-mail__recipient-list--signing-indicator,
.compose-mail__recipient-list--signing.compose-mail__recipient-list--signing-indicator.compose-mail__recipient-list--dragging {
    gap: 0.5rem;
}

.compose-mail__recipient-list--grouped-default {
    gap: 0.625rem;
}

.compose-mail__recipient-group {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #fbfcfd;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.compose-mail__recipient-group--active {
    border-color: var(--border-brand);
    background-color: #f8fbff;
    box-shadow: inset 0 0 0 1px rgba(14, 137, 233, 0.08);
}



.compose-mail__recipient-group .compose-mail__recipient-row {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.compose-mail__recipient-group .compose-mail__recipient-row + .compose-mail__recipient-row {
    border-top: 1px solid var(--card-border);
}

.compose-mail__recipient-group-gap-target {
    position: relative;
    height: 16px;
    opacity: 0;
    pointer-events: auto;
}

.compose-mail__recipient-group-gap-target--top,
.compose-mail__recipient-group-gap-target--bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 2;
}

.compose-mail__recipient-group-gap-target--top {
    top: -24px;
}

.compose-mail__recipient-group-gap-target--bottom {
    bottom: -24px;
}

.compose-mail__recipient-drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}

.compose-mail__recipient-drop-indicator::before,
.compose-mail__recipient-drop-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.compose-mail__recipient-drop-indicator::before {
    left: 0;
    width: 7px;
    height: 8px;
    background-image: url(../img/shipments_mail/drag-indicator-triangle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.compose-mail__recipient-drop-indicator::after {
    left: 6px;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background-color: #0355A1;
}

.compose-mail__recipient-group-dropzone {
    height: 0;
    border: 1px dashed transparent;
    border-radius: 999px;
    background-color: transparent;
    transition: height 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.compose-mail__recipient-list--dragging .compose-mail__recipient-group-dropzone {
    height: 14px;
    border-color: #d7e4f5;
    background-color: #f8fbff;
}

.compose-mail__recipient-group-dropzone--active {
    border-color: var(--border-brand) !important;
    background-color: #e9f4ff !important;
}

.compose-mail__recipients-empty {
    min-height: 68px;
    border: 1px dashed var(--card-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.8125rem;
    background-color: #fbfcfd;
}

.compose-mail__recipient-feedback-text {
    margin-top: 0.1rem;
    padding: 0 0.25rem;
    color: #b42318;
    font-size: 0.75rem;
    line-height: 1.4;
}

.compose-mail__recipient-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 0.625rem;
    align-items: center;
    min-height: 54px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: #fbfcfd;
    position: relative;
}

.compose-mail__recipient-row--signing {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    cursor: grab;
}

.compose-mail__recipient-row--grouped-default {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    cursor: grab;
}

.compose-mail__recipient-row--dragging {
    opacity: 0.58;
    cursor: grabbing;
}

.compose-mail__recipient-row--drag-preview {
    border: 1px solid #d7dde4 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.14);
}

.compose-mail__recipient-row--drag-ghost {
    visibility: hidden;
    pointer-events: none;
}

.compose-mail__recipient-drag-preview-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: min(760px, calc(100vw - 2rem));
    pointer-events: none;
}

.compose-mail__recipient-drag-handle {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}

.compose-mail__recipient-drag-handle:active {
    cursor: grabbing;
}

.compose-mail--recipient-dragging,
.compose-mail--recipient-dragging * {
    cursor: grabbing !important;
}

.compose-mail__recipient-drag-icon {
    width: 12px;
    height: 12px;
    background-color: #98a5b1;
    mask-image: url(../img/mail_compose/drag-icon.svg);
    -webkit-mask-image: url(../img/mail_compose/drag-icon.svg);
}

.compose-mail__recipient-order,
.compose-mail__recipient-channel,
.compose-mail__recipient-action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 24px;
    padding: 0 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
}

.compose-mail__recipient-channel-select {
    min-height: 36px;
    min-width: 72px;
    padding: 0.1rem 1.85rem 0 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #98a5b1 50%), linear-gradient(135deg, #98a5b1 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.compose-mail__recipient-channel-select--order {
    min-width: 60px;
}

.compose-mail__recipient-channel-select--action {
    min-width: 126px;
}

.compose-mail__recipient-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    position: relative;
}

.compose-mail__recipient-email {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose-mail__recipient-phone {
    font-size: 0.75rem;
    color: var(--text-light);
}

.compose-mail__recipient-phone-button,
.compose-mail__recipient-phone-link {
    width: fit-content;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    cursor: pointer;
}

.compose-mail__recipient-phone-button {
    color: var(--text-light);
    text-align: left;
}

.compose-mail__recipient-phone-link {
    font-weight: 700;
    color: #2967c9;
}

.compose-mail__recipient-phone-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(260px, 100%);
    padding: 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: var(--surface-color);
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.08);
}

.compose-mail__recipient-phone-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
}

.compose-mail__recipient-phone-input {
    width: 100%;
    min-height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background-color: #f8fafc;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.8125rem;
}

.compose-mail__recipient-phone-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #b42318;
}

.compose-mail__recipient-phone-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.compose-mail__recipient-phone-btn {
    min-height: 32px;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.compose-mail__recipient-phone-btn--secondary {
    border: 1px solid var(--card-border);
    background-color: var(--surface-color);
    color: var(--text-light);
}

.compose-mail__recipient-phone-btn--primary {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
}

@media (max-width: 720px) {
    .compose-mail__resume-dialog--missing-phone {
        padding: 1.1rem;
    }

    .compose-mail__missing-phone-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .compose-mail__missing-phone-email {
        white-space: normal;
    }

    .compose-mail__resume-actions--split {
        flex-direction: column;
    }
}

.compose-mail__recipient-factor {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
}

.compose-mail__recipient-factor--active {
    color: #2967c9;
}

.compose-mail__recipient-factor--locked {
    cursor: default;
    opacity: 0.72;
}

.compose-mail__recipient-factor:focus-visible {
    outline: 2px solid rgba(41, 103, 201, 0.24);
    outline-offset: 3px;
    border-radius: 999px;
}

.compose-mail__recipient-factor-label {
    display: block;
    transform: translateY(1px);
}

.compose-mail__language-copy {
    max-width: 420px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-light);
}

.compose-mail__language-dropdown {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.compose-mail__language-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    min-width: 290px;
    max-width: 420px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #ffffff;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.compose-mail__language-flag {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 auto;
}

.compose-mail__language-trigger:focus-visible {
    outline: 2px solid rgba(3, 85, 161, 0.18);
    outline-offset: 2px;
}

.compose-mail__language-trigger-label {
    flex: 1;
    min-width: 0;
}

.compose-mail__language-chevron {
    flex: 0 0 auto;
    color: #98a2b3;
    transition: transform 0.2s ease;
}

.compose-mail__language-chevron--open {
    transform: rotate(180deg);
}

.compose-mail__language-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 220px;
    width: 100%;
    max-height: min(240px, calc(100vh - 2rem));
    overflow-y: auto;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.08);
    z-index: 5;
}

.compose-mail__language-dropdown--up .compose-mail__language-menu {
    top: auto;
    bottom: calc(100% + 0.375rem);
}

.compose-mail__language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
}

.compose-mail__language-option:hover {
    background-color: #f8fafc;
}

.compose-mail__language-option--active {
    background-color: #f5f8fc;
    font-weight: 600;
}

.compose-mail__language-selected {
    display: none;
}

@media (max-width: 1180px) {
    .compose-mail__layout {
        grid-template-columns: 1fr;
    }

    .compose-mail__signing-files-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compose-mail__sidebar {
        border-left: none;
        border-top: 1px solid var(--card-border);
    }
}

@media (max-width: 860px) {
    .compose-mail__topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .compose-mail__actions {
        justify-content: flex-end;
    }

    .compose-mail__recipient-toolbar,
    .compose-mail__recipient-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .compose-mail__recipient-factor,
    .compose-mail__recipient-action-chip,
    .compose-mail__recipient-remove,
    .compose-mail__recipient-leading {
        justify-self: start;
    }

    .compose-mail__signing-files-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
     Block: Sidebar (.sidebar)
     ========================================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: visible;
    padding: 1.25rem 0.75rem;
    z-index: 999;
}

/* Logo */
.sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    margin-bottom: 1.25rem;
}

.sidebar__logo-img {
    height: 28px;
}

/* Language Switcher */
.sidebar__lang {
    position: relative;
}

.sidebar__lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--text-light);
    transition: background-color 0.15s;
}

.sidebar__lang-toggle:hover {
    background-color: var(--hover-bg);
}

.sidebar__lang-flag {
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 2px;
}

.sidebar__lang-arrow {
    transition: transform 0.2s ease;
}

.sidebar__lang-arrow--open {
    transform: rotate(180deg);
}

.sidebar__lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    padding: 0.35rem 0;
    background-color: var(--surface-color);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    list-style: none;
    min-width: 90px;
    z-index: 50;
}

.sidebar__lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
}

.sidebar__lang-dropdown-item:hover {
    background-color: var(--hover-bg);
}

.sidebar__lang-dropdown-item--active {
    background-color: var(--bg-color);
    font-weight: 600;
    color: var(--text-dark);
}

/* New Button */
.sidebar__new-menu {
    position: relative;
    margin-bottom: 1rem;
}

.sidebar__new-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.75rem;
}

.sidebar__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: var(--card-bg);
    color: var(--text-brand-secondary);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sidebar__new-menu:hover .sidebar__new-btn,
.sidebar__new-menu:focus-within .sidebar__new-btn {
    background-color: var(--nav-hover-bg);
    border-color: var(--hover-border);
}

.sidebar__new-menu--open .sidebar__new-btn {
    background-color: var(--nav-hover-bg);
    border-color: var(--hover-border);
}

.sidebar__new-btn:hover {
    background-color: var(--nav-hover-bg);
    border-color: var(--hover-border);
}

.sidebar__new-menu-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    z-index: 30;
    width: 100%;
    min-width: 240px;
    padding: 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: var(--surface-color);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.sidebar__new-menu--open .sidebar__new-menu-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sidebar__new-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
}

.sidebar__new-menu-item:hover,
.sidebar__new-menu-item:focus-visible {
    background-color: var(--nav-hover-bg);
    outline: none;
}

.sidebar__new-menu-item--section {
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.sidebar__new-menu-item--section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--card-border);
}

.sidebar__new-menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--icon-muted);
}

.sidebar__create-icon--registered {
    mask-image: url(../img/nav/registered.svg);
    -webkit-mask-image: url(../img/nav/registered.svg);
}

.sidebar__create-icon--secured {
    mask-image: url(../img/nav/secured.svg);
    -webkit-mask-image: url(../img/nav/secured.svg);
}

.sidebar__create-icon--basic {
    mask-image: url(../img/nav/basic-mail.svg);
    -webkit-mask-image: url(../img/nav/basic-mail.svg);
}

.sidebar__create-icon--signing {
    mask-image: url(../img/nav/sign-icon.svg);
    -webkit-mask-image: url(../img/nav/sign-icon.svg);
}

.sidebar__create-icon--large-files {
    mask-image: url(../img/nav/large-files.svg);
    -webkit-mask-image: url(../img/nav/large-files.svg);
}

.sidebar__new-menu-text {
    line-height: 1;
    transform: translateY(2px);
}

.sidebar__new-menu-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.75rem);
    transform: translateY(-50%);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: linear-gradient(90deg, #061121 0%, #081426 100%);
    color: #ffffff;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(7, 17, 34, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease;
}

.sidebar__new-menu-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #061121;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
}

.sidebar__new-menu-item:hover .sidebar__new-menu-tooltip,
.sidebar__new-menu-item:focus-visible .sidebar__new-menu-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1180px) {
    .sidebar__new-menu-tooltip {
        display: none;
    }
}

/* Navigation */
.sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    padding-right: 0.375rem;
    margin-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

.sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar__nav::-webkit-scrollbar-thumb {
    background-color: #c4c4c4;
    border-radius: 3px;
}

.sidebar__nav::-webkit-scrollbar-button {
    display: none;
}

.sidebar__section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--section-title-color);
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem 0.375rem;
    text-transform: uppercase;
}

.sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nav-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: left;
    text-decoration: none;
}

/* target second text span for vertical alignment */
.sidebar__nav-item span:nth-child(2) {
    transform: translateY(3px);
    line-height: 1;

}

.sidebar__nav-item:hover {
    background-color: var(--nav-hover-bg);
}

.sidebar__saved-item {
    position: relative;
}

.sidebar__saved-item .sidebar__nav-item {
    padding-right: 2.1rem;
}

.sidebar__saved-label {
    flex: 1;
}

.sidebar__saved-delete {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.sidebar__saved-item:hover .sidebar__saved-delete,
.sidebar__saved-item:focus-within .sidebar__saved-delete {
    opacity: 1;
    pointer-events: auto;
}

.sidebar__saved-delete:hover {
    background-color: #fbeaea;
}

.sidebar__saved-delete-icon {
    width: 10px;
    height: 10px;
    background-color: var(--icon-muted);
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
}

.sidebar__nav-item--active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-color);
    font-weight: 600;
}

.sidebar__nav-item--active .sidebar__nav-icon {
    filter: brightness(0) saturate(100%) invert(48%) sepia(82%) saturate(1200%) hue-rotate(14deg) brightness(96%) contrast(93%);
}

.sidebar__nav-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    flex-shrink: 0;
    background-color: var(--nav-icon-color);
}

.sidebar__nav-item--active .sidebar__nav-icon {
    opacity: 1;
    background-color: var(--nav-icon-active-color);
}

/* Icon Modifiers (CSP Compliant Masking) */
.sidebar__nav-icon--home {
    mask-image: url(../img/nav/home.svg);
    -webkit-mask-image: url(../img/nav/home.svg);
}

.sidebar__nav-icon--statistics {
    mask-image: url(../img/nav/statistics.svg);
    -webkit-mask-image: url(../img/nav/statistics.svg);
}

.sidebar__nav-icon--all {
    mask-image: url(../img/nav/all.svg);
    -webkit-mask-image: url(../img/nav/all.svg);
}

.sidebar__nav-icon--registered {
    mask-image: url(../img/nav/registered.svg);
    -webkit-mask-image: url(../img/nav/registered.svg);
}

.sidebar__nav-icon--secured {
    mask-image: url(../img/nav/secured.svg);
    -webkit-mask-image: url(../img/nav/secured.svg);
}

.sidebar__nav-icon--signing {
    mask-image: url(../img/nav/sign-icon.svg);
    -webkit-mask-image: url(../img/nav/sign-icon.svg);
}

.sidebar__nav-icon--large_files {
    mask-image: url(../img/nav/large-files.svg);
    -webkit-mask-image: url(../img/nav/large-files.svg);
}

.sidebar__nav-icon--active {
    mask-image: url(../img/nav/active.svg);
    -webkit-mask-image: url(../img/nav/active.svg);
}

.sidebar__nav-icon--errors {
    mask-image: url(../img/nav/errors.svg);
    -webkit-mask-image: url(../img/nav/errors.svg);
}

.sidebar__nav-icon--settings {
    mask-image: url(../img/nav/settings.svg);
    -webkit-mask-image: url(../img/nav/settings.svg);
}

.sidebar__nav-icon--support {
    mask-image: url(../img/nav/support.svg);
    -webkit-mask-image: url(../img/nav/support.svg);
}

.sidebar__nav-icon--transfer {
    mask-image: url(../img/nav/transfer.svg);
    -webkit-mask-image: url(../img/nav/transfer.svg);
}



/* Bottom Section */
.sidebar__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Notification Card */
.sidebar__card {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background-color: var(--sidebar-bg);
}

.sidebar__card-close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--section-title-color);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.sidebar__card-close:hover {
    background-color: var(--nav-hover-bg);
}

.sidebar__card-icon-row {
    margin-bottom: 0.625rem;
}

.sidebar__card-icon {
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

.sidebar__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sidebar__card-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--nav-text);
    margin-bottom: 0;
    line-height: 1.3;
}

.sidebar__card-text {
    font-size: 0.75rem;
    color: var(--nav-text);
    opacity: 0.8;
    line-height: 1.45;
}

.sidebar__card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand-secondary);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: opacity 0.15s ease;
}

.sidebar__card-link:hover {
    opacity: 0.8;
}

/* Credits card */
.sidebar__card--credits {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

.sidebar__progress svg {
    display: block;
}

.sidebar__progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.375rem;
}

.sidebar__progress-bar {
    height: 100%;
    background-color: var(--progress-fill);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* User Profile */
.sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
    background-color: white;
}

.sidebar__user:hover {
    background-color: var(--nav-hover-bg);
}

.sidebar__user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--nav-hover-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--nav-text);
    flex-shrink: 0;
}

.sidebar__user-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.sidebar__user-avatar-image,
.sidebar__user-avatar-wrap .sidebar__user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.sidebar__user-avatar-image {
    display: block;
    object-fit: cover;
    border: 2px solid #d8d8d8;
    box-shadow: 0 0 0 1px #dfe6ee;
    background-color: #f3f6fa;
}

.sidebar__user-avatar-wrap .sidebar__user-avatar {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    box-shadow: 0 0 0 1px #dfe6ee;
}

.sidebar__user-status-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-color: #1fda84;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(31, 218, 132, 0.16);
}

.sidebar__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    transform: translateY(3px);
    
}

.sidebar__user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text);
    line-height: 1.2;
}

.sidebar__user-email {
    font-size: 11px;
    color: var(--section-title-color);
}

.sidebar__user-chevron {
    color: var(--section-title-color);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar__user-chevron--open {
    transform: rotate(180deg);
}

.sidebar__user-container {
    position: relative;
    width: 100%;
}

/* Profile Menu Dropdown */
.sidebar__profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px;
    z-index: 100;
}

.sidebar__profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--nav-text);
    cursor: pointer;
    transition: background-color 0.2s;
}

.sidebar__profile-menu-item:hover {
    background-color: var(--nav-hover-bg);
}

.sidebar__profile-menu-item svg {
    color: var(--section-title-color);
}

/* ==========================================================================
     Block: Dashboard Home (.dashboard-home)
     ========================================================================== */
.dashboard-home {
    padding: 3rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-home__greeting {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.dashboard-home__greeting-bold {
    font-weight: 700;
}

.dashboard-home__greeting-light {
    font-weight: 400;
}

.dashboard-home__actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.dashboard-home__content-grid {
    display: grid;
    grid-template-columns: calc((100% - 24px) * 0.609375) calc((100% - 24px) * 0.390625);
    gap: 24px;
    align-items: start;
}

.dashboard-home__column {
    display: grid;
    gap: 24px;
}

.dashboard-home__card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
}

.dashboard-home__card-header {
    padding: 1.125rem 1.5rem 1rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--text-dark);
    font-weight: 700;
}

@keyframes dashboard-home-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.dashboard-home__skeleton-line,
.dashboard-home__skeleton-avatar,
.dashboard-home__skeleton-icon-box,
.dashboard-home__skeleton-chevron,
.dashboard-home__skeleton-sign-icon,
.dashboard-home__skeleton-news-icon {
    background-color: var(--btn-home-bg);
    background-image: linear-gradient(90deg, #eef2f6 25%, #f8fafc 37%, #eef2f6 63%);
    background-size: 400% 100%;
    animation: dashboard-home-skeleton-shimmer 1.35s ease infinite;
}

.dashboard-home__skeleton-line {
    height: 10px;
    border-radius: 999px;
    width: 100%;
}

.dashboard-home__skeleton-line--w-25 { width: 25%; }
.dashboard-home__skeleton-line--w-35 { width: 35%; }
.dashboard-home__skeleton-line--w-40 { width: 40%; }
.dashboard-home__skeleton-line--w-45 { width: 45%; }
.dashboard-home__skeleton-line--w-50 { width: 50%; }
.dashboard-home__skeleton-line--w-55 { width: 55%; }
.dashboard-home__skeleton-line--w-60 { width: 60%; }
.dashboard-home__skeleton-line--w-70 { width: 70%; }
.dashboard-home__skeleton-line--w-75 { width: 75%; }
.dashboard-home__skeleton-line--w-80 { width: 80%; }
.dashboard-home__skeleton-line--w-90 { width: 90%; }
.dashboard-home__skeleton-line--w-full { width: 100%; }

.dashboard-home__skeleton-line--lg {
    height: 22px;
}

.dashboard-home__skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-home__skeleton-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dashboard-home__skeleton-chevron {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dashboard-home__skeleton-sign-icon {
    width: 44px;
    height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
}

.dashboard-home__skeleton-news-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.dashboard-home__action-points-list {
    list-style: none;
}

.dashboard-home__action-points-list--skeleton .dashboard-home__action-point-row {
    cursor: default;
}

.dashboard-home__action-points-list--skeleton .dashboard-home__action-point-row:hover::after {
    display: none;
}

.dashboard-home__action-points-list--skeleton .dashboard-home__action-point-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dashboard-home__action-point-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    position: relative;
    transition: background-color 0.2s ease;
}

.dashboard-home__action-point-row:hover {
    background-color: transparent;
    cursor: pointer;
}

.dashboard-home__action-point-row:hover::after {
    content: '';
    position: absolute;
    top: 0.50rem;
    bottom: 0.50rem;
    left: 1.5rem;
    right: 1.5rem;
    border-radius: 4px;
    background-color: var(--btn-home-bg);
    z-index: 0;
}

.dashboard-home__action-point-row+.dashboard-home__action-point-row {
    position: relative;
}

.dashboard-home__action-point-row+.dashboard-home__action-point-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background-color: var(--card-border);
    z-index: 2;
}

.dashboard-home__action-point-row>* {
    position: relative;
    z-index: 1;
}

.dashboard-home__action-point-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--btn-home-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-home__action-point-icon-box--alert {
    background-color: var(--error-color);
    /* #e53e3e */
}

.dashboard-home__action-point-icon-box--warning {
    background-color: #EBA800;
    /* Matching screenshot orange/yellow */
}

.dashboard-home__action-point-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--section-title-color);
}

.dashboard-home__action-point-icon-box--alert .dashboard-home__action-point-icon,
.dashboard-home__action-point-icon-box--warning .dashboard-home__action-point-icon {
    background-color: #ffffff;
}

.dashboard-home__action-point-icon--signing {
    mask-image: url(../img/dashboard_action/sign.svg);
    -webkit-mask-image: url(../img/dashboard_action/sign.svg);
}

.dashboard-home__action-point-icon--expiring {
    mask-image: url(../img/dashboard_action/hourglass.svg);
    -webkit-mask-image: url(../img/dashboard_action/hourglass.svg);
}

.dashboard-home__action-point-icon--alert {
    mask-image: url(../img/dashboard_action/alert.svg);
    -webkit-mask-image: url(../img/dashboard_action/alert.svg);
}

.dashboard-home__action-point-content {
    flex: 1;
    min-width: 0;
}

.dashboard-home__action-point-title {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: var(--text-dark);
}

.dashboard-home__action-point-subtitle {
    margin-top: 0.25rem;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--nav-text);
}

.dashboard-home__action-point-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 0.25rem;
    background-color: var(--section-title-color);
    mask-image: url(../img/chevron-right.svg);
    -webkit-mask-image: url(../img/chevron-right.svg);
}

/* ==========================================================================
     Dashboard Home: What's New (.dashboard-home__news)
   ========================================================================== */
.dashboard-home__card-header--with-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-home__card-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.dashboard-home__card-link:hover {
    opacity: 0.8;
}

.dashboard-home__card-link-chevron {
    width: 16px;
    height: 16px;
    background-color: var(--text-brand-secondary);
    mask-image: url(../img/chevron-right.svg);
    -webkit-mask-image: url(../img/chevron-right.svg);
    margin-left: 2px;
    transform: translateY(-2px);
}

.dashboard-home__news-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.dashboard-home__news-list--skeleton .dashboard-home__news-item {
    align-items: center;
}

.dashboard-home__news-list--skeleton .dashboard-home__news-content {
    flex: 1;
    min-width: 0;
    gap: 0.4rem;
}

.dashboard-home__news-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    position: relative;
}

.dashboard-home__news-item+.dashboard-home__news-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background-color: var(--card-border);
}

.dashboard-home__news-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: #FFF4E6;
    /* Light orange background */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-home__news-icon {
    width: 24px;
    height: 24px;
    background-color: var(--nav-active-color);
    /* Bright orange icon */
}

.dashboard-home__news-icon--featured {
    mask-image: url(../img/dashboard_news/featured.svg);
    -webkit-mask-image: url(../img/dashboard_news/featured.svg);
}

.dashboard-home__news-icon--speed {
    mask-image: url(../img/dashboard_news/speed.svg);
    -webkit-mask-image: url(../img/dashboard_news/speed.svg);
}

.dashboard-home__news-icon--users {
    mask-image: url(../img/dashboard_news/users.svg);
    -webkit-mask-image: url(../img/dashboard_news/users.svg);
}

.dashboard-home__news-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-home__news-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0;
    color: var(--text-dark);
}

.dashboard-home__news-desc {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* ==========================================================================
     Dashboard Home: To Sign (.dashboard-home__sign)
   ========================================================================== */
.dashboard-home__sign-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.dashboard-home__sign-list--skeleton .dashboard-home__sign-item {
    cursor: default;
}

.dashboard-home__sign-list--skeleton .dashboard-home__sign-item:hover {
    background-color: transparent;
}

.dashboard-home__sign-item {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dashboard-home__sign-item:hover {
    background-color: var(--subtle-bg);
}

.dashboard-home__sign-item+.dashboard-home__sign-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background-color: var(--card-border);
}

.dashboard-home__sign-icon-wrapper {
    flex-shrink: 0;
    width: 44px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-home__sign-icon {
    width: 44px;
    height: 48px;
    object-fit: contain;
}

.dashboard-home__sign-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-home__sign-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
    margin: 0;
}

.dashboard-home__sign-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}

.dashboard-home__sign-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.dashboard-home__sign-attachment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--nav-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.dashboard-home__sign-attachment-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.dashboard-home__sign-date {
    font-size: 0.875rem;
    color: var(--nav-text);
    min-width: 60px;
    text-align: right;
}

.dashboard-home__sign-chevron {
    width: 16px;
    height: 16px;
    background-color: var(--section-title-color);
    mask-image: url(../img/chevron-right.svg);
    -webkit-mask-image: url(../img/chevron-right.svg);
}

/* ==========================================================================
     Dashboard Home: Stats "Deze maand" (.dashboard-home__stats)
   ========================================================================== */
.dashboard-home__stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.dashboard-home__stats-grid--skeleton .dashboard-home__stat-box {
    min-height: 120px;
}

.dashboard-home__stat-box {
    background-color: var(--subtle-bg);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-home__stat-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.dashboard-home__stat-data {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-home__stat-data--ring {
    align-items: center;
}

.dashboard-home__stat-value-group {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.dashboard-home__stat-value {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-dark);
}

.dashboard-home__stat-unit {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
}

.dashboard-home__stat-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Custom Trend Icon */
.dashboard-home__stat-trend-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.dashboard-home__stat-trend--up {
    color: #22c55e;
}

.dashboard-home__stat-trend--down {
    color: #ef4444;
}

/* ChartJS Donut Wrapper */
.dashboard-home__stat-donut-wrapper {
    width: 38px;
    height: 38px;
    position: relative;
}

/* ==========================================================================
     Dashboard Home: Empty States (.dashboard-home__empty)
   ========================================================================== */
.dashboard-home__action-points-empty,
.dashboard-home__sign-empty {
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
}

.dashboard-home__action-points-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-color);
    margin-bottom: 1rem;
    background-image: url(../img/dashboard_action/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

.dashboard-home__action-points-empty-title,
.dashboard-home__sign-empty-title {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-dark);
}

.dashboard-home__action-points-empty-desc,
.dashboard-home__sign-empty-desc {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-light);
}

.dashboard-home__sign-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-color);
    margin-bottom: 1rem;
    position: relative;
}

.dashboard-home__sign-empty-icon::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--section-title-color);
    mask-image: url(../img/dashboard_sign/sign.svg);
    -webkit-mask-image: url(../img/dashboard_sign/sign.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.dashboard-home__card--placeholder {
    min-height: 250px;
}

.action-btn {
    display: flex;
    align-items: center;
    background-color: var(--btn-home-bg);
    border: 1px solid var(--btn-home-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    gap: 0.75rem;
}

.action-btn:hover:not(.action-btn--disabled) {
    border-color: var(--hover-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.action-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn--disabled .action-btn__icon {
    filter: grayscale(100%);
}

.action-btn__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.action-btn__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary);
    flex-grow: 1;
    line-height: 1.2;
}

.action-btn--disabled .action-btn__text {
    color: var(--nav-text);
}

.action-btn__chevron {
    width: 16px;
    height: 16px;
    background-color: var(--section-title-color);
    mask-image: url(../img/chevron-right.svg);
    -webkit-mask-image: url(../img/chevron-right.svg);
    flex-shrink: 0;
}

.action-btn__lock {
    width: 16px;
    height: 16px;
    background-color: var(--section-title-color);
    mask-image: url(../img/nav/lock.svg);
    -webkit-mask-image: url(../img/nav/lock.svg);
    flex-shrink: 0;
}

/* ==========================================================================
     Dashboard Home: Recent Activity (.dashboard-home__recent)
   ========================================================================== */
.dashboard-home__recent-content {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: opacity 0.2s ease;
}

.dashboard-home__recent-content--loading {
    opacity: 0.5;
    pointer-events: none;
}

.dashboard-home__recent-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.dashboard-home__recent-list--skeleton .dashboard-home__recent-item {
    align-items: center;
}

.dashboard-home__recent-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    align-items: flex-start;
    position: relative;
    border-bottom: 1px solid var(--card-border);
}

.dashboard-home__recent-item:last-child {
    border-bottom: none;
}

.dashboard-home__recent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dashboard-home__recent-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dashboard-home__recent-user {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
}

.dashboard-home__recent-name {
    font-weight: 600;
}

.dashboard-home__recent-action {
    color: var(--nav-text);
}

.dashboard-home__recent-customtext {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}

.dashboard-home__recent-time {
    font-size: 0.8rem;
    color: var(--section-title-color);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Pagination */
.dashboard-home__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--card-border);
}

.dashboard-home__pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dashboard-home__pagination-num {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--nav-text);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dashboard-home__pagination-num:hover:not(:disabled) {
    background-color: var(--hover-bg);
    color: var(--nav-active-color);
}

.dashboard-home__pagination-num--active {
    background-color: var(--bg-color);
    color: var(--text-dark);
    font-weight: 600;
}

.dashboard-home__pagination-num--dots {
    cursor: default;
    background: transparent !important;
    color: var(--section-title-color);
}

.dashboard-home__pagination-btn {
    background: none;
    border: 1px solid var(--card-border);
    padding: 0.5rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--nav-active-color);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dashboard-home__pagination-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.dashboard-home__pagination-btn:hover:not(:disabled) {
    background-color: var(--bg-color);
}

@media (max-width: 1200px) {
    .dashboard-home__content-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-home__actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-home__card-header {
        font-size: 1.125rem;
    }

    .dashboard-home__action-point-title {
        font-size: 0.95rem;
    }

    .dashboard-home__action-point-subtitle {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .dashboard-home {
        padding: 2rem;
    }

    .dashboard-home__actions {
        grid-template-columns: 1fr;
    }

    .dashboard-home__card-header {
        padding: 1rem;
    }

    .dashboard-home__action-point-row {
        padding: 0.875rem 1rem;
    }
}

/* ==========================================================================
     Developer Tools Overlay (.dev-overlay)
   ========================================================================== */
.dev-overlay {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
}

.dev-overlay__fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--text-dark);
    color: white;
    font-size: 1.5rem;
    border: none;
    box-shadow: var(--card-hover-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s;
}

.dev-overlay__fab:hover {
    transform: scale(1.05);
    background-color: var(--primary-color);
}

.dev-overlay__panel {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-hover-shadow);
    width: 260px;
    overflow: hidden;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-overlay__header {
    background-color: var(--bg-color);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
}

.dev-overlay__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.dev-overlay__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0 0.25rem;
}

.dev-overlay__close:hover {
    color: var(--error-color);
}

.dev-overlay__content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dev-overlay__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
    cursor: pointer;
}

.dev-overlay__label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.dev-overlay__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dev-overlay__field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nav-text);
}

.dev-overlay__select {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
    color: var(--text-light);
    font-size: 0.875rem;
    line-height: 1.2;
    padding: 0.45rem 0.55rem;
}

.dev-overlay__select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Data Sources section */
.dev-overlay__section-divider {
    border-top: 1px solid var(--card-border);
    margin: 0.25rem 0;
}

.dev-overlay__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dev-overlay__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dev-overlay__section-badge {
    font-size: 0.6875rem;
    color: var(--text-light);
    background-color: var(--bg-color);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-md);
}

.dev-overlay__source-bulk {
    display: flex;
    gap: 0.35rem;
}

.dev-overlay__source-bulk-btn {
    flex: 1;
    padding: 0.25rem 0;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    color: var(--text-light);
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.dev-overlay__source-bulk-btn:hover {
    background-color: var(--bg-color);
}

.dev-overlay__source-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.dev-overlay__source-label {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dev-overlay__source-toggle {
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--bg-color);
    color: var(--text-light);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 42px;
    text-align: center;
    transition: all 0.15s;
}

.dev-overlay__source-toggle--api {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ==========================================================================
     Shipments Page (.shipments)
   ========================================================================== */
.shipments {
    width: 100%;
    height: 100%;
    padding: 0 2rem 2rem;
    position: relative;
}

.shipments.shipments--split-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-bottom: 0;
    overflow: hidden;
}

/* ---------- Header ---------- */
.shipments__header {
    border-bottom: 1px solid var(--card-border);
    position: relative;
    overflow: visible;
}

.shipments__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 0;
}

.shipments__header-left,
.shipments__header-right {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* Count badge */
.shipments__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Search input */
.shipments__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--input-inactive-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 0 0.75rem;
    width: 322px;
    min-height: 36px;
}

.shipments__search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--nav-text);
    mask-image: url(../img/shipments_header/search-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/search-icon.svg);
}

.shipments__search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-dark);
    width: 100%;
    font-family: inherit;
    line-height: 1.2;
}

.shipments__search-input::placeholder {
    color: var(--nav-text);
}

.shipments__search-clear {
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    background-image: url(../img/shipments_header/close-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    opacity: 0.75;
    flex-shrink: 0;
}

.shipments__search-clear:hover {
    opacity: 1;
}

/* Header buttons */
.shipments__filters-btn,
.shipments__sort-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: color 0.15s;
}

.shipments__filters-btn:hover,
.shipments__sort-btn:hover {
    color: var(--nav-active-color);
}

.shipments__filters-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 28px;
    padding: 3px 0 0 0;
    border-radius: 6px;
    background-color: #f2d29e;
    color: #a74712;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}

.shipments__header-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.shipments__sort-anchor {
    position: relative;
}

.shipments__export-anchor {
    position: relative;
    line-height: 0.6;
}

.shipments__sort-popover {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    z-index: 40;
    width: 240px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-hover-shadow);
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.shipments__sort-option {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.shipments__sort-option:hover {
    background-color: var(--hover-bg);
}

.shipments__sort-option--active {
    background-color: var(--input-inactive-bg);
}

.shipments__sort-option-label {
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--text-dark);
}

.shipments__sort-option-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.shipments__icon-btn {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shipments__icon-btn:hover {
    background-color: var(--bg-color);
}

.shipments__icon-btn--active {
    background-color: var(--bg-color);
}

.shipments__header-icon-only {
    width: 16px;
    height: 16px;
    display: block;
}

.shipments__export-popover {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    z-index: 40;
    min-width: 240px;
    background-color: var(--surface-color);
    border: 1px solid #c6ced7;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.shipments__export-option {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 0.625rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    font-family: inherit;
    cursor: pointer;
}

.shipments__export-option:hover {
    background-color: var(--hover-bg);
}

.shipments__export-option-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-color: #8fa0b2;
}

.shipments__export-option-icon--overview {
    mask-image: url(../img/shipments_header/export-overview-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/export-overview-icon.svg);
}

.shipments__export-option-icon--print {
    mask-image: url(../img/shipments_header/print-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/print-icon.svg);
}

.shipments__export-option:hover .shipments__export-option-icon {
    background-color: var(--text-brand-secondary);
}

.shipments__export-option span {
    font-size: 0.875rem;
    line-height: 1;
    transform: translateY(1px);
}

.shipments__export-option span:nth-child(2) {
    transform: translateY(3px);
}

/* ---------- Filters Bar (Row 2) ---------- */

.shipments__filters-row-shell {
    max-height: 84px;
    transition: max-height 0.2s ease;
    overflow: visible;
    position: relative;
    z-index: 30;
}

.shipments__filters-row-shell--closed {
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.shipments__filters-bar {
    transition: padding 0.2s ease;
}

.shipments__filters-row-shell--closed .shipments__filters-bar {
    padding-top: 0;
    padding-bottom: 0;
}


.shipments__filters-left,
.shipments__filters-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.shipments__resizing-body {
    cursor: col-resize;
    user-select: none;
}

.shipments__filter-anchor {
    position: relative;
}

.shipments__filter-pill {
    display: flex;
    align-items: center;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.shipments__filter-pill-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.6rem 0.625rem;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}

.shipments__filter-pill-label {
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

.shipments__filter-pill-divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--card-border);
    flex-shrink: 0;
}

.shipments__filter-pill-value {
    color: var(--text-light);
    white-space: nowrap;
}

.shipments__filter-pill-caret {
    width: 10px;
    height: 10px;
    background-color: var(--text-light);
    mask-image: url(../img/shipments_header/chevron-up.svg);
    -webkit-mask-image: url(../img/shipments_header/chevron-up.svg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.shipments__filter-pill-caret--open {
    transform: rotate(180deg);
}

.shipments__filter-pill-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.88rem 0.85rem;
    cursor: pointer;
}

.shipments__filter-pill-remove:hover {
    background-color: var(--bg-color);
}

.shipments__filter-pill-remove-icon {
    width: 8px;
    height: 8px;
    background-color: var(--icon-muted);
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
}

.shipments__filter-add {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    font-family: inherit;
}

.shipments__filter-add span {
    color: var(--text-dark);
    font-weight: 600;
}

.shipments__filter-add-icon {
    width: 10px;
    height: 10px;
    background-color: var(--icon-muted);
    mask-image: url(../img/shipments_header/plus-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/plus-icon.svg);
    transform: translateY(-2px);
}

.shipments__filter-add:hover {
    color: var(--primary-color);
}

.shipments__filter-add--disabled {
    opacity: 0.45;
    cursor: default;
}

.shipments__filter-add-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 35;
    min-width: 180px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-hover-shadow);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.shipments__filter-add-option {
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.625rem;
    cursor: pointer;
}

.shipments__filter-add-option:hover {
    background-color: var(--hover-bg);
}

.shipments__filters-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
    transform: translateY(1px);
}

.shipments__filters-clear:hover {
    color: var(--error-color);
}

.shipments__filters-clear-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background-color: var(--icon-muted);
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
    transform: translateY(-2px);
}

.shipments__filters-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    background-color: var(--card-bg);
    color: var(--text-brand-secondary);
    border: 1px solid #d7dde4;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.5rem 0.8125rem;
    min-height: 32px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.shipments__filters-save:hover {
    background-color: var(--input-inactive-bg);
    border-color: var(--hover-border);

}

.shipments__filters-save-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: var(--text-brand-secondary);
    mask-image: url(../img/shipments_header/save-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/save-icon.svg);
}


.shipments__filters-save span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(2px);
}

.shipments__save-filters-anchor {
    position: relative;
}

.shipments__save-filters-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 45;
    width: 280px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-hover-shadow);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.shipments__save-filters-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.shipments__save-filters-input {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    color: var(--text-dark);
    font-family: inherit;
    background-color: var(--surface-color);
}

.shipments__save-filters-input:focus {
    outline: none;
    border-color: var(--hover-border);
}

.shipments__save-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.shipments__save-filters-btn {
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--card-border);
    padding: 0.4rem 0.625rem;
    cursor: pointer;
    font-family: inherit;
    background-color: var(--surface-color);
    color: var(--text-dark);
}

.shipments__save-filters-btn--ghost:hover {
    background-color: var(--hover-bg);
}

.shipments__save-filters-btn--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.shipments__save-filters-btn--primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.shipments__save-filters-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Main Layout (List vs Split View) ---------- */
.shipments__main {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
    align-items: flex-start;
}

.shipments--split-view .shipments__main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.shipments--split-view .shipments__list {
    flex: 0 0 45%;
    min-width: 300px;
    overflow-y: auto;
    height: 100%;
    padding-right: 0;
}

.shipments__split-pane {
    flex: 1;
    background-color: transparent;
    border: none;
    border-radius: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ---------- Draggable Divider ---------- */
.shipments__split-divider {
    flex: 0 0 5px;
    cursor: col-resize;
    position: relative;
    background: transparent;
    z-index: 10;
}

.shipments__split-divider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 1px;
    background-color: var(--card-border);
    transition: background-color 0.15s, width 0.15s;
}

.shipments__split-divider:hover::before {
    width: 3px;
    left: 1px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.shipments__split-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    gap: 0.5rem;
}

.shipments__empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.shipments__empty-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
    max-width: 320px;
    line-height: 1.4;
}

.shipments--split-view .shipments__mail-body {
    padding: 2rem;
    margin: 0;
    max-width: none;
}

/* ---------- Compact Row Layout ---------- */
.shipments__row.shipments__row--compact {
    display: flex;
    align-items: stretch;
    padding: 1rem;
    gap: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.12s ease;
}

.shipments__row.shipments__row--compact:last-child {
    border-bottom: none;
}

.shipments__row.shipments__row--compact.shipments__row--active {
    background-color: var(--input-inactive-bg);
}

.shipments__compact-icons {
    display: flex;
    align-items: flex-start;
    padding-top: 0.125rem;
    margin-right: 0.375rem;
}

.shipments__compact-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    /* Enable internal text truncation */
}

.shipments__compact-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    transform: translateY(2px);
}

.shipments__compact-subject {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    flex: 1;
}

.shipments__compact-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-dark);
    flex-shrink: 0;
}

.shipments__compact-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    transform: translateY(1px);
}

.shipments__compact-recipient {
    font-size: 0.8125rem;
    color: var(--text-light);
    flex: 1;
}

.shipments__compact-time {
    font-size: 0.75rem;
    color: var(--text-light);
    flex-shrink: 0;
}

.shipments__compact-attachments {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-light);
}

.shipments__compact-attachment-icon {
    width: 13px;
    height: 13px;
    background-color: var(--text-light);
    mask-image: url(../img/dashboard_sign/attachment.svg);
    -webkit-mask-image: url(../img/dashboard_sign/attachment.svg);
}

/* ---------- Listing ---------- */
.shipments__list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.shipments__loading {
    padding: 3rem;
    text-align: center;
    color: var(--nav-text);
}

/* Cross-sell (empty shipments) */
.shipments__crosssell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 2rem 3rem;
    max-width: 40rem;
    margin: 0 auto;
}

.shipments__crosssell-img {
    width: 100%;
    max-width: 34rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.shipments__crosssell-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.shipments__crosssell-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0 0 2rem;
    max-width: 32rem;
}

.shipments__crosssell-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shipments__crosssell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem 0.6rem;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.shipments__crosssell-btn--outline {
    background: #fff;
    color: var(--primary-color);
    border: 1.5px solid var(--card-border);
}

.shipments__crosssell-btn--outline:hover {
    border-color: var(--primary-color);
}

.shipments__crosssell-btn--primary {
    background: var(--primary-color);
    color: #fff;
    border: 1.5px solid var(--primary-color);
}

.shipments__crosssell-btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.shipments__row {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--card-border);
    gap: 0;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.shipments__row:last-child {
    border-bottom: none;
}

.shipments__row:hover {
    background-color: var(--hover-bg);
}

.shipments__row--active {
    background-color: var(--input-inactive-bg);
}

.shipments__cell {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
}

/* Recipient */
.shipments__cell--recipient {
    width: 220px;
    flex-shrink: 0;
}

.shipments__recipient {
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* Icons column */
.shipments__cell--icons {
    width: 36px;
    flex-shrink: 0;
    justify-content: center;
    align-self: flex-start;
    padding-right: 0px;
}

.shipments__icons-stack {
    display: grid;
    grid-template-rows: repeat(2, 16px);
    align-items: center;
    gap: 0.25rem;
    min-height: 36px;
    transform: translateY(2px);
}

.shipments__mail-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--text-dark);
    opacity: 1;
    transform: translateY(-1px);
}

.shipments__mail-icon--lock {
    mask-image: url(../img/shipments_listing/icon-lock.svg);
    -webkit-mask-image: url(../img/shipments_listing/icon-lock.svg);
}

.shipments__mail-icon--shield {
    mask-image: url(../img/shipments_listing/icon-shield.svg);
    -webkit-mask-image: url(../img/shipments_listing/icon-shield.svg);
}

.shipments__mail-icon--signage {
    mask-image: url(../img/shipments_listing/icon-signage.svg);
    -webkit-mask-image: url(../img/shipments_listing/icon-signage.svg);
}

.shipments__mail-icon--placeholder {
    visibility: hidden;
}

/* Subject */
.shipments__cell--subject {
    flex: 1;
    min-width: 0;
}

.shipments__subject-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shipments__subject-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}

.shipments__subject-sender {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Attachments */
.shipments__cell--attachments {
    width: 50px;
    flex-shrink: 0;
    justify-content: center;
    gap: 0.25rem;
}

.shipments__attachment-icon {
    width: 16px;
    height: 16px;
    background-color: var(--nav-text);
    mask-image: url(../img/dashboard_sign/attachment.svg);
    -webkit-mask-image: url(../img/dashboard_sign/attachment.svg);
}

.shipments__attachment-count {
    font-size: 0.8125rem;
    color: var(--nav-text);
}

/* Status */
.shipments__cell--status {
    width: 220px;
    flex-shrink: 0;
    align-items: flex-start;
}

.shipments__status-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.shipments__status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shipments__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transform: translateY(-1px);
}

.shipments__status-label {
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* Dot colors only — labels stay --text-dark */
.shipments__status-dot--transit {
    background-color: var(--status-transit);
}

.shipments__status-dot--delivered {
    background-color: var(--status-delivered);
}

.shipments__status-dot--expired {
    background-color: var(--status-expired);
}

.shipments__status-dot--viewed {
    background-color: var(--status-viewed);
}

.shipments__status-dot--busy {
    background-color: var(--status-busy);
}

.shipments__status-dot--completed {
    background-color: var(--status-completed);
}

.shipments__status-dot--failed {
    background-color: var(--status-failed);
}

/* Status subtitle (red error text under the status label) */
.shipments__status-sub {
    font-size: 0.8125rem;
    color: var(--text-light);
    padding-left: 1rem;
}

.shipments__status-sub--warning {
    color: var(--status-transit);
}

.shipments__status-sub--error {
    color: var(--error-color);
}

/* Date */
.shipments__cell--date {
    width: 170px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
}

.shipments__date-main {
    font-size: 0.875rem;
    color: var(--text-dark);
}

.shipments__date-sub {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.shipments__date-sub--warning {
    color: var(--status-transit);
}

.shipments__date-sub--error {
    color: var(--error-color);
}

/* Actions */
.shipments__cell--actions {
    width: 32px;
    flex-shrink: 0;
    justify-content: center;
}

.shipments__delete-btn {
    background: none;
    border: none;
    font-size: 1.125rem;
    color: var(--error-color);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s;
}

.shipments__delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* ---------- Mail Flyout ---------- */
.shipments__mail-flyout-layer {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.shipments__mail-flyout-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(13, 26, 42, 0.18);
    z-index: 45;
    animation: shipments-mail-fade-in 0.16s ease-out;
}

.shipments__mail-flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: min(680px, calc(100% - 2rem));
    height: 100vh;
    background-color: var(--surface-color);
    border-left: 1px solid var(--card-border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 22px rgba(15, 23, 42, 0.12);
    animation: shipments-mail-slide-in 0.16s ease-out;
}

.shipments__mail-flyout-layer--closing .shipments__mail-flyout-backdrop {
    animation: shipments-mail-fade-out 0.16s ease-in forwards;
}

.shipments__mail-flyout-layer--closing .shipments__mail-flyout {
    animation: shipments-mail-slide-out 0.16s ease-in forwards;
}

.shipments__mail-flyout-head {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--card-border);
}

.shipments__mail-collapse-btn,
.shipments__mail-close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.shipments__mail-collapse-btn:hover,
.shipments__mail-close-btn:hover {
    background-color: var(--hover-bg);
}

.shipments__mail-collapse-btn img {
    width: 12px;
    height: 12px;
    opacity: 0.75;
}

.shipments__mail-close-icon {
    width: 10px;
    height: 10px;
    background-color: var(--icon-muted);
    mask-image: url(../img/shipments_header/close-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/close-icon.svg);
}

.shipments__mail-body {
    padding: 1.75rem 2rem 2rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.shipments__mail-title {
    margin: 0;
    font-size: 1.625rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-dark);
}

.shipments__mail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
}

.shipments__mail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    color: var(--text-light);
}


.shipments__mail-meta-icon {
    width: 15px;
    height: 15px;
}

.shipments__mail-summary-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.shipments__mail-summary-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shipments__mail-summary-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--card-border);
}

.shipments__mail-summary-row:last-child {
    border-bottom: none;
}

.shipments__mail-summary-label {
    font-size: 0.9375rem;
    color: var(--text-light);
}

.shipments__mail-summary-value {
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.shipments__mail-summary-time {
    font-size: 0.9375rem;
    color: var(--text-light);
}

.shipments__mail-summary-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.shipments__mail-notice {
    border-radius: var(--radius-md);
    background-color: var(--hover-bg);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipments__mail-notice strong {
    font-size: 1.125rem;
    color: var(--text-dark);
}

.shipments__mail-notice p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--text-light);
}

.shipments__mail-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shipments__mail-section-head {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
}

.shipments__mail-section-head h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-dark);
}

.shipments__mail-section-caret {
    width: 13px;
    height: 13px;
    transition: transform 0.15s ease;
}

.shipments__mail-section-caret--closed {
    transform: rotate(-90deg);
}

.shipments__mail-logbook-tools {
    display: flex;
    justify-content: flex-end;
}

.shipments__mail-download-btn {
    border: 1px solid var(--card-border);
    background: var(--surface-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
}

.shipments__mail-download-btn img {
    width: 14px;
    height: 14px;
}

.shipments__mail-log-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.shipments__mail-log-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 0.75rem;
    align-items: start;
}

/* Timeline marker: stretches full row height so connector lines bridge the gap */
.shipments__mail-log-marker {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

/* Connector line: extends from below icon through the list gap to the next item */
.shipments__mail-log-item:not(:last-child) .shipments__mail-log-marker::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5px;
    top: 27px;
    bottom: -0.95rem;
    background-color: #D9E2EC;
    border-radius: 999px;
    z-index: 0;
}

/* Done segments get blue connector */
.shipments__mail-log-item--done:not(:last-child) .shipments__mail-log-marker::after {
    background-color: #0076D6;
}

/* Adjust connector start for the larger current icon */
.shipments__mail-log-item--current:not(:last-child) .shipments__mail-log-marker::after {
    top: 32px;
}

/* Adjust connector start for the smaller upcoming icon */
.shipments__mail-log-item--upcoming:not(:last-child) .shipments__mail-log-marker::after {
    top: 22px;
}

.shipments__mail-log-icon {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

.shipments__mail-log-icon--current {
    width: 32px;
    height: 32px;
}

.shipments__mail-log-icon--upcoming {
    width: 22px;
    height: 22px;
}

.shipments__mail-log-content {
    line-height: 1.2;;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transform: translateY(5px);
}

.shipments__mail-log-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.25;
}

.shipments__mail-log-item--current .shipments__mail-log-text {
    font-weight: 700;
    color: #0076D6;
}

.shipments__mail-log-sub {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.shipments__mail-log-time {
    font-size: 0.875rem;
    color: var(--text-light);
    white-space: nowrap;
    transform: translateY(4px);
}

.shipments__mail-attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shipments__mail-attachment-chip {
    border: 1px solid var(--card-border);
    background-color: var(--surface-color);
    border-radius: var(--radius-sm);
    min-width: 260px;
    padding: 0.35rem 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.shipments__mail-attachment-pdf {
    width: 22px;
    height: 18px;
}

.shipments__mail-attachment-name {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.shipments__mail-attachment-action {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.shipments__mail-attachment-action:hover {
    background-color: var(--hover-bg);
}

.shipments__mail-attachment-action img {
    width: 14px;
    height: 14px;
}

.shipments__mail-empty {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.shipments__mail-sign-list {
    border-top: 1px solid var(--card-border);
}

.shipments__mail-sign-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--card-border);
    min-height: 52px;
}

.shipments__mail-sign-index {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs-size);
    color: var(--text-dark);
    background-color: var(--bg-color);
}

.shipments__mail-sign-email {
    font-size: var(--text-sm-size);
    color: var(--text-dark);
}

.shipments__mail-sign-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs-size);
    color: var(--text-dark);
}

.shipments__mail-sign-state img {
    width: 14px;
    height: 14px;
}

@keyframes shipments-mail-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shipments-mail-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes shipments-mail-slide-in {
    from {
        transform: translateX(18px);
        opacity: 0.8;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes shipments-mail-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(18px);
        opacity: 0.85;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED DATE PICKER (dp__)
   Centralized calendar popover used by ShipmentsAll & Statistics.
   ═══════════════════════════════════════════════════════════════ */

.dp {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    width: fit-content;
    max-width: calc(100vw - 4rem);
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-hover-shadow);
    display: grid;
    grid-template-columns: 240px auto;
    overflow: hidden;
}

/* ── Presets sidebar ────────────────────────────────────────── */
.dp__presets {
    border-right: 1px solid var(--card-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 560px;
    overflow-y: auto;
}

.dp__preset {
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-dark);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    height: 42px;
}

.dp__preset:hover {
    background-color: var(--hover-bg);
}

.dp__preset--active {
    background-color: var(--bg-color);
}

/* ── Calendar body ──────────────────────────────────────────── */
.dp__main {
    display: flex;
    flex-direction: column;
}

.dp__calendar-host {
    padding: 1rem;
    position: relative;
}

.dp__calendar-host::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--card-border);
    transform: translateX(-0.5px);
    pointer-events: none;
}

.dp__grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.dp__month {
    padding-right: 0.875rem;
}

.dp__month--right {
    padding-left: 1rem;
}

.dp__month-header {
    height: 52px;
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    margin-bottom: 20px;
}

.dp__month-title {
    font-size: 1.0625rem;
    color: var(--text-dark);
    font-weight: 600;
    text-align: center;
}

.dp__nav {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp__nav-icon {
    width: 16px;
    height: 16px;
    background-color: var(--text-light);
    mask-image: url(../img/shipments_header/right-chevron.svg);
    -webkit-mask-image: url(../img/shipments_header/right-chevron.svg);
}

.dp__nav-icon--prev {
    transform: rotate(180deg);
}

.dp__nav-spacer {
    width: 24px;
    height: 24px;
}

/* ── Weekday labels ─────────────────────────────────────────── */
.dp__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.25rem;
}

.dp__weekdays span {
    color: var(--text-dark);
    font-weight: 600;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Day cells ──────────────────────────────────────────────── */
.dp__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: hidden;
}

.dp__day {
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 6px;
    margin: 2px 0;
    height: 44px;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}

.dp__day--empty {
    cursor: default;
}

.dp__day:hover:not(.dp__day--empty):not(.dp__day--in-range):not(.dp__day--start):not(.dp__day--end),
.dp__day:focus:not(.dp__day--empty):not(.dp__day--in-range):not(.dp__day--start):not(.dp__day--end) {
    background: var(--bg-color);
    border-radius: 6px;
}

.dp__day--in-range {
    background: #FFF8EC;
    color: var(--text-dark);
    border-radius: 0;
    z-index: 1;
}

.dp__day--in-range:nth-child(7n+1) {
    border-radius: 6px 0 0 6px;
}

.dp__day--in-range:nth-child(7n) {
    border-radius: 0 6px 6px 0;
}

.dp__day--in-range:hover,
.dp__day--in-range:focus {
    background: #FFEFD3;
    border-radius: 6px;
    box-shadow: none;
}

.dp__day--start,
.dp__day--end {
    background: #FFDBA5;
    color: #A1370B;
    border-radius: 6px;
    z-index: 2;
}

.dp__day--start {
    border-radius: 6px 0 0 6px;
}

.dp__day--end {
    border-radius: 0 6px 6px 0;
}

.dp__day--today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-transit);
}

/* ── Footer ─────────────────────────────────────────────────── */
.dp__footer {
    border-top: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.dp__values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 100px;
}

.dp__value {
    min-width: 135px;
    padding: 0.5rem 0.8rem 0.4rem 0.8rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-dark);
    background-color: var(--input-inactive-bg);
    margin: 0;
}

.dp__separator {
    color: var(--text-light);
}

.dp__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dp__btn {
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    padding: 0.7rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.dp__btn--ghost {
    background-color: var(--surface-color);
    color: var(--text-brand-secondary);
}

.dp__btn--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
}

/* ═══════════════════════════════════════════════════════════════
   END SHARED DATE PICKER
   ═══════════════════════════════════════════════════════════════ */

.shipments__date-picker {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    width: fit-content;
    max-width: calc(100vw - 4rem);
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-hover-shadow);
    display: grid;
    grid-template-columns: 240px auto;
    overflow: hidden;
}

.shipments__date-picker-presets {
    border-right: 1px solid var(--card-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 560px;
    overflow-y: auto;
}

.shipments__date-picker-preset {
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-dark);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    height: 42px;
}

.shipments__date-picker-preset:hover {
    background-color: var(--hover-bg);
}

.shipments__date-picker-preset--active {
    background-color: var(--bg-color);
}

.shipments__date-picker-main {
    display: flex;
    flex-direction: column;
}

.shipments__date-picker-calendar-host {
    padding: 1rem;
    position: relative;
}

.shipments__date-picker-calendar-host::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--card-border);
    transform: translateX(-0.5px);
    pointer-events: none;
}

.shipments__date-picker-input {
    position: absolute;
    width: 0;
    height: 0;
    border: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.shipments__calendar-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.shipments__calendar-month {
    padding-right: 0.875rem;
}

.shipments__calendar-month--right {
    padding-left: 1rem;
}

.shipments__calendar-month-header {
    height: 52px;
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    margin-bottom: 20px;
}

.shipments__calendar-month-title {
    font-size: 1.0625rem;
    color: var(--text-dark);
    font-weight: 600;
    text-align: center;
}

.shipments__calendar-nav {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipments__calendar-nav-icon {
    width: 16px;
    height: 16px;
    background-color: var(--text-light);
    mask-image: url(../img/shipments_header/right-chevron.svg);
    -webkit-mask-image: url(../img/shipments_header/right-chevron.svg);
}

.shipments__calendar-nav-icon--prev {
    transform: rotate(180deg);
}

.shipments__calendar-nav-spacer {
    width: 24px;
    height: 24px;
}

.shipments__calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.25rem;
}

.shipments__calendar-weekdays span {
    color: var(--text-dark);
    font-weight: 600;
    text-align: center;
    font-size: 0.875rem;
}

.shipments__calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: hidden;
}

.shipments__calendar-day {
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 6px;
    margin: 2px 0;
    height: 44px;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}

.shipments__calendar-day--empty {
    cursor: default;
}

.shipments__calendar-day:hover:not(.shipments__calendar-day--empty):not(.shipments__calendar-day--in-range):not(.shipments__calendar-day--start):not(.shipments__calendar-day--end),
.shipments__calendar-day:focus:not(.shipments__calendar-day--empty):not(.shipments__calendar-day--in-range):not(.shipments__calendar-day--start):not(.shipments__calendar-day--end) {
    background: var(--bg-color);
    border-radius: 6px;
}

.shipments__calendar-day--in-range {
    background: #FFF8EC;
    color: var(--text-dark);
    border-radius: 0;
    z-index: 1;
}

.shipments__calendar-day--in-range:nth-child(7n+1) {
    border-radius: 6px 0 0 6px;
}

.shipments__calendar-day--in-range:nth-child(7n) {
    border-radius: 0 6px 6px 0;
}

.shipments__calendar-day--in-range:hover,
.shipments__calendar-day--in-range:focus {
    background: #FFEFD3;
    border-radius: 6px;
    box-shadow: none;
}

.shipments__calendar-day--start,
.shipments__calendar-day--end {
    background: #FFDBA5;
    color: #A1370B;
    border-radius: 6px;
    z-index: 2;
}

.shipments__calendar-day--start {
    border-radius: 6px 0 0 6px;
}

.shipments__calendar-day--end {
    border-radius: 0 6px 6px 0;
}

.shipments__calendar-day--today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-transit);
}

.shipments__date-picker-footer {
    border-top: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.shipments__date-picker-values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 100px;
}

.shipments__date-picker-value {
    min-width: 135px;
    padding: 0.5rem 0.8rem 0.4rem 0.8rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-dark);
    background-color: var(--input-inactive-bg);
    margin: 0;
}

.shipments__date-picker-separator {
    color: var(--text-light);
}

.shipments__date-picker-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.shipments__date-picker-btn {
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    padding: 0.7rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.shipments__date-picker-btn--ghost {
    background-color: var(--surface-color);
    color: var(--text-brand-secondary);
}

.shipments__date-picker-btn--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
}

.shipments__status-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 32;
    width: 100%;
    min-width: 275px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-hover-shadow);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shipments__status-option {
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-dark);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
}

.shipments__status-option:hover {
    background-color: var(--hover-bg);
}

.shipments__status-option--active {
    background-color: var(--bg-color);
}

.shipments__status-option-label {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--text-dark);
}

.shipments__status-option-check,
.shipments__type-option-check {
    width: 16px;
    height: 16px;
    background-color: var(--text-dark);
    mask-image: url(../img/shipments_header/check-icon.svg);
    -webkit-mask-image: url(../img/shipments_header/check-icon.svg);
    flex-shrink: 0;
}

.shipments__text-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 34;
    min-width: 420px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-hover-shadow);
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipments__text-popover-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.shipments__text-popover-input {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background-color: var(--input-inactive-bg);
    color: var(--text-light);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    outline: none;
    font-family: inherit;
}

.shipments__text-popover-input:focus {
    border-color: var(--primary-color);
}

.shipments__type-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 34;
    min-width: 300px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-hover-shadow);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shipments__type-option {
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-dark);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}

.shipments__type-option:hover {
    background-color: var(--hover-bg);
}

.shipments__type-option--active {
    background-color: var(--bg-color);
}

.shipments__type-option-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* Shared with .shipments__status-option-check via grouped selector above */

.shipments__attachment-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 33;
    min-width: 325px;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-hover-shadow);
    overflow: hidden;
}

.shipments__attachment-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
}

.shipments__attachment-switch {
    width: 44px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background-color: var(--input-border);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.shipments__attachment-switch--active {
    background-color: var(--status-delivered);
    justify-content: flex-end;
}

.shipments__attachment-switch-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
}

.shipments__attachment-toggle-label {
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-light);
}

.shipments__attachment-advanced {
    border-top: 1px solid var(--card-border);
    padding: 1rem;
}

.shipments__attachment-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.shipments__attachment-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipments__attachment-input-label {
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-light);
}

.shipments__attachment-input {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.875rem 1rem;
    font-family: inherit;
    outline: none;
}

.shipments__attachment-input:focus {
    border-color: var(--primary-color);
}

.shipments__attachment-slider {
    position: relative;
    height: 24px;
    margin-top: 1rem;
}

.shipments__attachment-slider-track,
.shipments__attachment-slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    border-radius: 999px;
}

.shipments__attachment-slider-track {
    left: 0;
    right: 0;
    background-color: var(--input-border);
}

.shipments__attachment-slider-range {
    background-color: var(--primary-color);
    left: 0;
    width: 0;
}

.dashboard-home__chart-canvas {
    width: 100%;
    height: 100%;
}

.shipments__attachment-slider-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.shipments__attachment-slider-input--min {
    z-index: 2;
}

.shipments__attachment-slider-input--max {
    z-index: 3;
}

.shipments__attachment-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    background-color: var(--surface-color);
    cursor: pointer;
    pointer-events: auto;
}

.shipments__attachment-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    background-color: var(--surface-color);
    cursor: pointer;
    pointer-events: auto;
}

.shipments__attachment-slider-input::-webkit-slider-runnable-track {
    background: transparent;
}

.shipments__attachment-slider-input::-moz-range-track {
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Block: Statistics Page (.statistics)
   ═══════════════════════════════════════════════════════════════════════════ */

.statistics {
    padding: 2rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.statistics__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.statistics__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.statistics__header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.statistics__date-anchor {
    position: relative;
}

.statistics__date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    cursor: pointer;
    font-family: var(--font-family);
}

.statistics__date-anchor .dp {
    right: 0;
    left: auto;
}

.statistics__date-chevron {
    width: 14px;
    height: 14px;
    mask-image: url('../img/shipments_mail/chevron-down-icon.svg');
    -webkit-mask-image: url('../img/shipments_mail/chevron-down-icon.svg');
    background-color: var(--text-light);
}

.statistics__export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: #fff;
    font-size: var(--text-sm-size);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.15s ease;
}

.statistics__export-btn:hover {
    background: var(--primary-hover);
}

.statistics__export-icon {
    width: 16px;
    height: 16px;
    mask-image: url('../img/shipments_header/export-icon.svg');
    -webkit-mask-image: url('../img/shipments_header/export-icon.svg');
    background-color: #fff;
}

/* ── Loading Skeleton ───────────────────────────────────────────────────── */

.statistics__loading {
    display: grid;
    gap: 1.25rem;
}

.statistics__skeleton {
    background: linear-gradient(90deg, var(--bg-color) 25%, #e8ecf1 50%, var(--bg-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-lg);
}

/* ── KPI Cards ──────────────────────────────────────────────────────────── */

.statistics__kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.statistics__kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--card-shadow);
}

.statistics__kpi-label {
    display: block;
    font-size: var(--text-sm-size);
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.statistics__kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.statistics__kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.statistics__kpi-unit {
    font-size: var(--text-sm-size);
    color: var(--text-light);
}

.statistics__trend {
    font-size: var(--text-sm-size);
    font-weight: 600;
    margin-left: auto;
}

.statistics__trend--up {
    color: var(--success-color);
}

.statistics__trend--down {
    color: var(--error-color);
}

/* ── Line Chart Card ────────────────────────────────────────────────────── */

.statistics__chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 1.25rem;
}

.statistics__chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.statistics__chart-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.statistics__chart-legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.statistics__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs-size);
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}
.statistics__legend-item--hidden {
    opacity: 0.35;
}

.statistics__legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.statistics__legend-dot--totaal       { background: var(--stat-total-dot); }
.statistics__legend-dot--aangetekend  { background: var(--stat-registered-dot); }
.statistics__legend-dot--beveiligd    { background: var(--stat-secured-dot); }
.statistics__legend-dot--ondertekend  { background: var(--stat-signed-dot); }
.statistics__legend-dot--grote        { background: var(--stat-large-files-dot); }

.statistics__chart-body {
    position: relative;
    height: 280px;
}

.statistics__line-canvas {
    width: 100%;
    height: 100%;
}

/*
 * ── Custom Chart Tooltip ──────────────────────────────────────────────────
 *
 * This tooltip replaces Chart.js's built-in canvas tooltip with a plain
 * HTML element so we have full CSS control. The DOM is created by the
 * `externalTooltip` callback inside ShipmentsLineChart (Statistics.js).
 *
 * DOM structure produced by JS:
 *
 *   div.statistics__tooltip
 *     div.statistics__tooltip-title      → "22 november vs 22 oktober"
 *     table.statistics__tooltip-table
 *       tr  (repeated per series)
 *         td > span.statistics__tooltip-dot    → colored circle
 *         td.statistics__tooltip-label         → series name
 *         td.statistics__tooltip-value         → numeric value
 *         td.statistics__tooltip-trend         → arrow + percentage
 *
 * Quick-reference for common tweaks:
 *   • Card look       → .statistics__tooltip  (background, border, shadow, radius)
 *   • Title style     → .statistics__tooltip-title  (font, color, spacing)
 *   • Dot size/shape  → .statistics__tooltip-dot  (width, height, border-radius)
 *   • Label color     → .statistics__tooltip-label
 *   • Value weight    → .statistics__tooltip-value
 *   • Trend colors    → .statistics__tooltip-trend--up / --down
 *   • Row spacing     → .statistics__tooltip-table td  (padding)
 *   • Tooltip width   → .statistics__tooltip  (min-width)
 *   • Animation       → .statistics__tooltip  (transition)
 */

.statistics__tooltip {
    position: absolute;
    pointer-events: none;
    background: #fff;
    border: 1px solid var(--card-border, #E5E7EB);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: var(--text-xs-size, 12px);
    z-index: 10;
    min-width: 210px;
    transition: opacity 0.15s ease, left 0.1s ease, top 0.1s ease;
}
.statistics__tooltip--hidden { opacity: 0; }

.statistics__tooltip-title {
    font-weight: 600;
    color: var(--text-dark, #111827);
    margin-bottom: 0.5rem;
    font-size: var(--text-sm-size, 13px);
    white-space: nowrap;
}

.statistics__tooltip-table {
    width: 100%;
    border-collapse: collapse;
}

.statistics__tooltip-table td {
    padding: 0.15rem 0;
    vertical-align: middle;
}

.statistics__tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.statistics__tooltip-dot--totaal         { background: var(--stat-total-dot); }
.statistics__tooltip-dot--aangetekend    { background: var(--stat-registered-dot); }
.statistics__tooltip-dot--beveiligd      { background: var(--stat-secured-dot); }
.statistics__tooltip-dot--ondertekend    { background: var(--stat-signed-dot); }
.statistics__tooltip-dot--grotebestanden { background: var(--stat-large-files-dot); }

.statistics__tooltip-label {
    color: var(--text-muted, #6B7280);
    padding-left: 0.5rem;
    padding-right: 1rem;
}

.statistics__tooltip-value {
    font-weight: 600;
    color: var(--text-dark, #111827);
    text-align: right;
    padding-right: 0.75rem;
}

.statistics__tooltip-trend {
    white-space: nowrap;
    font-weight: 500;
    text-align: right;
}
.statistics__tooltip-trend--up { color: #16a34a; }
.statistics__tooltip-trend--down { color: #dc2626; }

/* ── Middle Row (Devices / Security / Senders) ──────────────────────────── */

.statistics__middle-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.statistics__card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.statistics__card-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

/* ── Donut shared layout ────────────────────────────────────────────────── */

.statistics__donut-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.statistics__donut-container {
    position: relative;
    width: 140px;
    height: 140px;
}

.statistics__donut-canvas {
    width: 100%;
    height: 100%;
}

.statistics__donut-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    pointer-events: none;
    background-color: var(--icon-muted);
}

.statistics__icon--devices {
    mask-image: url('../img/statistics/phone-icon.svg');
    -webkit-mask-image: url('../img/statistics/phone-icon.svg');
}

.statistics__icon--security {
    mask-image: url('../img/statistics/verified-icon.svg');
    -webkit-mask-image: url('../img/statistics/verified-icon.svg');
}

.statistics__icon--mail {
    mask-image: url('../img/statistics/mail-icon.svg');
    -webkit-mask-image: url('../img/statistics/mail-icon.svg');
}

.statistics__donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.statistics__donut-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
}

.statistics__donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Device legend colors */
.statistics__donut-legend-dot--desktop { background: var(--stat-devices-desktop); }
.statistics__donut-legend-dot--tablet  { background: var(--stat-devices-tablet); }
.statistics__donut-legend-dot--phone   { background: var(--stat-devices-mobile); }

/* Security legend colors */
.statistics__donut-legend-dot--direct { background: var(--stat-security-direct); }
.statistics__donut-legend-dot--twofa  { background: var(--stat-security-with2fa); }
.statistics__donut-legend-dot--no2fa  { background: var(--stat-neutral); }

/* Open ratio legend colors */
.statistics__donut-legend-dot--opened     { background: var(--stat-open-ratio); }
.statistics__donut-legend-dot--not-opened { background: var(--stat-neutral); border: 1px solid var(--card-border); }

.statistics__donut-legend-label {
    flex: 1;
}

.statistics__donut-legend-value {
    color: var(--text-light);
    font-size: var(--text-xs-size);
    text-align: right;
    white-space: nowrap;
}

/* ── Top Senders ────────────────────────────────────────────────────────── */

.statistics__card--senders {
    display: flex;
    flex-direction: column;
}

.statistics__senders-subtitle {
    font-size: var(--text-xs-size);
    color: var(--text-light);
    margin: -0.5rem 0 0.75rem;
    line-height: 1.4;
}

.statistics__senders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.statistics__senders-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--bg-color);
    font-size: var(--text-sm-size);
}

.statistics__senders-row:last-child {
    border-bottom: none;
}

.statistics__senders-rank {
    width: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--text-light);
    flex-shrink: 0;
}

.statistics__senders-email {
    flex: 1;
    min-width: 0;
    color: var(--text-dark);
}

.statistics__senders-count {
    font-weight: 700;
    color: var(--text-dark);
    flex-shrink: 0;
}

/* ── Bottom Row (Open Ratio / Statuses) ─────────────────────────────────── */

.statistics__bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* ── Statuses ───────────────────────────────────────────────────────────── */

.statistics__card--statuses {
    display: flex;
    flex-direction: column;
}

.statistics__statuses-subtitle {
    font-size: var(--text-xs-size);
    color: var(--text-light);
    margin: -0.5rem 0 1rem;
}

.statistics__statuses-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.statistics__status-row {
    display: flex;
    flex-direction: column;
}

.statistics__status-bar-track {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    background: var(--stat-neutral);
    border-radius: var(--radius-xs);
}

.statistics__status-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-width: 60px;
    transition: width 0.3s ease;
    background-color: var(--stat-bar-fill);
}

.statistics__status-bar-label {
    color: var(--text-dark);
    font-size: var(--text-sm-size);
    font-weight: 600;
    white-space: nowrap;
}

.statistics__status-bar-count {
    position: absolute;
    right: 0.75rem;
    font-size: var(--text-sm-size);
    font-weight: 700;
    color: var(--text-dark);
}

.statistics__status-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.statistics__status-inline-label {
    font-size: var(--text-sm-size);
    color: var(--text-light);
}

/* ═════════════════════════════════════════════════════════════════════
   Block: Settings Page (.settings)
   ═════════════════════════════════════════════════════════════════════ */

.settings {
    padding: 2rem 2.5rem;
    max-width: 1200px;
}

.settings__title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 1.25rem 0;
}

/* ── Tab bar ─────────────────────────────────────────────────── */

.settings__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    margin-bottom: 2rem;
}

.settings__tab {
    padding: 0.625rem 1rem;
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--text-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.settings__tab:hover {
    color: var(--text-dark);
}

.settings__tab--active {
    color: var(--primary-color, #2563EB);
    border-bottom-color: var(--primary-color, #2563EB);
    font-weight: 600;
}

.settings__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--notification-count-bg-blue);
    color: var(--primary-color);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Content area ────────────────────────────────────────────── */

.settings__content {
    min-height: 300px;
}

.settings__loading {
    padding: 3rem 0;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm-size);
}

.settings__placeholder {
    padding: 3rem 0;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm-size);
}

/* ── Overview layout ─────────────────────────────────────────── */

.settings__overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── Shared card ─────────────────────────────────────────────── */

.settings__card {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.settings__card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── License Requests card ───────────────────────────────────── */

.settings__request-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings__request-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color, #E2E8F0);
}

.settings__request-row:first-child {
    border-top: none;
}

.settings__request-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-color, #EEF2F6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings__request-initials {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.settings__request-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.settings__request-email {
    font-size: var(--text-sm-size);
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings__request-services {
    font-size: 0.75rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings__request-allow {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color, #2563EB);
    font-size: var(--text-sm-size);
    font-weight: 500;
    white-space: nowrap;
    padding: 0;
}

.settings__request-allow:hover {
    text-decoration: underline;
}

.settings__allow-chevron {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    mask-image: url('../img/settings/right_chevron.svg');
    -webkit-mask-image: url('../img/settings/right_chevron.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text-light);
}

/* ── My Licenses card ────────────────────────────────────────── */

.settings__licenses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.settings__licenses-header .settings__card-title {
    margin-bottom: 0;
}

.settings__licenses-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-xs);
    background: var(--bg-color, #EEF2F6);
    color: var(--text-dark);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.settings__manage-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color, #2563EB);
    font-size: var(--text-sm-size);
    font-weight: 500;
    padding: 0;
}

.settings__manage-link:hover {
    text-decoration: underline;
}

.settings__manage-chevron {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    mask-image: url('../img/settings/right_chevron.svg');
    -webkit-mask-image: url('../img/settings/right_chevron.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--primary-color, #2563EB);
}

.settings__license-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings__license-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color, #E2E8F0);
}

.settings__license-row:first-child {
    border-top: none;
}

.settings__license-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    object-fit: contain;
}

.settings__license-label {
    flex: 1;
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--text-dark);
}

.settings__license-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem 0;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color, #E2E8F0);
    background: var(--surface-color, #fff);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}

/* ── Empty state (no license requests) ───────────────────────── */

.settings__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.5rem;
}

.settings__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--bg-color, #EEF2F6);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.settings__empty-icon::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    mask-image: url('../img/settings/ppl_icon.svg');
    -webkit-mask-image: url('../img/settings/ppl_icon.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--text-light);
}

.settings__empty-title {
    font-size: var(--text-sm-size);
    font-weight: 600;
    color: var(--text-dark);
}

.settings__empty-desc {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* ── License review modal ────────────────────────────────────── */

.settings__modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(15, 26, 38, 0.34);
}

.settings__modal {
    width: min(480px, 100%);
    padding: 1.5rem;
    border: 1px solid var(--card-border, #E2E8F0);
    border-radius: 18px;
    background-color: var(--surface-color, #fff);
    box-shadow: 0 20px 44px rgba(15, 26, 38, 0.16);
}

.settings__modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.settings__modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
}

.settings__modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-light);
    line-height: 1;
}

.settings__modal-close:hover {
    color: var(--text-dark);
}

.settings__modal-desc {
    margin: 0 0 1.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-light);
}

.settings__modal-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
}

.settings__modal-email {
    font-size: var(--text-sm-size);
    font-weight: 600;
    color: var(--text-dark);
}

.settings__modal-warning {
    background-color: var(--bg-color, #EEF2F6);
    border-radius: 0.5rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
}

.settings__modal-warning-title {
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
}

.settings__modal-warning-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-light);
}

.settings__modal-actions {
    display: flex;
    gap: 0.75rem;
}

.settings__modal-btn {
    flex: 1 1 0;
    min-height: 46px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.settings__modal-btn--deny {
    background-color: #fdf2f2;
    border-color: #fdf2f2;
    color: #d64545;
}

.settings__modal-btn--deny:hover {
    background-color: #fae3e3;
    border-color: #fae3e3;
}

.settings__modal-btn--allow {
    background-color: var(--primary-color, #2563EB);
    border-color: var(--primary-color, #2563EB);
    color: #fff;
}

.settings__modal-btn--allow:hover {
    opacity: 0.9;
}

/* ═════════════════════════════════════════════════════════════════════
   Block: Settings Users Tab (.settings-users)
   ═════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────────── */

.settings-users__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.settings-users__toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-users__search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.settings-users__search-icon {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    mask-image: url('../img/nav/search.svg');
    -webkit-mask-image: url('../img/nav/search.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text-light);
    pointer-events: none;
}

.settings-users__search {
    width: 220px;
    padding: 0.7rem 0.75rem 0.7rem 2.25rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    background: var(--surface-color, #fff);
    outline: none;
}

.settings-users__search:focus {
    border-color: var(--primary-color, #2563EB);
}

.settings-users__search::placeholder {
    color: var(--text-light);
}

.settings-users__role-wrapper {
    position: relative;
}

.settings-users__role-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--text-dark);
    background: var(--surface-color, #fff);
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

.settings-users__role-trigger:focus-visible {
    border-color: var(--primary-color, #2563EB);
}

.settings-users__role-label {
    flex: 1;
    min-width: 0;
}

.settings-users__role-chevron {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    mask-image: url('../img/settings/right_chevron.svg');
    -webkit-mask-image: url('../img/settings/right_chevron.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text-light);
    transform: rotate(90deg) translateX(1px);
    transition: transform 0.2s ease;
}

.settings-users__role-chevron--open {
    transform: rotate(-90deg) translateX(3px);
}

.settings-users__role-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 125px;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.08);
    z-index: 5;
}

.settings-users__role-option {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
}

.settings-users__role-option:hover {
    background-color: #f8fafc;
}

.settings-users__role-option--active {
    background-color: #f5f8fc;
    font-weight: 600;
}

.settings-users__add-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--primary-color, #2563EB);
    color: #fff;
    font-size: var(--text-sm-size);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.settings-users__add-btn:hover {
    opacity: 0.9;
}

.settings-users__add-icon {
    display: inline-block;
    width: 9.33px;
    height: 9.33px;
    mask-image: url('../img/settings/plus_icon.svg');
    -webkit-mask-image: url('../img/settings/plus_icon.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: #fff;
}

.settings-users__add-label {
    transform: translateY(1px);
}

/* ── Table ───────────────────────────────────────────────────── */

.settings-users__table-wrap {
    overflow: hidden;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
}

.settings-users__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.settings-users__th {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-light);
    text-align: left;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    white-space: nowrap;
    user-select: none;
}

.settings-users__th--name {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.settings-users__th--services {
    width: 7.5rem;
}

.settings-users__th--action {
    width: 3.5rem;
}

.settings-users__sort-arrow {
    display: block;
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    mask-image: url('../img/settings/sort_arrow.svg');
    -webkit-mask-image: url('../img/settings/sort_arrow.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--icon-muted);
    transition: transform 0.15s;
    margin-left: 3px;
}

.settings-users__sort-arrow--desc {
    transform: rotate(180deg) translateY(2px);
}

.settings-users__row {
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.settings-users__row:hover {
    background-color: var(--bg-color, #EEF2F6);
}

.settings-users__td {
    padding: 0.65rem 0.75rem;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-users__td--name {
    overflow: visible;
}

.settings-users__user-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.settings-users__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bg-color, #EEF2F6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-users__avatar-initials {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.settings-users__avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.settings-users__name {
    font-weight: 500;
    color: var(--text-dark);
}

.settings-users__td--services {
    vertical-align: middle;
    overflow: visible;
}

.settings-users__td--services .settings-users__svc-icon {
    vertical-align: middle;
    margin-right: 0.5rem;
}

.settings-users__td--services .settings-users__svc-icon:last-child {
    margin-right: 0;
}

.settings-users__svc-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--text-light);
    flex-shrink: 0;
}

.settings-users__svc-icon--registered {
    mask-image: url('../img/settings/registered_icon.svg');
    -webkit-mask-image: url('../img/settings/registered_icon.svg');
}

.settings-users__svc-icon--secured {
    mask-image: url('../img/settings/secure_icon.svg');
    -webkit-mask-image: url('../img/settings/secure_icon.svg');
}

.settings-users__svc-icon--signing {
    mask-image: url('../img/settings/signing_icon.svg');
    -webkit-mask-image: url('../img/settings/signing_icon.svg');
}

.settings-users__svc-icon--large_files {
    mask-image: url('../img/settings/large_files_icon.svg');
    -webkit-mask-image: url('../img/settings/large_files_icon.svg');
}

.settings-users__svc-icon--disabled {
    opacity: 0;
    pointer-events: none;
}

.settings-users__td--action {
    text-align: center;
}

.settings-users__row-chevron {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    mask-image: url('../img/settings/right_chevron.svg');
    -webkit-mask-image: url('../img/settings/right_chevron.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--icon-muted);
}

.settings-users__loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm-size);
}

.settings-users__empty-cell {
    padding: 0;
}

.settings-users__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    gap: 0.4rem;
}

.settings-users__empty-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.625rem;
    background-color: #EEF2F6;
    margin-bottom: 0.75rem;
}

.settings-users__empty-icon {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    background-color: #8FA3B1;
    -webkit-mask-image: url('../img/nav/search.svg');
    mask-image: url('../img/nav/search.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.settings-users__empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark);
}

.settings-users__empty-desc {
    font-size: var(--text-sm-size);
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.settings-users__empty-clear {
    background: none;
    border: 1.5px solid var(--card-border);
    border-radius: 0.375rem;
    padding: 0.4rem 1rem;
    font-size: var(--text-sm-size);
    font-weight: 600;
    color: var(--primary-color, #2563EB);
    cursor: pointer;
    margin-top: 0.5rem;
    text-decoration: none;
}

.settings-users__empty-clear:hover {
    background-color: #EFF6FF;
}

/* ── Pagination ──────────────────────────────────────────────── */

.settings-users__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    margin-top: 0;
}

.settings-users__page-btn--nav {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.375rem;
    background: var(--surface-color, #fff);
    color: var(--primary-color, #2563EB);
    font-size: var(--text-sm-size);
    font-weight: 600;
    cursor: pointer;
}

.settings-users__page-btn--nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.settings-users__page-btn--nav:not(:disabled):hover {
    background-color: var(--bg-color, #EEF2F6);
}

.settings-users__page-numbers {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.settings-users__page-num {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: none;
    background: none;
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
}

.settings-users__page-num:hover {
    background-color: var(--bg-color, #EEF2F6);
}

.settings-users__page-num--active {
    background-color: var(--bg-color, #EEF2F6);
    color: var(--text-dark);
    font-weight: 700;
}

.settings-users__page-ellipsis {
    min-width: 2rem;
    text-align: center;
    font-size: var(--text-sm-size);
    color: var(--text-light);
}

/* ═════════════════════════════════════════════════════════════════════
   Block: Settings Add User Modal (.settings-adduser)
   ═════════════════════════════════════════════════════════════════════ */

.settings-adduser {
    width: min(720px, 100%);
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--card-border, #E2E8F0);
    border-radius: 18px;
    background-color: var(--surface-color, #fff);
    box-shadow: 0 20px 44px rgba(15, 26, 38, 0.16);
}

.settings-adduser > .settings__modal-header {
    padding: 1.5rem 1.5rem 0;
}

.settings-adduser__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

.settings-adduser__body::-webkit-scrollbar {
    width: 6px;
}

.settings-adduser__body::-webkit-scrollbar-track {
    background: transparent;
}

.settings-adduser__body::-webkit-scrollbar-thumb {
    background-color: #c4c4c4;
    border-radius: 3px;
}

.settings-adduser__body::-webkit-scrollbar-button {
    display: none;
}

/* Upload zone */
.settings-adduser__upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border: 1.5px dashed var(--border-color, #E2E8F0);
    border-radius: 0.625rem;
    background-color: var(--bg-color-light-blue, #F0F9FF);
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.settings-adduser__upload-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
    mask-image: url('../img/settings/upload_icon.svg');
    -webkit-mask-image: url('../img/settings/upload_icon.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--text-light);
}

.settings-adduser__upload-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-dark);
}

.settings-adduser__upload-link {
    color: var(--primary-color, #2563EB);
    font-weight: 600;
    cursor: pointer;
}

.settings-adduser__upload-hint {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--text-light);
}

/* Form fields */
.settings-adduser__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-adduser__row > .settings-adduser__field {
    flex: 1 1 0;
}

.settings-adduser__field {
    position: relative;
    min-width: 0;
}

.settings-adduser__field--grow {
    flex: 1;
}

.settings-adduser__field--half {
    width: 50%;
}

.settings-adduser__label {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-dark);
}

.settings-adduser__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    background: var(--input-bg);
    outline: none;
    box-sizing: border-box;
}

.settings-adduser__input:focus {
    border-color: var(--primary-color, #2563EB);
}

.settings-adduser__input::placeholder {
    color: var(--text-light);
}

.settings-adduser__input--error {
    border-color: #DC2626 !important;
}

.settings-adduser__select-trigger--error {
    border-color: #DC2626 !important;
}

.settings-adduser__dob-input--error {
    border-color: #DC2626 !important;
}

.settings-adduser__error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #D97706;
    line-height: 1.4;
}

/* Custom select trigger (role) */
.settings-adduser__select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    background: var(--surface-color, #fff);
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.settings-adduser__select-trigger:focus-visible {
    border-color: var(--primary-color, #2563EB);
}

.settings-adduser__placeholder {
    color: var(--text-light);
}

.settings-adduser__select-chevron {
    width: 0.625rem;
    height: 0.625rem;
    mask-image: url('../img/settings/right_chevron.svg');
    -webkit-mask-image: url('../img/settings/right_chevron.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text-light);
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.settings-adduser__select-chevron--open {
    transform: rotate(-90deg);
}

.settings-adduser__select-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 26, 38, 0.08);
    z-index: 10;
}

.settings-adduser__select-option {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
}

.settings-adduser__select-option:hover {
    background-color: #f8fafc;
}

.settings-adduser__select-option--active {
    background-color: #f5f8fc;
    font-weight: 600;
}

/* Checkbox rows */
.settings-adduser__checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.settings-adduser__checkbox-row--inline {
    margin-top: 10px;
    margin-bottom: 0.5rem;
}

.settings-adduser__checkbox-row > span {
    transform: translateY(2px);
}

.settings-adduser__checkbox--blue {
    accent-color: var(--primary-color, #2563EB);
    width: 0.9rem;
    height: 0.9rem;
}

/* DOB group */
.settings-adduser__dob-group {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.settings-adduser__dob-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0.5rem;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    text-align: center;
    outline: none;
    box-sizing: border-box;
    background-color: var(--input-bg);
}

.settings-adduser__dob-input--year {
    flex: 1 1 0;
}

.settings-adduser__dob-input:focus {
    border-color: var(--primary-color, #2563EB);
}

.settings-adduser__dob-input::placeholder {
    color: var(--text-light);
}

/* Divider */
.settings-adduser__divider {
    border: none;
    border-top: 1px solid var(--border-color, #E2E8F0);
    margin: 0.75rem 0 1rem;
}

/* Section title */
.settings-adduser__section-title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Domain link in outbox */
.settings-adduser__domain-link {
    color: var(--primary-color, #2563EB);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Services grid */
.settings-adduser__services-grid {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-adduser__service-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--card-border, #E2E8F0);
    border-radius: 0.5rem;
    background: var(--surface-color, #fff);
    cursor: pointer;
}

.settings-adduser__service-card--active {
    border-color: var(--primary-color, #2563EB);
    background-color: #fff;
}

.settings-adduser__service-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.settings-adduser__service-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.settings-adduser__service-remaining {
    font-size: 0.75rem;
    color: var(--text-light);
}

.settings-adduser__service-remaining--warn {
    color: #D97706;
    font-weight: 600;
}

/* Warning banner */
.settings-adduser__warning {
    background-color: var(--bg-color-light-blue);
    border-radius: 0.5rem;
    padding: 1rem 1.125rem;
    margin-bottom: 0.5rem;
}

.settings-adduser__warning-title {
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
}

.settings-adduser__warning-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* Actions */
.settings-adduser__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
}

.settings-adduser__btn {
    min-height: 42px;
    padding: 0 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.settings-adduser__btn--cancel {
    background-color: var(--surface-color, #fff);
    border-color: var(--primary-color, #2563EB);
    color: var(--primary-color, #2563EB);
}

.settings-adduser__btn--cancel:hover {
    background-color: #f5f8fc;
}

.settings-adduser__btn--submit {
    background-color: var(--primary-color, #2563EB);
    border-color: var(--primary-color, #2563EB);
    color: #fff;
}

.settings-adduser__btn--submit:hover {
    opacity: 0.9;
}

.settings-adduser__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Hidden file input ──────────────────────────────────────── */
.settings-adduser__file-input {
    display: none;
}

/* ── Upload attached state ──────────────────────────────────── */
.settings-adduser__upload-attached {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
}

.settings-adduser__upload-preview-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--hover-bg);
}

.settings-adduser__upload-preview-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--text-light);
    mask-image: url('../img/settings/upload_icon.svg');
    -webkit-mask-image: url('../img/settings/upload_icon.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.settings-adduser__upload-filename {
    flex: 1;
    font-size: var(--text-sm-size);
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-adduser__upload-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-adduser__upload-remove:hover {
    background-color: var(--hover-bg);
}

.settings-adduser__upload-remove-icon {
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--text-light);
    mask-image: url(../img/settings/flyout/trashcan_icon.svg);
    -webkit-mask-image: url(../img/settings/flyout/trashcan_icon.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* ── Outbox tag input ───────────────────────────────────────── */
.settings-adduser__outbox-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
    min-height: 42px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.settings-adduser__outbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #EBF0F7;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.settings-adduser__outbox-chip-x {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-light);
    padding: 0 0.125rem;
    line-height: 1;
}

.settings-adduser__outbox-chip-x:hover {
    color: var(--text-dark);
}

.settings-adduser__outbox-input {
    flex: 1;
    min-width: 160px;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-dark);
    background: transparent;
    padding: 0.25rem 0;
}

.settings-adduser__outbox-input::placeholder {
    color: var(--text-light);
}

/* ==========================================================================
   Settings — User Detail Flyout
   ========================================================================== */

.settings-user-flyout__layer {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.settings-user-flyout__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(13, 26, 42, 0.18);
    z-index: 45;
    animation: settings-flyout-fade-in 0.16s ease-out;
}

.settings-user-flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: min(680px, calc(100% - 2rem));
    height: 100vh;
    background-color: var(--surface-color);
    border-left: 1px solid var(--card-border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 22px rgba(15, 23, 42, 0.12);
    animation: settings-flyout-slide-in 0.16s ease-out;
}

/* Closing animations */
.settings-user-flyout__layer--closing .settings-user-flyout__backdrop {
    animation: settings-flyout-fade-out 0.16s ease-in forwards;
}

.settings-user-flyout__layer--closing .settings-user-flyout {
    animation: settings-flyout-slide-out 0.16s ease-in forwards;
}

/* ── Flyout header ──────────────────────────────────────────── */
.settings-user-flyout__head {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.settings-user-flyout__head-left,
.settings-user-flyout__head-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.settings-user-flyout__btn-icon {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.settings-user-flyout__btn-icon:hover:not(:disabled) {
    background-color: var(--hover-bg);
}

.settings-user-flyout__btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Icon masks */
.settings-user-flyout__icon {
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--icon-muted);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.settings-user-flyout__icon--collapse {
    mask-image: url(../img/settings/flyout/double_arrows.svg);
    -webkit-mask-image: url(../img/settings/flyout/double_arrows.svg);
}

.settings-user-flyout__icon--up {
    mask-image: url(../img/settings/flyout/chevron_down.svg);
    -webkit-mask-image: url(../img/settings/flyout/chevron_down.svg);
    transform: rotate(180deg);
}

.settings-user-flyout__icon--down {
    mask-image: url(../img/settings/flyout/chevron_down.svg);
    -webkit-mask-image: url(../img/settings/flyout/chevron_down.svg);
}

.settings-user-flyout__icon--edit {
    mask-image: url(../img/settings/flyout/edit_pen_icon.svg);
    -webkit-mask-image: url(../img/settings/flyout/edit_pen_icon.svg);
}

.settings-user-flyout__icon--delete {
    mask-image: url(../img/settings/flyout/trashcan_icon.svg);
    -webkit-mask-image: url(../img/settings/flyout/trashcan_icon.svg);
}

/* Action buttons in header */
.settings-user-flyout__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
}

.settings-user-flyout__action-btn:hover {
    background-color: var(--hover-bg);
}

.settings-user-flyout__action-btn--danger {
    color: #DC2626;
}

.settings-user-flyout__action-btn--danger .settings-user-flyout__icon {
    background-color: #DC2626;
}

/* ── Flyout body ────────────────────────────────────────────── */
.settings-user-flyout__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-user-flyout__loading {
    padding: 3rem 0;
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm-size);
}

/* ── Profile section ────────────────────────────────────────── */
.settings-user-flyout__profile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.settings-user-flyout__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EBF0F7;
}

.settings-user-flyout__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-user-flyout__avatar-initials {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.settings-user-flyout__profile-info {
    flex: 1;
    min-width: 0;
}

.settings-user-flyout__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

.settings-user-flyout__email-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    overflow: hidden;
}

.settings-user-flyout__email-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--icon-muted);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.settings-user-flyout__email-icon--send {
    mask-image: url('../img/settings/flyout/email_fly_icon.svg');
    -webkit-mask-image: url('../img/settings/flyout/email_fly_icon.svg');
}

.settings-user-flyout__email-icon--bell {
    margin-left: 0.75rem;
    mask-image: url('../img/settings/flyout/bell_icon.svg');
    -webkit-mask-image: url('../img/settings/flyout/bell_icon.svg');
}

.settings-user-flyout__email {
    font-size: 14px;
    font-weight: 400;;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-user-flyout__role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem 0.125rem;
    border-radius: var(--radius-sm );
    background-color: #EBF0F7;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.settings-user-flyout__card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.25rem 0;
}

.settings-user-flyout__card-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
}

.settings-user-flyout__card-desc {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* ── Outbox list ────────────────────────────────────────────── */
.settings-user-flyout__outbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.settings-user-flyout__outbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--card-border);
}

.settings-user-flyout__outbox-item:last-child {
    border-bottom: none;
}

.settings-user-flyout__outbox-default {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-light);
}

/* ── Service list ───────────────────────────────────────────── */
.settings-user-flyout__service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.settings-user-flyout__service-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-dark);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--card-border);
}

.settings-user-flyout__service-item:last-child {
    border-bottom: none;

}

.settings-user-flyout__service-item span:last-child {
    transform: translateY(2px);
}

.settings-user-flyout__svc-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--text-light);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}

.settings-user-flyout__svc-icon--registered {
    mask-image: url(../img/settings/registered_icon.svg);
    -webkit-mask-image: url(../img/settings/registered_icon.svg);
}

.settings-user-flyout__svc-icon--secured {
    mask-image: url(../img/settings/secure_icon.svg);
    -webkit-mask-image: url(../img/settings/secure_icon.svg);
}

.settings-user-flyout__svc-icon--signing {
    mask-image: url(../img/settings/signing_icon.svg);
    -webkit-mask-image: url(../img/settings/signing_icon.svg);
}

.settings-user-flyout__svc-icon--large_files {
    mask-image: url(../img/settings/large_files_icon.svg);
    -webkit-mask-image: url(../img/settings/large_files_icon.svg);
}

/* ── Activity list ──────────────────────────────────────────── */
.settings-user-flyout__activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.settings-user-flyout__activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--card-border);
}

.settings-user-flyout__activity-item:last-child {
    border-bottom: none;
}

.settings-user-flyout__activity-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-user-flyout__activity-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
}

.settings-user-flyout__activity-subtitle {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-user-flyout__activity-time {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.0625rem;
}

/* ── Flyout: all-outbox text ────────────────────────────────── */
.settings-user-flyout__outbox-all {
    font-size: var(--text-sm-size);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    padding: 0.75rem 0 0.25rem;
}

/* ── Flyout: empty states ───────────────────────────────────── */
.settings-user-flyout__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.75rem 1rem;
    gap: 0.25rem;
}

.settings-user-flyout__empty-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.625rem;
    background-color: #EEF2F6;
    margin-bottom: 0.5rem;
}

.settings-user-flyout__empty-icon {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    background-color: #8FA3B1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.settings-user-flyout__empty-icon--activity {
    -webkit-mask-image: url('../img/settings/flyout/activity_icon.svg');
    mask-image: url('../img/settings/flyout/activity_icon.svg');
}

.settings-user-flyout__empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark);
}

.settings-user-flyout__empty-desc {
    font-size: var(--text-sm-size);
    color: var(--text-light);
    text-align: center;
    white-space: pre-line;
}

/* ── Flyout keyframes ───────────────────────────────────────── */
@keyframes settings-flyout-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes settings-flyout-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes settings-flyout-slide-in {
    from {
        transform: translateX(18px);
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes settings-flyout-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(18px);
        opacity: 0.85;
    }
}

/* ==========================================================================
   Settings — Delete User Modal (reuses compose-mail__resume-dialog--leave)
   ========================================================================== */

.settings-delete-modal__warning-text {
    font-weight: 600;
    color: #DC2626;
    margin-top: 0.25rem;
}

/* ── Row cursor ─────────────────────────────────────────────── */
.settings-users__row {
    cursor: pointer;
}