/* -----------------------------------------------------------
   ETS Connect – RCL global styles
   ----------------------------------------------------------- */
@import url("./tokens.css");

/* Base */
html, body {
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100dvh;
    min-width: 0;
    font-family: var(--ec-font-sans);
    font-size: var(--ec-font-size);
    color: var(--ec-text);
    background: radial-gradient(1200px 600px at 20% -10%, var(--ec-bg-wash-brand), transparent 60%), radial-gradient(1000px 800px at 120% 10%, var(--ec-bg-wash-accent), transparent 60%), linear-gradient(0deg, var(--ec-bg), var(--ec-bg));
    background-attachment: fixed;
}

:root {
    --level-on: var(--ec-success);
    --level-off: rgba(100,118,132,.28);
}

html[data-theme="eurotels"] body {
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='420' viewBox='0 0 1440 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233a74b4' stroke-width='1' opacity='.34'%3E%3Cpath d='M0 150 C240 90 410 205 650 145 S1030 55 1440 120'/%3E%3Cpath d='M0 165 C240 105 410 220 650 160 S1030 70 1440 135'/%3E%3Cpath d='M0 180 C240 120 410 235 650 175 S1030 85 1440 150'/%3E%3Cpath d='M0 195 C240 135 410 250 650 190 S1030 100 1440 165'/%3E%3Cpath d='M0 210 C240 150 410 265 650 205 S1030 115 1440 180'/%3E%3Cpath d='M0 225 C240 165 410 280 650 220 S1030 130 1440 195'/%3E%3Cpath d='M0 240 C240 180 410 295 650 235 S1030 145 1440 210'/%3E%3Cpath d='M0 255 C240 195 410 310 650 250 S1030 160 1440 225'/%3E%3Cpath d='M0 270 C240 210 410 325 650 265 S1030 175 1440 240'/%3E%3Cpath d='M0 285 C240 225 410 340 650 280 S1030 190 1440 255'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #235b9d 0%, #1d4f89 58%, #173f72 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% min(48rem, 58vh), cover;
    background-position: center 46%, center;
    background-attachment: fixed;
}

html[data-theme="dark"] body {
    background: radial-gradient(1200px 600px at 20% -10%, var(--ec-bg-wash-brand), transparent 60%), radial-gradient(1000px 800px at 120% 10%, var(--ec-bg-wash-accent), transparent 60%), linear-gradient(180deg, #111927 0%, #101725 54%, #0f1623 100%);
    background-attachment: fixed;
}

/* Typography and layout */
h1, h2, h3 {
    margin: .2rem 0 .8rem;
    line-height: 1.2;
}

a {
    color: var(--ec-brand);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.page, .app-page, .container {
    max-width: 1100px;
    margin: 0 auto;
}

.page, .app-page {
    padding: 1.25rem;
}

html[data-theme="eurotels"] .page > h1,
html[data-theme="eurotels"] .page > h2,
html[data-theme="eurotels"] .page > h3,
html[data-theme="eurotels"] .app-page > h1,
html[data-theme="eurotels"] .app-page > h2,
html[data-theme="eurotels"] .app-page > h3,
html[data-theme="eurotels"] .container > h1,
html[data-theme="eurotels"] .container > h2,
html[data-theme="eurotels"] .container > h3,
body[data-theme="eurotels"] .page > h1,
body[data-theme="eurotels"] .page > h2,
body[data-theme="eurotels"] .page > h3,
body[data-theme="eurotels"] .app-page > h1,
body[data-theme="eurotels"] .app-page > h2,
body[data-theme="eurotels"] .app-page > h3,
body[data-theme="eurotels"] .container > h1,
body[data-theme="eurotels"] .container > h2,
body[data-theme="eurotels"] .container > h3 {
    color: #f8fbff;
    text-shadow: 0 2px 8px rgba(7,27,56,.42);
}

html[data-theme="eurotels"] .page > p,
html[data-theme="eurotels"] .app-page > p,
html[data-theme="eurotels"] .container > p,
body[data-theme="eurotels"] .page > p,
body[data-theme="eurotels"] .app-page > p,
body[data-theme="eurotels"] .container > p {
    color: rgba(248,251,255,.92);
    text-shadow: 0 1px 5px rgba(7,27,56,.34);
}

.container {
    padding: 0 1rem;
}

/* App shell and tabs */
.app-shell-header {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    border-bottom: 1px solid var(--ec-border);
    background: var(--ec-panel);
    box-shadow: var(--ec-shadow);
}

.app-shell-header .ec-tabs {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
    box-shadow: none;
}

.app-shell-actions {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
    padding: .75rem 1rem .75rem 0;
    white-space: nowrap;
}

.ec-presence-picker {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    height: 30px;
    min-width: 0;
    padding: 0 6px 0 8px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #111827;
    flex: 0 1 138px;
}

.ec-presence-picker__dot,
.ec-presence-picker__option-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #9ca3af;
}

.ec-presence-picker__dot--available {
    background: #22c55e;
}

.ec-presence-picker__dot--away {
    background: #eab308;
}

.ec-presence-picker__dot--busy {
    background: #ef4444;
}

.ec-presence-picker__dot--unknown {
    background: #9ca3af;
}

.ec-presence-picker__button {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0 18px 0 0;
    outline: none;
    cursor: pointer;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ec-presence-picker__button:disabled {
    cursor: default;
    opacity: .55;
}

.ec-presence-picker__button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(-35%);
    opacity: .75;
    pointer-events: none;
}

.ec-presence-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 170px;
    padding: 5px;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15,23,42,.18);
}

.ec-presence-picker__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ec-presence-picker__option:hover,
.ec-presence-picker__option--selected {
    background: rgba(14,165,233,.11);
}

.ec-tabs {
    display: flex;
    gap: var(--ec-gap);
    border-bottom: 1px solid var(--ec-border);
    padding: .75rem 1rem;
    background: var(--ec-panel);
    box-shadow: var(--ec-shadow);
}

    .ec-tabs a {
        padding: .5rem .75rem;
        border-radius: .5rem;
        color: var(--ec-text);
    }

        .ec-tabs a.active {
            background: var(--ec-panel-alt);
            color: var(--ec-brand-700);
            font-weight: 600;
        }

html[data-theme="eurotels"] .ec-tabs {
    background: #0e2648;
    border-bottom-color: rgba(255,255,255,.12);
    box-shadow: 0 6px 22px rgba(7, 27, 56, .18);
}

html[data-theme="eurotels"] .app-shell-header {
    background: #0e2648;
    border-bottom-color: rgba(255,255,255,.12);
    box-shadow: 0 6px 22px rgba(7, 27, 56, .18);
}

html[data-theme="eurotels"] .app-shell-header .ec-tabs {
    box-shadow: none;
}

html[data-theme="eurotels"] .ec-tabs a {
    color: rgba(255,255,255,.92);
}

html[data-theme="eurotels"] .ec-tabs a.active {
    background: rgba(127,169,206,.18);
    color: #ffffff;
}

html[data-theme="eurotels"] .ec-presence-picker,
body[data-theme="eurotels"] .ec-presence-picker,
html[data-theme="dark"] .ec-presence-picker,
body[data-theme="dark"] .ec-presence-picker {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.88);
    color: #031e23;
}

html[data-theme="dark"] .ec-presence-picker {
    background: rgba(34,48,71,.78);
    color: #f9fafb;
}

html[data-theme="dark"] .ec-presence-picker__menu,
body[data-theme="dark"] .ec-presence-picker__menu {
    border-color: rgba(255,255,255,.14);
    background: #1f2937;
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
}

html[data-theme="dark"] .ec-presence-picker__option,
body[data-theme="dark"] .ec-presence-picker__option {
    color: #f9fafb;
}

html[data-theme="dark"] .ec-presence-picker__option:hover,
html[data-theme="dark"] .ec-presence-picker__option--selected,
body[data-theme="dark"] .ec-presence-picker__option:hover,
body[data-theme="dark"] .ec-presence-picker__option--selected {
    background: rgba(56,189,248,.16);
}

html[data-theme="eurotels"] .deployment-heading h1,
body[data-theme="eurotels"] .deployment-heading h1 {
    color: #f8fbff;
    text-shadow: 0 2px 8px rgba(7,27,56,.42);
}

html[data-theme="eurotels"] .deployment-heading p,
html[data-theme="eurotels"] .deployment-heading__links,
body[data-theme="eurotels"] .deployment-heading p,
body[data-theme="eurotels"] .deployment-heading__links {
    color: rgba(248,251,255,.84);
    text-shadow: 0 1px 5px rgba(7,27,56,.34);
}

html[data-theme="eurotels"] .deployment-heading__links a,
body[data-theme="eurotels"] .deployment-heading__links a {
    color: #d8ecff;
}

html[data-theme="eurotels"] .deployment-heading__links a:hover,
html[data-theme="eurotels"] .deployment-heading__links a:focus-visible,
body[data-theme="eurotels"] .deployment-heading__links a:hover,
body[data-theme="eurotels"] .deployment-heading__links a:focus-visible {
    color: #ffffff;
}

html[data-theme="eurotels"] .deployment-card,
body[data-theme="eurotels"] .deployment-card {
    border-color: #c9d8e8;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 24px rgba(8,24,48,.14);
}

html[data-theme="eurotels"] .deployment-card-header > span:not(.deployment-status-pill),
body[data-theme="eurotels"] .deployment-card-header > span:not(.deployment-status-pill) {
    color: #0e2648;
    font-weight: 700;
}

html[data-theme="eurotels"] .deployment-table th,
body[data-theme="eurotels"] .deployment-table th {
    color: #4b647d;
}

html[data-theme="eurotels"] .deployment-table code,
body[data-theme="eurotels"] .deployment-table code {
    border-radius: .25rem;
    background: #e8f2ff;
    color: #0e2648;
    padding: .08rem .24rem;
}

html[data-theme="eurotels"] .deployment-actions .ec-btn.secondary:disabled,
html[data-theme="eurotels"] .deployment-table .ec-btn.secondary:disabled,
body[data-theme="eurotels"] .deployment-actions .ec-btn.secondary:disabled,
body[data-theme="eurotels"] .deployment-table .ec-btn.secondary:disabled {
    border-color: #bfd2e8;
    background: #edf4fb;
    color: #5f7085;
    opacity: 1;
    box-shadow: none;
}

html[data-theme="eurotels"] .deployment-actions .ec-btn:disabled:not(.secondary),
body[data-theme="eurotels"] .deployment-actions .ec-btn:disabled:not(.secondary) {
    border-color: #7f8ea3;
    background: #6f7886;
    color: #ffffff;
    opacity: 1;
    box-shadow: none;
}

/* Buttons */
.btn {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--ec-brand);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .55rem 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ec-shadow-sm);
}

    .btn:hover {
        background: var(--ec-brand-700);
    }

    .btn.secondary {
        background: #e8eef9;
        color: #13407f;
    }

html[data-theme="dark"] .btn.secondary,
body[data-theme="dark"] .btn.secondary {
    background: rgba(127,182,255,.14);
    color: var(--ec-brand-700);
    border: 1px solid rgba(127,182,255,.20);
}

    .btn.ghost {
        background: transparent;
        color: var(--ec-brand);
        border: 1px solid var(--ec-border);
    }

    .btn.danger {
        background: var(--ec-danger);
    }

    .btn.btn-sm {
        padding: .38rem .7rem;
        font-size: .9rem;
    }

/* Form fields */
label {
    font-weight: 600;
    color: var(--ec-muted);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

input[type="text"], input[type="password"], input[type="search"], select, textarea {
    background: var(--ec-panel-alt);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    padding: .6rem .7rem;
    font-size: 16px;
}

    input:focus, select:focus, textarea:focus {
        outline: none;
        box-shadow: var(--ec-ring);
    }

/* Cards/grid */
.card {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    padding: 1rem;
}

    .card + .card {
        margin-top: 1rem;
    }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.card-head h3 {
    margin: 0;
}

.settings-grid .card-head .btn {
    margin-top: .2rem;
}

.operator-softphone {
    display: grid;
    grid-template-columns: minmax(20rem, .9fr) minmax(28rem, 1.35fr);
    grid-template-areas:
        "control queue"
        "control favourites"
        "history history";
    gap: 1rem;
    align-items: start;
}

.operator-softphone__control {
    grid-area: control;
}

.operator-softphone__queue {
    grid-area: queue;
}

.operator-softphone__favourites {
    grid-area: favourites;
}

.operator-softphone__history {
    grid-area: history;
}

.operator-softphone .card {
    margin: 0;
}

.operator-softphone__favourites .ec-favourites-head {
    margin: -.15rem 0 .55rem;
}

.operator-softphone__favourites .ec-favourites-refresh {
    padding: .38rem .52rem;
    font-size: .72rem;
}

.operator-softphone__favourites .ec-favourite-row {
    min-height: 40px;
}

.operator-softphone__favourites .ec-favourite-name {
    font-size: .9rem;
    line-height: 1.15;
}

@media (max-width: 900px) {
    .operator-softphone {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "control"
            "queue"
            "favourites"
            "history";
    }
}

@media (max-width: 640px) {
    .page,
    .app-page,
    .container {
        width: 100%;
        max-width: 100%;
    }

    .app-page {
        padding: 1rem;
    }

    .operator-softphone {
        gap: .75rem;
    }

    .operator-softphone__control,
    .operator-softphone__queue,
    .operator-softphone__favourites,
    .operator-softphone__history,
    .operator-softphone .card {
        min-width: 0;
    }

    .operator-softphone .card {
        padding: .85rem;
        border-radius: .8rem;
    }
}

@media (max-width: 760px) {
    .app-shell-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0;
    }

    .app-shell-header .ec-tabs {
        flex-basis: 100%;
        overflow-x: auto;
    }

    .app-shell-actions {
        width: 100%;
        justify-content: flex-end;
        padding: .55rem 1rem .75rem;
    }
}

/* Table */
.ec-history {
    width: 100%;
    border-collapse: collapse;
}

    .ec-history th, .ec-history td {
        padding: .65rem .75rem;
        border-bottom: 1px solid var(--ec-border);
        color: var(--ec-text);
        vertical-align: middle;
    }

    .ec-history thead th {
        text-align: left;
        font-weight: 700;
        color: var(--ec-brand-700);
        background: var(--ec-panel-alt);
    }

.ec-empty {
    color: var(--ec-muted);
}

.ec-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .35rem 0 .75rem;
}

.ec-history-search {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 28rem;
    margin-left: auto;
}

.ec-history-count {
    flex: 0 0 auto;
    color: var(--ec-muted);
    font-size: .85rem;
    font-weight: 700;
}

.ec-history-direction {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-weight: 700;
}

.ec-history-direction__icon {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: .95rem;
    line-height: 1;
    flex: 0 0 auto;
}

.ec-history-direction__icon svg {
    width: .85rem;
    height: .85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ec-history-direction--incoming .ec-history-direction__icon {
    background: rgba(52, 199, 89, .13);
    color: #15803d;
}

.ec-history-row--missed {
    background: rgba(220, 38, 38, .035);
}

.ec-history-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
}

.ec-history-status--missed {
    padding: .16rem .46rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, .11);
    color: #b91c1c;
    font-weight: 800;
}

.ec-history-direction--missed {
    color: #b91c1c;
}

.ec-history-direction--missed .ec-history-direction__icon {
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
}

.ec-history-direction--outgoing .ec-history-direction__icon {
    background: rgba(37, 99, 235, .12);
    color: #1d4ed8;
}

.ets-missed-stack {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    top: max(1rem, env(safe-area-inset-top));
    z-index: 2147483000;
    display: grid;
    gap: .55rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.ets-missed-stack__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
    padding: .75rem .8rem;
    border: 1px solid rgba(220, 38, 38, .24);
    border-radius: 8px;
    background: var(--ec-panel);
    color: var(--ec-text);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    pointer-events: auto;
    animation: ets-missed-in .18s ease-out;
}

.ets-missed-stack__item--leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}

.ets-missed-stack__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
    font-weight: 900;
}

.ets-missed-stack__title {
    font-weight: 800;
    color: #b91c1c;
}

.ets-missed-stack__remote {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ets-missed-stack__message {
    margin-top: .12rem;
    color: var(--ec-muted);
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.ets-missed-stack__close {
    border: 0;
    background: transparent;
    color: var(--ec-muted);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: .05rem .1rem;
}

@keyframes ets-missed-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-history-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .75rem;
    color: var(--ec-muted);
    font-size: .85rem;
    font-weight: 700;
}

.ec-history-page {
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: var(--ec-panel);
    color: var(--ec-text);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    padding: .45rem .6rem;
    cursor: pointer;
}

.ec-history-page:disabled {
    cursor: default;
    opacity: .5;
}

.phone-recents-card {
    overflow: hidden;
}

.ios-shell .ios-content .phone-recents-card {
    padding: .85rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history {
    table-layout: fixed;
    font-size: .86rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th,
.ios-shell .ios-content .phone-recents-card .ec-history td {
    padding: .5rem .45rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(1),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(1) {
    width: 5.6rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(2),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(2) {
    width: 4.1rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(3),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(3) {
    width: 5rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(4),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(4) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(5),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(5) {
    width: 4.4rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history th:nth-child(6),
.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(6) {
    width: 3.5rem;
}

@media (max-width: 640px) {
    .ec-history-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .ec-history-search {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        justify-self: end;
    }

    .ec-history-count {
        align-self: flex-start;
    }
}

@media (max-width: 760px) {
    .ios-shell .ios-content .phone-recents-card .ec-history {
        display: block;
        table-layout: auto;
        font-size: .82rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history thead {
        display: none;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history tbody {
        display: grid;
        gap: .5rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history tr {
        display: grid;
        grid-template-columns: minmax(4.8rem, .78fr) minmax(0, 1.35fr) auto;
        grid-template-areas:
            "when remote actions"
            "status direction duration";
        align-items: center;
        gap: .18rem .45rem;
        padding: .5rem .55rem;
        border: 1px solid var(--ec-border);
        border-radius: 7px;
        background: var(--ec-panel);
    }

    .ios-shell .ios-content .phone-recents-card .ec-history th,
    .ios-shell .ios-content .phone-recents-card .ec-history td {
        width: auto !important;
        min-width: 0;
        padding: 0;
        border: 0;
        line-height: 1.18;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(1) {
        grid-area: when;
        color: var(--ec-muted);
        font-size: .72rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(2) {
        grid-area: status;
        color: var(--ec-muted);
        font-size: .74rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(3) {
        grid-area: direction;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(4) {
        grid-area: remote;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-weight: 650;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(5) {
        grid-area: duration;
        text-align: left !important;
        color: var(--ec-muted);
        font-size: .74rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(6) {
        grid-area: actions;
        text-align: right !important;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history-direction {
        gap: .28rem;
        max-width: 100%;
        font-size: .78rem;
    }

    .ios-shell .ios-content .phone-recents-card .ec-history-direction__icon {
        width: 1.2rem;
        height: 1.2rem;
    }
}

.ios-shell .ios-content .phone-recents-card .ec-history-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.ios-shell .ios-content .phone-recents-card .ec-history-search {
    width: min(100%, 23rem);
    max-width: none;
    justify-self: end;
}

.ios-shell .ios-content .phone-recents-card .ec-history {
    display: block;
    table-layout: auto;
    font-size: .82rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history thead {
    display: none;
}

.ios-shell .ios-content .phone-recents-card .ec-history tbody {
    display: grid;
    gap: .5rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history tr {
    display: grid;
    grid-template-columns: minmax(4.8rem, .78fr) minmax(0, 1.35fr) auto;
    grid-template-areas:
        "when remote actions"
        "status direction duration";
    align-items: center;
    gap: .18rem .45rem;
    padding: .5rem .55rem;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    background: var(--ec-panel);
}

.ios-shell .ios-content .phone-recents-card .ec-history th,
.ios-shell .ios-content .phone-recents-card .ec-history td {
    width: auto !important;
    min-width: 0;
    padding: 0;
    border: 0;
    line-height: 1.18;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(1) {
    grid-area: when;
    color: var(--ec-muted);
    font-size: .72rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(2) {
    grid-area: status;
    color: var(--ec-muted);
    font-size: .74rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(3) {
    grid-area: direction;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(4) {
    grid-area: remote;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 650;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(5) {
    grid-area: duration;
    text-align: left !important;
    color: var(--ec-muted);
    font-size: .74rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history td:nth-child(6) {
    grid-area: actions;
    text-align: right !important;
}

.ios-shell .ios-content .phone-recents-card .ec-history-direction {
    gap: .28rem;
    max-width: 100%;
    font-size: .78rem;
}

.ios-shell .ios-content .phone-recents-card .ec-history-direction__icon {
    width: 1.2rem;
    height: 1.2rem;
}

/* Status banner */
.ec-banner {
    position: fixed;
    top: 3.25rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    box-shadow: var(--ec-shadow);
    padding: .5rem .75rem;
    opacity: .95;
}

    .ec-banner .ec-x {
        border: none;
        background: transparent;
        font-size: 1.1rem;
        cursor: pointer;
        opacity: .6;
    }

        .ec-banner .ec-x:hover {
            opacity: 1;
        }

/* Utilities */
.mt-2 {
    margin-top: .5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.text-sm {
    font-size: .875rem;
}

/* ------------------------------
   SweetAlert – modal framework
   ------------------------------ */
.swal2-popup.ets-modal {
    width: 32rem;
    max-width: 92vw;
    overflow: hidden;
}

    /* Apply modalPop ONLY when showing */
    .swal2-popup.ets-modal.swal2-show {
        animation: modalPop .2s ease-out;
    }

    /* Optional: explicitly clear animation on hide to avoid conflicts */
    .swal2-popup.ets-modal.swal2-hide {
        animation: none !important;
    }

    .swal2-popup.ets-modal.swal2-hide {
        animation: modalFadeOut .15s ease-in forwards;
    }

@keyframes modalFadeOut {
    to {
        opacity: 0;
        transform: translateY(4px) scale(.98);
    }
}

@keyframes modalPop {
    from {
        transform: scale(.98);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.swal2-popup.ets-modal .swal2-html-container {
    text-align: left;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

/* Generic form scaffold */
.swal2-popup .ets-modal-form {
    display: grid;
    gap: 16px;
}

    .swal2-popup .ets-modal-form .row {
        display: flex;
        flex-direction: column;
    }

    .swal2-popup .ets-modal-form .form-label {
        margin: 0 0 8px;
        font-weight: 600;
        font-size: .9rem;
        color: var(--ec-muted);
    }

    /* Modern modal layout */
    .swal2-popup .ets-modal-form.modern {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding-top: .25rem;
    }

        .swal2-popup .ets-modal-form.modern .modal-head {
            border-bottom: 1px solid var(--ec-border);
            padding-bottom: .5rem;
            color: var(--ec-brand-700);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .swal2-popup .ets-modal-form.modern .grid-2 {
            display: grid;
            grid-template-columns: 9rem 1fr;
            gap: .75rem 1rem;
            align-items: center;
        }

@media (max-width:700px) {
    .swal2-popup .ets-modal-form.modern .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Inputs with inline button */
.input-with-btn {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    position: relative;
}

    .input-with-btn.right .input {
        width: 100%;
        padding-right: 4.75rem;
    }

    .input-with-btn.right .btn {
        position: absolute;
        right: .25rem;
        top: .25rem;
        height: calc(100% - .5rem);
        padding-inline: .75rem;
    }

/* Tabs */
.swal-tabs {
    display: flex;
    gap: .5rem;
}

    .swal-tabs .tab.btn {
        border-radius: 999px;
    }

    .swal-tabs .tab.active {
        box-shadow: var(--ec-shadow-sm);
    }

/* Show only active tab */
.swal2-popup .swal-tab {
    display: none;
}

    .swal2-popup .swal-tab.active {
        display: block;
    }

/* SweetAlert buttons */
.swal2-actions .btn {
    margin-left: .5rem;
}

.swal2-styled {
    background: var(--ec-brand) !important;
    border-radius: 999px !important;
}

/* Passphrase dialog: hint + remember */
.swal2-popup .help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}

    .swal2-popup .help-row .text-sm.muted {
        color: var(--ec-muted);
        line-height: 1.4;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

.swal2-popup .checkline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ec-fg, var(--ec-text));
    white-space: nowrap;
    flex: 0 0 auto;
}

    .swal2-popup .checkline input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
        accent-color: var(--ec-brand);
    }

.ets-kv span {
    margin-right: 0.4rem;
}

.swal2-confirm:disabled,
.swal2-confirm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: all;
}

/* Make disabled button look disabled but still receive pointer events for hover/click handler */
.swal2-confirm[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: all;
}

/* Simple, styled tooltip driven by data attribute */
.swal2-confirm[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + .5rem);
    white-space: nowrap;
    background: #111;
    color: #fff;
    font-size: .75rem;
    padding: .35rem .5rem;
    border-radius: .35rem;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.swal2-confirm {
    position: relative;
}

    .swal2-confirm[disabled],
    .swal2-confirm:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: all;
    }

    .swal2-confirm[data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + .4rem);
        left: 50%;
        transform: translateX(-50%);
        background: #111;
        color: #fff;
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
        border-radius: 0.35rem;
        white-space: nowrap;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }

.dialpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}

    .dialpad .dial-input {
        width: 200px;
        text-align: center;
        font-size: 1.1rem;
        padding: .35rem .5rem;
    }

    .dialpad .ios-dial-display {
        width: min(24rem, 100%);
        max-width: 100%;
        box-sizing: border-box;
    }

    .dialpad .ios-dial-display .dial-input,
    .dialpad .ios-dial-display__input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
        text-align-last: center;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .dialpad .ios-dial-display__input::placeholder {
        text-align: center;
        opacity: 1;
    }

    .operator-softphone__control .dialpad .ios-dial-display {
        width: min(22rem, 100%);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dialpad .grid {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .dialpad .row {
        display: flex;
        gap: .5rem;
        justify-content: center;
    }

        .dialpad .row .btn {
            width: 60px;
            height: 60px;
            font-size: 1.1rem;
            border-radius: 50%;
            text-align: center;
            line-height: 1;
        }

        .dialpad .row:last-child .btn {
            width: 70px;
            height: 40px;
            border-radius: .5rem;
        }

.ec-callstack ul.clean-list > li {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--ec-border);
}

.ec-callstack--operator {
    min-height: 100%;
}

.ec-callstack--operator .ec-callstack__toolbar {
    display: none;
}

.ec-callstack--operator ul.clean-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
}

.ec-callstack--operator ul.clean-list > li {
    grid-template-columns: minmax(11rem, 1fr) auto;
    grid-template-areas:
        "peer state"
        "actions actions";
    padding: .85rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel-alt);
}

.ec-callstack--operator .cs-peer {
    grid-area: peer;
    display: grid;
    gap: .2rem;
}

.ec-callstack--operator .cs-peer strong {
    font-size: 1.05rem;
}

.ec-callstack--operator .cs-direction,
.ec-callstack--operator .call-timer {
    margin-left: 0;
    color: var(--ec-muted);
    font-size: .82rem;
}

.ec-callstack--operator .cs-state {
    grid-area: state;
    justify-content: end;
}

.ec-callstack--operator .cs-state .state-wrap {
    min-width: 0;
}

.ec-callstack--operator .cs-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
}

.ec-callstack--operator .cs-actions .btn,
.ec-callstack--operator .cs-actions .ec-btn {
    width: 100%;
    min-width: 0;
}

.ec-callstack--operator .ec-empty {
    margin-top: .25rem;
}

/* Tweak columns for small screens */
@media (max-width: 640px) {
    .ec-callstack ul.clean-list > li {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "peer actions"
            "state actions";
        row-gap: .25rem;
    }

    .ec-callstack .cs-peer {
        grid-area: peer;
    }

    .ec-callstack .cs-state {
        grid-area: state;
    }

    .ec-callstack .cs-actions {
        grid-area: actions;
        justify-self: end;
    }

    .ec-callstack--operator .cs-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
    }
}

/* Subtle badge for state */
.ec-callstack .badge {
    display: inline-block;
    padding: .15rem .4rem;
    border-radius: .4rem;
    font-size: .75rem;
    line-height: 1;
    background: var(--ec-chip-bg, rgba(0,0,0,.06));
    color: var(--ec-chip-fg, inherit);
}

.ec-callstack .badge--ringing {
    background: #e8f1ff;
    color: #0b66ff;
    border: 1px solid #cfe1ff;
}

.ec-callstack .badge--active {
    background: #e9f7ef;
    color: #1e7e34;
    border: 1px solid #cdebd8;
}

.ec-callstack .badge--held {
    background: #fff6e6;
    color: #a56600;
    border: 1px solid #ffe4b8;
}

.ec-callstack .ec-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: .5rem;
}

    .ec-callstack .ec-toolbar.main {
        background: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    .ec-callstack .ec-toolbar .left,
    .ec-callstack .ec-toolbar .right {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.ec-callstack ul.clean-list {
    margin-top: .5rem;
}

/* --- Button sizing normalisation (scoped to CallStack) --- */
.ec-callstack .btn.tiny,
.ec-callstack .ec-btn.tiny {
    height: 28px;
    line-height: 26px;
    padding: 0 .55rem;
    font-size: .85rem;
    border-radius: .4rem;
}

/* Make normal buttons feel consistent too */
.ec-callstack .btn:not(.tiny),
.ec-callstack .ec-btn:not(.tiny) {
    height: 34px;
    line-height: 32px;
    padding: 0 .7rem;
    font-size: .9rem;
    border-radius: .45rem;
}

/* Keep action cluster tidy (list row right column) */
.ec-callstack .cs-actions .btn,
.ec-callstack .cs-actions .ec-btn {
    min-width: 72px;
    justify-content: center;
}

.ec-callstack .cs-state {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .ec-callstack .cs-state .state-wrap {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-width: 110px;
    }

/* Style for the "Active" marker */
.ec-callstack .active-indicator {
    font-size: .75rem;
    font-weight: 500;
    color: #1e7e34;
    background: #e9f7ef;
    border: 1px solid #cdebd8;
    border-radius: .4rem;
    padding: .1rem .4rem;
}

.ec-callstack .call-timer {
    font-size: .8rem;
    opacity: .75;
    margin-left: .5rem;
}

.ec-statuspill {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    height: 30px;
    padding: 0 .46rem;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.70);
    color: #111827;
    cursor: pointer;
    flex: 0 0 auto;
}

html[data-theme="dark"] .ec-statuspill,
body[data-theme="dark"] .ec-statuspill {
    border-color: rgba(174,190,208,.22);
    background: rgba(34,48,71,.82);
    color: var(--ec-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.ec-statuspill-wrap {
    position: relative;
    display: inline-flex;
}

.ec-statuspill--static {
    cursor: default;
}

.ec-statuspill__type {
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    color: rgba(17,24,39,.72);
}

html[data-theme="dark"] .ec-statuspill__type,
body[data-theme="dark"] .ec-statuspill__type {
    color: rgba(237,244,251,.78);
}

.ec-statuspill__reg {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
}

html[data-theme="dark"] .ec-statuspill__reg,
body[data-theme="dark"] .ec-statuspill__reg {
    background: rgba(174,190,208,.18);
    color: var(--ec-muted);
}

.ec-statuspill__reg--registered {
    background: #22c55e;
    color: #fff;
}

html[data-theme="dark"] .ec-statuspill__reg--registered,
body[data-theme="dark"] .ec-statuspill__reg--registered {
    background: var(--ec-success);
    color: #071a12;
}

.ec-statuspill__reg--registering {
    background: #eab308;
    color: #111827;
}

html[data-theme="dark"] .ec-statuspill__reg--registering,
body[data-theme="dark"] .ec-statuspill__reg--registering {
    background: var(--ec-warning);
    color: #1d1603;
}

.ec-statuspill__reg--failed {
    background: #ef4444;
    color: #fff;
}

html[data-theme="dark"] .ec-statuspill__reg--failed,
body[data-theme="dark"] .ec-statuspill__reg--failed {
    background: var(--ec-danger);
    color: #240606;
}

.ec-diagdrawer {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 80;
    box-sizing: border-box;
    width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: min(38rem, calc(100vh - 8rem));
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel);
    box-shadow: var(--ec-shadow);
    color: var(--ec-text);
    white-space: normal;
}

.ec-diagdrawer * {
    min-width: 0;
}

.ec-diagdrawer__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
}

.ec-diagdrawer__head h4 {
    margin: 0;
    font-size: .98rem;
    flex: 1;
}

.ec-diagdrawer__help-link {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-brand);
    font-family: var(--ec-font-sans);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}

.ec-diagdrawer__help-link:hover,
.ec-diagdrawer__help-link:focus-visible {
    border-color: rgba(31,122,236,.35);
    background: var(--ec-panel);
    text-decoration: none;
}

.ec-diagdrawer__deployment-link {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .55rem;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-brand);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: normal;
}

.ec-diagdrawer__deployment-link:hover,
.ec-diagdrawer__deployment-link:focus-visible {
    border-color: rgba(31,122,236,.35);
    background: var(--ec-panel);
    text-decoration: none;
}

.ec-diagdrawer__close {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-muted);
    font-weight: 900;
    cursor: pointer;
}

.ec-diagdrawer__grid {
    display: grid;
    gap: .45rem;
    margin: 0;
}

.ec-diagdrawer__grid > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: .6rem;
}

.ec-diagdrawer dt {
    color: var(--ec-muted);
    font-size: .84rem;
    font-weight: 800;
}

.ec-diagdrawer dd {
    margin: 0;
    font-weight: 700;
}

.ec-diagdrawer__failure {
    display: grid;
    gap: .25rem;
    padding: .6rem;
    border-radius: .55rem;
    background: rgba(239,68,68,.08);
    color: var(--ec-text);
    overflow-wrap: anywhere;
}

.ec-diagdrawer__failure h5 {
    margin: 0;
    font-size: .9rem;
}

.ec-diagdrawer__actions {
    display: grid;
    gap: .4rem;
    color: var(--ec-muted);
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.ec-diagdrawer__subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--ec-text);
    font-weight: 900;
}

.ec-diagdrawer__subhead h5 {
    margin: 0;
    font-size: .9rem;
}

.ec-diagdrawer__actions .ec-btn {
    width: 100%;
    white-space: normal;
}

.ec-diagdrawer__average {
    color: var(--ec-muted);
    font-size: .84rem;
    font-weight: 800;
}

.ec-diagdrawer .rtt-list {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.ec-diagdrawer .rtt-list span {
    padding: .18rem .42rem;
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.ec-diagdrawer__dev {
    display: grid;
    gap: .55rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ec-border);
}

.ec-diagdrawer__livecalls {
    display: grid;
    gap: .55rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ec-border);
}

.ec-diagdrawer__livecalls p {
    margin: 0;
    color: var(--ec-muted);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.ec-diagdrawer__calls {
    display: grid;
    gap: .45rem;
}

.ec-diagdrawer__call {
    display: grid;
    gap: .25rem;
    padding: .55rem;
    border: 1px solid var(--ec-border);
    border-radius: .55rem;
    background: var(--ec-panel-alt);
    font-size: .82rem;
}

.ec-diagdrawer__call > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ec-diagdrawer__call span,
.ec-diagdrawer__call code {
    color: var(--ec-muted);
}

.ec-diagdrawer__call code {
    overflow-wrap: anywhere;
    font-size: .76rem;
}

.ec-diagdrawer__dev p {
    margin: 0;
    color: var(--ec-muted);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.ec-diagdrawer__dev-group {
    display: grid;
    gap: .35rem;
}

.ec-diagdrawer__dev-group > span {
    color: var(--ec-muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ec-diagdrawer__dev-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}

.ec-diagdrawer__dev-buttons .ec-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
}

html[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary,
body[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary {
    border-color: #9ebfe3;
    background: #e8f2ff;
    color: #0e2648;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 4px 12px rgba(14,38,72,.08);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

html[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:hover:not(:disabled),
body[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:hover:not(:disabled) {
    border-color: #6fa2d8;
    background: #d6eaff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 16px rgba(14,38,72,.14);
}

html[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:focus-visible,
body[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:focus-visible {
    outline: none;
    border-color: #2b6fb2;
    box-shadow: 0 0 0 3px rgba(43,111,178,.22), inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:active:not(:disabled),
body[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:active:not(:disabled) {
    background: #c6e0fb;
    transform: translateY(1px);
}

html[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:disabled,
body[data-theme="eurotels"] .ec-diagdrawer .ec-btn.secondary:disabled {
    background: #edf4fb;
    color: #6b7f96;
    border-color: #d0deec;
    box-shadow: none;
}

html[data-theme="eurotels"] .ec-diagdrawer__help-link,
html[data-theme="eurotels"] .ec-diagdrawer__deployment-link,
html[data-theme="eurotels"] .ec-diagdrawer__close,
body[data-theme="eurotels"] .ec-diagdrawer__help-link,
body[data-theme="eurotels"] .ec-diagdrawer__deployment-link,
body[data-theme="eurotels"] .ec-diagdrawer__close {
    border-color: #b7cde6;
    background: #e8f2ff;
    color: #0e4f8f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

html[data-theme="eurotels"] .ec-diagdrawer__help-link:hover,
html[data-theme="eurotels"] .ec-diagdrawer__help-link:focus-visible,
html[data-theme="eurotels"] .ec-diagdrawer__deployment-link:hover,
html[data-theme="eurotels"] .ec-diagdrawer__deployment-link:focus-visible,
html[data-theme="eurotels"] .ec-diagdrawer__close:hover,
html[data-theme="eurotels"] .ec-diagdrawer__close:focus-visible,
body[data-theme="eurotels"] .ec-diagdrawer__help-link:hover,
body[data-theme="eurotels"] .ec-diagdrawer__help-link:focus-visible,
body[data-theme="eurotels"] .ec-diagdrawer__deployment-link:hover,
body[data-theme="eurotels"] .ec-diagdrawer__deployment-link:focus-visible,
body[data-theme="eurotels"] .ec-diagdrawer__close:hover,
body[data-theme="eurotels"] .ec-diagdrawer__close:focus-visible {
    border-color: #6fa2d8;
    background: #d6eaff;
    color: #0e2648;
    text-decoration: none;
}

html[data-theme="eurotels"] .ec-diagdrawer__help-link:active,
html[data-theme="eurotels"] .ec-diagdrawer__deployment-link:active,
html[data-theme="eurotels"] .ec-diagdrawer__close:active,
body[data-theme="eurotels"] .ec-diagdrawer__help-link:active,
body[data-theme="eurotels"] .ec-diagdrawer__deployment-link:active,
body[data-theme="eurotels"] .ec-diagdrawer__close:active {
    background: #c6e0fb;
    transform: translateY(1px);
}

/* Shared connection-quality bars: header pill + CallStack */
.ec-statuspill .bars,
.ec-callstack .bars {
    display: inline-flex;
    gap: 2px;
    margin-left: .35rem;
    align-items: flex-end;
}

    /* Base bar style */
    .ec-statuspill .bars .bar,
    .ec-callstack .bars .bar {
        width: 4px;
        border-radius: 999px 999px 2px 2px;
        background: var(--level-off);
    }

        .ec-statuspill .bars .bar:nth-child(1),
        .ec-callstack .bars .bar:nth-child(1) {
            height: 5px;
        }

        .ec-statuspill .bars .bar:nth-child(2),
        .ec-callstack .bars .bar:nth-child(2) {
            height: 8px;
        }

        .ec-statuspill .bars .bar:nth-child(3),
        .ec-callstack .bars .bar:nth-child(3) {
            height: 11px;
        }

        .ec-statuspill .bars .bar:nth-child(4),
        .ec-callstack .bars .bar:nth-child(4) {
            height: 14px;
        }

        .ec-statuspill .bars .bar:nth-child(5),
        .ec-callstack .bars .bar:nth-child(5) {
            height: 17px;
        }

        /* “On” bars */
        .ec-statuspill .bars .bar.on,
        .ec-callstack .bars .bar.on {
            background: var(--level-on);
        }

@media (prefers-color-scheme: dark) {
    .ec-statuspill {
        border-color: rgba(255,255,255,.14);
        background: rgba(24,24,27,.72);
        color: #f9fafb;
    }

    .ec-statuspill__type {
        color: rgba(249,250,251,.78);
    }
}

html[data-theme="eurotels"] .ec-statuspill,
body[data-theme="eurotels"] .ec-statuspill {
    height: 32px;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.88);
    color: #031e23;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 12px rgba(7,27,56,.16);
}

html[data-theme="eurotels"] .ec-statuspill__type,
body[data-theme="eurotels"] .ec-statuspill__type {
    color: rgba(3,30,35,.72);
}

html[data-theme="eurotels"] .ec-statuspill .bars .bar,
html[data-theme="eurotels"] .ec-callstack .bars .bar,
body[data-theme="eurotels"] .ec-statuspill .bars .bar,
body[data-theme="eurotels"] .ec-callstack .bars .bar {
    background: rgba(100,118,132,.28);
}

html[data-theme="eurotels"] .ec-statuspill .bars .bar.on,
html[data-theme="eurotels"] .ec-callstack .bars .bar.on,
body[data-theme="eurotels"] .ec-statuspill .bars .bar.on,
body[data-theme="eurotels"] .ec-callstack .bars .bar.on {
    background: var(--ec-success);
}

html[data-theme="dark"] .ec-statuspill .bars .bar,
html[data-theme="dark"] .ec-callstack .bars .bar,
body[data-theme="dark"] .ec-statuspill .bars .bar,
body[data-theme="dark"] .ec-callstack .bars .bar {
    background: rgba(174,190,208,.22);
}

html[data-theme="dark"] .ec-statuspill .bars .bar.on,
html[data-theme="dark"] .ec-callstack .bars .bar.on,
body[data-theme="dark"] .ec-statuspill .bars .bar.on,
body[data-theme="dark"] .ec-callstack .bars .bar.on {
    background: var(--ec-success);
}

/* Make disabled buttons clearly look disabled */
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    filter: grayscale(35%);
    cursor: not-allowed;
    box-shadow: none;
}

    /* If your .btn uses hover styles, stop them when disabled */
    .btn:disabled:hover,
    .btn[disabled]:hover {
        transform: none;
        box-shadow: none;
    }

/* Compact Settings tools */
.settings-tools {
    display: grid;
    gap: .45rem;
}

    .settings-tools > h3 {
        margin-bottom: .15rem;
    }

.settings-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-top: 1px solid var(--ec-border);
}

.settings-tool-row__copy {
    min-width: 0;
}

.settings-tool-row__title {
    font-weight: 700;
    line-height: 1.2;
}

.settings-tool-row__note {
    margin-top: .2rem;
    color: var(--ec-muted);
    font-size: .9rem;
    line-height: 1.35;
}

.settings-tools .ec-theme-toggle {
    flex: 0 0 auto;
}

.settings-tool-row__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.settings-tool-icon-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-muted);
    cursor: pointer;
}

    .settings-tool-icon-btn:hover,
    .settings-tool-icon-btn:focus-visible {
        color: var(--ec-brand);
        border-color: rgba(31,122,236,.35);
        box-shadow: var(--ec-shadow-sm);
    }

.settings-tool-icon-btn__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .16s ease;
}

.settings-tool-icon-btn__chevron--open {
    transform: rotate(225deg) translateY(-1px);
}

.ec-logout-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 32px;
    padding: 0 .75rem;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-text);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}

    .ec-logout-btn:hover,
    .ec-logout-btn:focus-visible {
        color: var(--ec-brand);
        border-color: rgba(31,122,236,.35);
        box-shadow: var(--ec-shadow-sm);
    }

    .ec-logout-btn:disabled {
        opacity: .55;
        cursor: wait;
    }

.ec-logout-btn--compact {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    flex: 0 0 auto;
}

.ec-logout-btn__icon {
    display: inline-grid;
    place-items: center;
    line-height: 1;
}

html[data-theme="eurotels"] .ec-logout-btn,
body[data-theme="eurotels"] .ec-logout-btn {
    min-height: 32px;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.90);
    color: #0e2648;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 12px rgba(7,27,56,.16);
}

html[data-theme="eurotels"] .ec-logout-btn:hover,
html[data-theme="eurotels"] .ec-logout-btn:focus-visible,
body[data-theme="eurotels"] .ec-logout-btn:hover,
body[data-theme="eurotels"] .ec-logout-btn:focus-visible {
    color: #134a93;
    border-color: rgba(255,255,255,.44);
    background: #ffffff;
}

html[data-theme="eurotels"] .ec-logout-btn--compact,
body[data-theme="eurotels"] .ec-logout-btn--compact {
    width: 32px;
    height: 32px;
}

.logs-title {
    margin-bottom: .75rem;
}

.logs-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.logs-search {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    color: var(--ec-muted);
    font-weight: 700;
}

    .logs-search .input {
        min-width: min(18rem, 70vw);
    }

.logs-count {
    color: var(--ec-muted);
    font-size: .9rem;
}

html[data-theme="eurotels"] .logs-search,
html[data-theme="eurotels"] .logs-count,
body[data-theme="eurotels"] .logs-search,
body[data-theme="eurotels"] .logs-count {
    color: rgba(248,251,255,.92);
    text-shadow: 0 1px 5px rgba(7,27,56,.34);
}

.logs-export {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.logs-section-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.logs-page {
    display: grid;
    gap: .55rem;
    width: 100%;
}

.logs-empty {
    padding: .9rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    color: var(--ec-muted);
    background: var(--ec-panel);
}

.logs-section {
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel);
    overflow: hidden;
}

.logs-section__header {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.logs-section__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
    opacity: .65;
}

.logs-section__chevron--open {
    transform: rotate(45deg) translateY(-1px);
}

.logs-section__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.logs-section__count,
.logs-section__latest {
    color: var(--ec-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.logs-section__count {
    min-width: 2rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--ec-panel-alt);
    text-align: center;
}

.logs-section__entries {
    display: grid;
    gap: .45rem;
    padding: 0 .75rem .75rem;
}

.logs-entry {
    display: grid;
    gap: .22rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    background: var(--ec-panel-alt);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .86rem;
    line-height: 1.35;
}

.logs-entry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.logs-entry__meta {
    color: var(--ec-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.logs-entry__help-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel);
    color: var(--ec-muted);
    font-weight: 900;
    cursor: pointer;
}

    .logs-entry__help-btn:hover,
    .logs-entry__help-btn:focus-visible {
        color: var(--ec-brand);
        border-color: rgba(31,122,236,.35);
    }

.logs-entry__help {
    display: grid;
    gap: .5rem;
    padding: .5rem .6rem;
    border-left: 3px solid var(--ec-brand);
    border-radius: .35rem;
    background: rgba(31,122,236,.08);
    color: var(--ec-text);
    font-family: var(--ec-font-sans);
    font-size: .86rem;
}

.logs-entry__help-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--ec-muted);
    font-size: .8rem;
}

.logs-entry__message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.logs-entry__data {
    margin: .2rem 0 0;
    padding: .45rem;
    border-radius: .45rem;
    background: rgba(0,0,0,.04);
    color: var(--ec-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.logs-progress-nav {
    position: fixed;
    right: max(1rem, calc((100vw - 72rem) / 2 - 13rem));
    top: 7rem;
    z-index: 20;
    display: grid;
    grid-template-columns: auto auto;
    gap: .55rem .65rem;
    align-items: start;
    max-width: 10.5rem;
    max-height: calc(100vh - 9rem);
    overflow: auto;
    padding: .55rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel);
    box-shadow: var(--ec-shadow);
    font-family: var(--ec-font-sans);
}

.logs-return-top {
    grid-column: 1 / -1;
    padding: .45rem .65rem;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-brand);
    font-weight: 800;
    cursor: pointer;
}

.logs-return-top:hover,
.logs-return-top:focus-visible {
    border-color: rgba(31,122,236,.35);
    background: var(--ec-panel);
}

.logs-progress-nav__track {
    position: relative;
    display: grid;
    gap: .38rem;
    padding: .25rem 0;
}

.logs-progress-nav__track::before {
    content: "";
    position: absolute;
    top: .55rem;
    bottom: .55rem;
    left: .32rem;
    width: 2px;
    border-radius: 999px;
    background: var(--ec-border);
}

.logs-progress-nav__marker {
    position: relative;
    z-index: 1;
    width: .72rem;
    height: .72rem;
    border: 2px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel);
}

.logs-progress-nav__marker.active {
    border-color: var(--ec-brand);
    background: var(--ec-brand);
}

.logs-progress-nav__sections {
    display: grid;
    gap: .24rem;
    min-width: 0;
}

.logs-progress-nav__sections a {
    color: var(--ec-muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.logs-progress-nav__sections a.active {
    color: var(--ec-brand);
}

.logs-progress-nav__sections a:hover,
.logs-progress-nav__sections a:focus-visible {
    color: var(--ec-brand);
    text-decoration: underline;
}

.help-page {
    box-sizing: border-box;
    width: min(72rem, calc(100vw - 2rem));
    max-width: 72rem;
    margin: 0 auto;
    color: var(--ec-text);
    font-family: var(--ec-font-sans);
    line-height: 1.55;
}

.help-hero,
.help-contents,
.help-search-panel,
.help-section,
.help-example,
.help-table-wrap {
    box-sizing: border-box;
    max-width: 100%;
}

.help-page code,
.help-page pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.help-hero {
    padding: .25rem 0 1rem;
    border-bottom: 1px solid var(--ec-border);
}

.help-kicker {
    margin: 0 0 .25rem;
    color: var(--ec-muted);
    font-family: var(--ec-font-sans);
    font-size: .86rem;
    font-weight: 800;
    text-transform: uppercase;
}

.help-hero h1,
.help-section h2,
.help-section h3 {
    font-family: var(--ec-font-sans);
    letter-spacing: 0;
}

.help-hero h1 {
    margin: 0 0 .5rem;
    color: var(--ec-brand-700);
    font-size: clamp(1.65rem, 2.6vw, 2.15rem);
    line-height: 1.15;
}

.help-hero p {
    max-width: 54rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.help-contents {
    display: grid;
    gap: .35rem;
    width: min(34rem, 100%);
    margin: 1rem 0;
    padding: .8rem .95rem;
    border: 1px solid var(--ec-border);
    border-radius: .35rem;
    background: var(--ec-panel);
    font-family: var(--ec-font-sans);
}

.help-contents::before {
    content: "Contents";
    margin-bottom: .25rem;
    font-weight: 900;
}

.help-contents a {
    color: var(--ec-brand-700);
    font-weight: 700;
    text-decoration: none;
}

.help-contents a:hover,
.help-contents a:focus-visible {
    text-decoration: underline;
}

.help-progress-nav {
    position: fixed;
    right: max(1rem, calc((100vw - 72rem) / 2 - 13rem));
    top: 7rem;
    z-index: 20;
    display: grid;
    grid-template-columns: auto auto;
    gap: .55rem .65rem;
    align-items: start;
    max-width: 9.5rem;
    padding: .55rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel);
    box-shadow: var(--ec-shadow);
    font-family: var(--ec-font-sans);
}

.help-return-top {
    grid-column: 1 / -1;
    padding: .45rem .65rem;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel-alt);
    color: var(--ec-brand);
    font-weight: 800;
    cursor: pointer;
}

.help-return-top:hover,
.help-return-top:focus-visible {
    border-color: rgba(31,122,236,.35);
    background: var(--ec-panel);
}

.help-progress-nav__track {
    position: relative;
    display: grid;
    gap: .38rem;
    padding: .25rem 0;
}

.help-progress-nav__track::before {
    content: "";
    position: absolute;
    top: .55rem;
    bottom: .55rem;
    left: .32rem;
    width: 2px;
    border-radius: 999px;
    background: var(--ec-border);
}

.help-progress-nav__marker {
    position: relative;
    z-index: 1;
    width: .72rem;
    height: .72rem;
    border: 2px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel);
}

.help-progress-nav__marker.active {
    border-color: var(--ec-brand);
    background: var(--ec-brand);
}

.help-progress-nav__sections {
    display: grid;
    gap: .24rem;
    min-width: 0;
}

.help-progress-nav__sections a {
    color: var(--ec-muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
}

.help-progress-nav__sections a.active {
    color: var(--ec-brand);
}

.help-progress-nav__sections a:hover,
.help-progress-nav__sections a:focus-visible {
    color: var(--ec-brand);
    text-decoration: underline;
}

.help-search-panel {
    display: flex;
    align-items: end;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: .8rem .95rem;
    border: 1px solid var(--ec-border);
    border-radius: .35rem;
    background: var(--ec-panel);
    font-family: var(--ec-font-sans);
}

.help-search {
    display: grid;
    gap: .35rem;
    min-width: min(22rem, 100%);
    color: var(--ec-muted);
    font-weight: 800;
}

.help-search .input {
    width: 100%;
}

.help-search-panel__count,
.help-muted {
    color: var(--ec-muted);
    font-family: var(--ec-font-sans);
    font-size: .88rem;
}

.help-config-search {
    margin: .8rem 0 .4rem;
}

.help-empty {
    padding: .8rem .95rem;
    border: 1px solid var(--ec-border);
    border-radius: .35rem;
    background: var(--ec-panel);
    color: var(--ec-muted);
    font-family: var(--ec-font-sans);
}

.help-empty--table {
    border-width: 1px 0 0;
    border-radius: 0;
}

.help-section {
    padding: 1rem 0;
    border-top: 1px solid var(--ec-border);
}

.help-section:first-of-type {
    border-top: 0;
}

.help-section h2 {
    margin: 0 0 .75rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--ec-border);
    color: var(--ec-brand-700);
    font-size: 1.45rem;
}

.help-section h3 {
    margin: 1rem 0 .35rem;
    color: var(--ec-text);
    font-size: 1.05rem;
}

.help-section p {
    margin: .45rem 0;
    overflow-wrap: anywhere;
}

.help-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ec-border);
    border-radius: .35rem;
    background: var(--ec-panel);
}

.help-config-table {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
    font-family: var(--ec-font-sans);
    font-size: .88rem;
    line-height: 1.4;
}

.help-config-table th,
.help-config-table td {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--ec-border);
    vertical-align: top;
    text-align: left;
}

.help-config-table th {
    background: var(--ec-panel-alt);
    color: var(--ec-brand-700);
    font-weight: 900;
}

.help-config-table tr:last-child td {
    border-bottom: 0;
}

.help-config-table code,
.help-section code {
    padding: .08rem .24rem;
    border-radius: .25rem;
    background: var(--ec-bg-wash-brand);
    color: var(--ec-brand-700);
}

.help-example-grid {
    display: grid;
    gap: .8rem;
}

.help-example {
    padding: .8rem .9rem;
    border: 1px solid var(--ec-border);
    border-radius: .35rem;
    background: var(--ec-panel);
}

.help-example h3 {
    margin-top: 0;
}

.help-example pre {
    margin: .7rem 0 0;
    padding: .75rem;
    border-radius: .35rem;
    background: var(--ec-panel-alt);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.45;
}

html[data-theme="eurotels"] .help-page,
body[data-theme="eurotels"] .help-page {
    color: #f7fbff;
}

html[data-theme="eurotels"] .help-hero,
body[data-theme="eurotels"] .help-hero {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .75rem;
    background: rgba(14,38,72,.72);
    box-shadow: 0 12px 30px rgba(8,24,48,.24);
}

html[data-theme="eurotels"] .help-hero h1,
html[data-theme="eurotels"] .help-hero p,
html[data-theme="eurotels"] .help-kicker,
body[data-theme="eurotels"] .help-hero h1,
body[data-theme="eurotels"] .help-hero p,
body[data-theme="eurotels"] .help-kicker {
    color: #f7fbff;
}

html[data-theme="eurotels"] .help-contents,
html[data-theme="eurotels"] .help-search-panel,
html[data-theme="eurotels"] .help-section,
html[data-theme="eurotels"] .help-example,
html[data-theme="eurotels"] .help-table-wrap,
html[data-theme="eurotels"] .help-empty,
body[data-theme="eurotels"] .help-contents,
body[data-theme="eurotels"] .help-search-panel,
body[data-theme="eurotels"] .help-section,
body[data-theme="eurotels"] .help-example,
body[data-theme="eurotels"] .help-table-wrap,
body[data-theme="eurotels"] .help-empty {
    border-color: #c9d8e8;
}

html[data-theme="eurotels"] .help-contents,
html[data-theme="eurotels"] .help-search-panel,
html[data-theme="eurotels"] .help-section,
html[data-theme="eurotels"] .help-example,
html[data-theme="eurotels"] .help-table-wrap,
html[data-theme="eurotels"] .help-empty,
body[data-theme="eurotels"] .help-contents,
body[data-theme="eurotels"] .help-search-panel,
body[data-theme="eurotels"] .help-section,
body[data-theme="eurotels"] .help-example,
body[data-theme="eurotels"] .help-table-wrap,
body[data-theme="eurotels"] .help-empty {
    background: rgba(255,255,255,.96);
    color: #031e23;
}

html[data-theme="eurotels"] .help-section,
body[data-theme="eurotels"] .help-section {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid #c9d8e8;
    border-radius: .75rem;
    box-shadow: 0 10px 24px rgba(8,24,48,.12);
}

html[data-theme="eurotels"] .help-section h2,
html[data-theme="eurotels"] .help-contents a,
html[data-theme="eurotels"] .help-config-table th,
html[data-theme="eurotels"] .help-config-table code,
html[data-theme="eurotels"] .help-section code,
body[data-theme="eurotels"] .help-section h2,
body[data-theme="eurotels"] .help-contents a,
body[data-theme="eurotels"] .help-config-table th,
body[data-theme="eurotels"] .help-config-table code,
body[data-theme="eurotels"] .help-section code {
    color: #0e2648;
}

html[data-theme="eurotels"] .help-progress-nav,
html[data-theme="eurotels"] .logs-progress-nav,
body[data-theme="eurotels"] .help-progress-nav,
body[data-theme="eurotels"] .logs-progress-nav {
    border-color: rgba(255,255,255,.22);
    background: rgba(14,38,72,.92);
    box-shadow: 0 14px 30px rgba(7,27,56,.26);
    color: #f8fbff;
}

html[data-theme="eurotels"] .help-return-top,
html[data-theme="eurotels"] .logs-return-top,
body[data-theme="eurotels"] .help-return-top,
body[data-theme="eurotels"] .logs-return-top {
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.13);
    color: #ffffff;
}

html[data-theme="eurotels"] .help-return-top:hover,
html[data-theme="eurotels"] .help-return-top:focus-visible,
html[data-theme="eurotels"] .logs-return-top:hover,
html[data-theme="eurotels"] .logs-return-top:focus-visible,
body[data-theme="eurotels"] .help-return-top:hover,
body[data-theme="eurotels"] .help-return-top:focus-visible,
body[data-theme="eurotels"] .logs-return-top:hover,
body[data-theme="eurotels"] .logs-return-top:focus-visible {
    border-color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.20);
}

html[data-theme="eurotels"] .help-progress-nav__track::before,
html[data-theme="eurotels"] .logs-progress-nav__track::before,
body[data-theme="eurotels"] .help-progress-nav__track::before,
body[data-theme="eurotels"] .logs-progress-nav__track::before {
    background: rgba(255,255,255,.26);
}

html[data-theme="eurotels"] .help-progress-nav__marker,
html[data-theme="eurotels"] .logs-progress-nav__marker,
body[data-theme="eurotels"] .help-progress-nav__marker,
body[data-theme="eurotels"] .logs-progress-nav__marker {
    border-color: rgba(255,255,255,.46);
    background: #0e2648;
}

html[data-theme="eurotels"] .help-progress-nav__marker.active,
html[data-theme="eurotels"] .logs-progress-nav__marker.active,
body[data-theme="eurotels"] .help-progress-nav__marker.active,
body[data-theme="eurotels"] .logs-progress-nav__marker.active {
    border-color: #ffffff;
    background: #7dd3fc;
}

html[data-theme="eurotels"] .help-progress-nav__sections a,
html[data-theme="eurotels"] .logs-progress-nav__sections a,
body[data-theme="eurotels"] .help-progress-nav__sections a,
body[data-theme="eurotels"] .logs-progress-nav__sections a {
    color: rgba(248,251,255,.82);
}

html[data-theme="eurotels"] .help-progress-nav__sections a.active,
html[data-theme="eurotels"] .help-progress-nav__sections a:hover,
html[data-theme="eurotels"] .help-progress-nav__sections a:focus-visible,
html[data-theme="eurotels"] .logs-progress-nav__sections a.active,
html[data-theme="eurotels"] .logs-progress-nav__sections a:hover,
html[data-theme="eurotels"] .logs-progress-nav__sections a:focus-visible,
body[data-theme="eurotels"] .help-progress-nav__sections a.active,
body[data-theme="eurotels"] .help-progress-nav__sections a:hover,
body[data-theme="eurotels"] .help-progress-nav__sections a:focus-visible,
body[data-theme="eurotels"] .logs-progress-nav__sections a.active,
body[data-theme="eurotels"] .logs-progress-nav__sections a:hover,
body[data-theme="eurotels"] .logs-progress-nav__sections a:focus-visible {
    color: #ffffff;
}

@media (max-width: 640px) {
    .logs-search {
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        flex-direction: column;
    }

    .logs-search .input {
        min-width: 0;
        width: 100%;
    }

    .help-page {
        width: 100%;
        max-width: none;
        padding: 0 .85rem 6.5rem;
        overflow-x: hidden;
        font-family: var(--ec-font-sans);
    }

    .help-hero h1 {
        font-size: 1.38rem;
        line-height: 1.2;
    }

    .help-hero p,
    .help-section p {
        font-size: .95rem;
        line-height: 1.5;
    }

    .help-contents,
    .help-search-panel {
        width: 100%;
        margin: .75rem 0;
        padding: .75rem;
    }

    .help-search {
        min-width: 0;
        width: 100%;
    }

    .help-section {
        padding: .85rem 0;
    }

    .help-section h2 {
        font-size: 1.22rem;
    }

    .help-section h3 {
        font-size: 1rem;
    }

    .help-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .help-config-table {
        min-width: 42rem;
    }

    .help-progress-nav,
    .logs-progress-nav {
        grid-template-columns: 1fr;
        max-width: none;
        right: .75rem;
        top: auto;
        bottom: 5.75rem;
        padding: .45rem;
        border-radius: 999px;
    }

    .help-return-top,
    .logs-return-top {
        white-space: nowrap;
    }

    .help-progress-nav__track,
    .help-progress-nav__sections,
    .logs-progress-nav__track,
    .logs-progress-nav__sections {
        display: none;
    }
}

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

.mini-card {
    display: grid;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    background: var(--ec-panel-alt);
}

.mini-title {
    margin: 0;
    font-size: 1rem;
}

.row-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .5rem;
    align-items: center;
}

    .row-compact label {
        grid-column: 1 / -1;
    }

    .row-compact .input {
        min-width: 0;
        width: 100%;
    }

.inline-controls,
.card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.card-footer .input {
    min-width: 0;
    flex: 1 1 12rem;
}

.devlist summary {
    cursor: pointer;
    color: var(--ec-brand);
    font-weight: 700;
}

.clean-list {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
}

.card-footer {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--ec-border);
}

@media (max-width: 640px) {
    .settings-tool-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .settings-tool-row .ec-theme-toggle {
        width: 100%;
    }

    .settings-tool-row__actions {
        width: 100%;
        justify-content: flex-end;
    }

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

    .row-compact {
        grid-template-columns: 1fr;
    }

    .row-compact .btn,
    .inline-controls .btn {
        width: 100%;
    }

    .card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .card-footer .btn,
    .card-footer .input {
        width: 100%;
    }
}

/* Phone-shell profile cards for Settings */
.ios-shell .ios-content .settings-profile-cards {
    display: grid;
    gap: .85rem;
    margin-top: .75rem;
}

.ios-shell .ios-content .settings-profile-card {
    background: var(--ec-panel-alt);
    border: 1px solid var(--ec-border);
    border-radius: 1rem;
    padding: .9rem;
    box-shadow: var(--ec-shadow-sm);
}

.ios-shell .ios-content .settings-profile-card__head {
    display: grid;
    gap: .35rem;
}

.ios-shell .ios-content .settings-profile-card__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-weight: 700;
}

.ios-shell .ios-content .settings-profile-card__uri {
    font-size: .92rem;
    word-break: break-word;
    opacity: .82;
}

.ios-shell .ios-content .settings-profile-card__devices {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
}

.ios-shell .ios-content .settings-profile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}

    .ios-shell .ios-content .settings-profile-card__actions .btn {
        flex: 1 1 calc(50% - .25rem);
        min-width: 0;
        padding-inline: .8rem;
    }

.ios-shell .ios-content .settings-profile-card__status {
    margin-top: .7rem;
    font-size: .92rem;
}

/* Desktop profile cards for Settings */
.settings-profile-desktop-list {
    display: grid;
    gap: 1rem;
}

.settings-profile-desktop-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    gap: 1rem 1.25rem;
    padding: .95rem 1.1rem;
    border: 1px solid var(--ec-border);
    border-radius: 1rem;
    background: var(--ec-panel-alt);
    box-shadow: var(--ec-shadow-sm);
}

.settings-profile-desktop-card__main {
    display: grid;
    gap: .8rem;
    min-width: 0;
}

.settings-profile-desktop-card__identity {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.settings-profile-desktop-card__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 1rem;
}

.settings-profile-desktop-card__uri {
    font-size: .9rem;
    word-break: break-word;
    opacity: .75;
}

.settings-profile-desktop-card__devices {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.settings-profile-desktop-card__actions {
    display: grid;
    gap: .6rem;
    align-content: start;
}

.settings-profile-desktop-card__actions-primary {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-end;
}

    .settings-profile-desktop-card__actions-primary .settings-profile-menu {
        margin-left: auto;
    }

.settings-profile-desktop-card__status {
    font-size: .92rem;
    opacity: .85;
}

.settings-profile-desktop-card__actions .btn {
    height: 32px;
    min-width: 96px;
    padding: 0 .85rem;
    font-size: .88rem;
    border-radius: 999px;
}

    .settings-profile-desktop-card__actions .btn.danger {
        background: var(--ec-danger);
        color: #fff;
        border: 0;
    }

    .settings-profile-desktop-card__actions .btn.secondary {
        background: #e8eef9;
        color: #13407f;
    }

    .settings-profile-desktop-card__actions .btn.ghost {
        background: transparent;
        color: var(--ec-brand);
        border: 1px solid var(--ec-border);
    }

.ios-shell .ios-content .settings-profile-desktop-list {
    display: none;
}

.ios-shell .ios-content .settings-profile-cards {
    display: grid;
}

@media (min-width: 641px) {
    .settings-profile-cards {
        display: none;
    }
}

/* Desktop profile menu */
.settings-profile-menu {
    position: relative;
    flex: 0 0 auto;
}

    .settings-profile-menu summary {
        list-style: none;
    }

        .settings-profile-menu summary::-webkit-details-marker {
            display: none;
        }

.settings-profile-menu__trigger {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-panel);
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: var(--ec-shadow-sm);
}

    .settings-profile-menu__trigger:hover {
        color: var(--ec-brand);
        background: var(--ec-panel-alt);
    }

.settings-profile-menu[open] .settings-profile-menu__trigger {
    color: var(--ec-brand);
    border-color: var(--ec-brand);
}

.settings-profile-menu__popover {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 170px;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: .75rem;
    box-shadow: var(--ec-shadow);
    padding: .35rem;
    z-index: 20;
    display: grid;
    gap: .2rem;
}

.settings-profile-menu__item {
    border: 0;
    background: transparent;
    color: var(--ec-text);
    text-align: left;
    border-radius: .55rem;
    padding: .55rem .7rem;
    cursor: pointer;
    font: inherit;
}

    .settings-profile-menu__item:hover {
        background: var(--ec-panel-alt);
        color: var(--ec-brand);
    }

.settings-profile-menu__item--danger {
    color: var(--ec-danger);
}

    .settings-profile-menu__item--danger:hover {
        background: rgba(220, 38, 38, 0.08);
        color: var(--ec-danger);
    }
/* ---------------- Shared incoming call banner ---------------- */

.ios-call.ios-call--incoming {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
    margin: 0;
    padding: 14px 14px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,250,.94));
    color: #0f172a;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.08);
    z-index: 2147482500;
    pointer-events: none;
}

    .ios-call.ios-call--incoming .ios-call__status--incoming {
        color: #475569;
        text-align: center;
        font-size: .9rem;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .ios-call.ios-call--incoming .ios-call__remote--incoming {
        color: #0f172a;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1.1;
        margin-top: .15rem;
        word-break: break-word;
    }

    .ios-call.ios-call--incoming .ios-call__incoming-actions {
        margin-top: .95rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        justify-items: center;
    }

    .ios-call.ios-call--incoming .ios-incoming-action {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .45rem;
        padding: 0;
        cursor: pointer;
        color: #334155;
        pointer-events: auto;
    }

    .ios-call.ios-call--incoming .ios-incoming-action__circle {
        width: 62px;
        height: 62px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 1.35rem;
        font-weight: 800;
        box-shadow: 0 6px 16px rgba(0,0,0,.14);
    }

    .ios-call.ios-call--incoming .ios-incoming-action__circle--decline {
        background: #ff3b30;
    }

    .ios-call.ios-call--incoming .ios-incoming-action__circle--answer {
        background: #34c759;
    }

    .ios-call.ios-call--incoming .ios-incoming-action__label {
        font-size: .82rem;
        font-weight: 600;
        color: inherit;
    }

    .ios-call.ios-call--incoming .ios-incoming-action:active .ios-incoming-action__circle {
        transform: translateY(1px) scale(.98);
    }

@media (max-width: 640px) {
    .ios-call.ios-call--incoming {
        top: 12px;
        width: calc(100vw - 16px);
        border-radius: 18px;
    }
}

html[data-theme="dark"] .ios-call.ios-call--incoming,
body[data-theme="dark"] .ios-call.ios-call--incoming {
    background: linear-gradient(180deg, rgba(28,28,30,.96), rgba(36,36,38,.94));
    color: #f8fafc;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 30px rgba(0,0,0,.34);
}

html[data-theme="dark"] .ios-call.ios-call--incoming .ios-call__status--incoming,
html[data-theme="dark"] .ios-call.ios-call--incoming .ios-incoming-action,
body[data-theme="dark"] .ios-call.ios-call--incoming .ios-call__status--incoming,
body[data-theme="dark"] .ios-call.ios-call--incoming .ios-incoming-action {
    color: #cbd5e1;
}

html[data-theme="dark"] .ios-call.ios-call--incoming .ios-call__remote--incoming,
body[data-theme="dark"] .ios-call.ios-call--incoming .ios-call__remote--incoming {
    color: #ffffff;
}
.ec-provisioning-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

html[data-theme="eurotels"] .ec-provisioning-gate {
    background: transparent;
}

.ec-provisioning-card {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--ec-surface, #fff);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

html[data-theme="eurotels"] .ec-provisioning-card {
    max-width: 400px;
    padding: 2.25rem 1.25rem 2rem;
    border: 0;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(7, 27, 56, .20);
}

.ec-provisioning-logo {
    display: block;
    width: 170px;
    height: 65px;
    object-fit: contain;
    margin: 0 auto 1.45rem;
}

    .ec-provisioning-card h1 {
        margin-top: 0;
        margin-bottom: .5rem;
    }

html[data-theme="eurotels"] .ec-provisioning-card h1,
html[data-theme="eurotels"] .ec-provisioning-subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ec-provisioning-subtitle {
    margin-bottom: 1rem;
}

.ec-provisioning-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1rem;
}

.ec-provisioning-error {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: #fff1f1;
    color: #8a1f1f;
}
.ec-input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 .85rem;
    border: 1px solid #cfd6e4;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 16px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .ec-input:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
    }

    .ec-input::placeholder {
        color: #94a3b8;
    }

.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #111827;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

    .ec-btn:hover:not(:disabled) {
        background: #1f2937;
    }

    .ec-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.14);
    }

    .ec-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .ec-btn.secondary {
        background: #ffffff;
        color: #111827;
        border-color: #cfd6e4;
    }

        .ec-btn.secondary:hover:not(:disabled) {
            background: #f8fafc;
        }

.ec-provisioning-input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 .85rem;
    border: 1px solid #d6dbe6;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 16px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .ec-provisioning-input:focus {
        border-color: #b8c2d1;
        box-shadow: 0 0 0 3px rgba(184, 194, 209, 0.18);
        background: #ffffff;
    }

    .ec-provisioning-input[type="password"] {
        background: #ffffff;
        color: #0f172a;
        -webkit-text-fill-color: #0f172a;
    }

    .ec-provisioning-input:-webkit-autofill,
    .ec-provisioning-input:-webkit-autofill:hover,
    .ec-provisioning-input:-webkit-autofill:focus,
    .ec-provisioning-input:-webkit-autofill:active {
        -webkit-text-fill-color: #0f172a;
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
        box-shadow: 0 0 0 1000px #ffffff inset;
        transition: background-color 9999s ease-in-out 0s;
    }

.ec-provisioning-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #d6dbe6;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

html[data-theme="eurotels"] .ec-provisioning-btn {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: #1d5397;
    color: #ffffff;
}

html[data-theme="eurotels"] .ec-provisioning-btn:hover:not(:disabled) {
    background: #16457f;
}

    .ec-provisioning-btn:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #c7cfdb;
    }

    .ec-provisioning-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(184, 194, 209, 0.18);
    }

    .ec-provisioning-btn:disabled {
        background: #f8fafc;
        color: #94a3b8;
        border-color: #e2e8f0;
        cursor: not-allowed;
        opacity: 1;
    }

.ec-provisioning-link {
    margin-top: .9rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #475569;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.ec-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .35);
}

.ec-modal-card {
    width: 100%;
    max-width: 440px;
    padding: 1.5rem;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}

    .ec-modal-card h2 {
        margin-top: 0;
    }

.ec-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.ec-favourites-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .25rem 0 .75rem;
}

.ec-favourites-head h2 {
    margin: 0;
}

.ec-favourites-head--compact {
    justify-content: flex-end;
    margin-top: -.15rem;
}

.ec-favourites-refresh {
    flex: 0 0 auto;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: var(--ec-panel);
    color: var(--ec-text);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    padding: .45rem .6rem;
    cursor: pointer;
}

.ec-favourites-refresh:disabled {
    cursor: default;
    opacity: .55;
}

.ec-favourites-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin: -.15rem 0 .6rem;
    padding: .5rem .6rem;
    border: 1px solid rgba(37,99,235,.22);
    border-radius: 6px;
    background: rgba(239,246,255,.96);
    color: #1e3a8a;
    font-size: .78rem;
    line-height: 1.35;
}

.ec-favourites-banner__body {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.ec-favourites-banner__action {
    border: 1px solid rgba(37,99,235,.24);
    border-radius: 5px;
    background: #ffffff;
    color: #1d4ed8;
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    padding: .32rem .45rem;
    cursor: pointer;
}

.ec-favourites-banner__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.ec-favourites-upgrade {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(7rem, .8fr) auto;
    gap: .45rem;
    margin: -.25rem 0 .65rem;
    padding: .55rem;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 6px;
    background: rgba(248,250,252,.96);
}

.ec-favourites-upgrade__input {
    min-width: 0;
    height: 30px;
    border: 1px solid var(--ec-border);
    border-radius: 5px;
    background: #ffffff;
    color: var(--ec-text);
    font: inherit;
    font-size: .78rem;
    padding: 0 .45rem;
}

.ec-favourites-upgrade__button {
    height: 30px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--ec-brand);
    color: #ffffff;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    padding: 0 .58rem;
    cursor: pointer;
    white-space: nowrap;
}

.ec-favourites-upgrade__button:disabled {
    opacity: .6;
    cursor: default;
}

.ec-favourites-table {
    display: grid;
    width: 100%;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ec-panel);
}

.ec-favourites-table__head,
.ec-favourite-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(8rem, 1.2fr) minmax(4.5rem, .7fr) minmax(5.75rem, .8fr) 3.25rem;
    align-items: center;
}

.ec-favourites-table__head {
    min-height: 30px;
    padding: 0 .45rem;
    border-bottom: 1px solid var(--ec-border);
    background: rgba(148,163,184,.1);
    color: var(--ec-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ec-favourite-row {
    min-height: 40px;
    padding: 0 .45rem;
    border: 0;
    border-bottom: 1px solid var(--ec-border);
    background: transparent;
    color: var(--ec-text);
    cursor: pointer;
}

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

.ec-favourite-row:hover,
.ec-favourite-row:focus-visible {
    background: var(--ec-panel-alt);
    outline: none;
}

.ec-favourite-cell {
    min-width: 0;
    padding: 0 .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-favourite-cell--status,
.ec-favourite-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-favourite-name {
    font-weight: 750;
    color: var(--ec-text);
}

.ec-favourite-extension,
.ec-favourite-presence {
    font-size: .78rem;
    color: var(--ec-muted);
}

.ec-favourite-dot {
    width: .58rem;
    height: .58rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #94a3b8;
}

.ec-favourite-dot--available {
    background: #22c55e;
}

.ec-favourite-dot--busy {
    background: #ef4444;
}

.ec-favourite-dot--ringing {
    background: #f59e0b;
}

.ec-favourite-dot--unknown {
    background: #94a3b8;
}

.ec-favourite-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: var(--ec-panel);
    color: var(--ec-brand-700);
    cursor: pointer;
}

.ec-favourite-call:hover,
.ec-favourite-call:focus-visible {
    background: var(--ec-brand);
    color: #ffffff;
    outline: none;
}

.ec-favourite-call:disabled {
    cursor: default;
    opacity: .45;
}

.ec-favourite-call:disabled:hover {
    background: var(--ec-panel);
    color: var(--ec-brand-700);
}

html[data-theme="dark"] .ec-favourites-banner,
html[data-theme="eurotels"] .ec-favourites-banner {
    color: #0f172a;
    background: #eef6ff;
    border-color: #b7d4ff;
}

html[data-theme="dark"] .ec-favourites-banner__action,
html[data-theme="eurotels"] .ec-favourites-banner__action {
    background: #ffffff;
    border-color: #9fc5ff;
    color: #174ea6;
}

html[data-theme="dark"] .ec-favourites-upgrade,
html[data-theme="eurotels"] .ec-favourites-upgrade {
    background: rgba(15,23,42,.22);
    border-color: rgba(147,197,253,.24);
}

html[data-theme="dark"] .ec-favourites-upgrade__input,
html[data-theme="eurotels"] .ec-favourites-upgrade__input {
    background: rgba(255,255,255,.94);
    color: #0f172a;
}

@media (max-width: 640px) {
    .ec-favourites-table__head {
        display: none;
    }

    .ec-favourites-table {
        border-radius: 7px;
    }

    .ec-favourite-row {
        grid-template-columns: 2.25rem minmax(0, 1fr) 4rem 2.75rem;
        grid-template-areas:
            "status name presence actions"
            "status extension presence actions";
        min-height: 46px;
        padding-block: .24rem;
    }

    .ec-favourite-cell--status {
        grid-area: status;
    }

    .ec-favourite-name {
        grid-area: name;
    }

    .ec-favourite-extension {
        grid-area: extension;
    }

    .ec-favourite-presence {
        grid-area: presence;
        text-align: right;
    }

    .ec-favourite-actions {
        grid-area: actions;
    }

    .ec-favourites-upgrade {
        grid-template-columns: 1fr;
    }
}

.ets-unlock-logo {
    display: block;
    width: 170px;
    height: 65px;
    object-fit: contain;
    margin: 0 auto .85rem;
}

.ets-unlock-container.swal2-backdrop-show {
    background: var(--ec-bg) !important;
}

html[data-theme="dark"] .ets-unlock-container.swal2-backdrop-show {
    background: linear-gradient(180deg, #111927 0%, #101725 54%, #0f1623 100%) !important;
}

.ets-unlock-modal {
    width: min(30rem, 92vw) !important;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    background: var(--ec-panel);
    color: var(--ec-text);
    box-shadow: var(--ec-shadow);
}

.ets-unlock-modal .modal-head {
    display: none;
}

.ets-unlock-modal .swal2-html-container {
    padding-inline: 1.25rem;
}

.ets-unlock-modal .ets-modal-form.modern {
    gap: .9rem;
}

.ets-unlock-modal .grid-2 {
    grid-template-columns: 1fr;
    gap: .45rem;
}

.ets-unlock-modal .grid-2 > label[aria-hidden="true"] {
    display: none;
}

.ets-unlock-modal .form-label {
    color: var(--ec-muted);
}

.ets-unlock-modal .input {
    height: 48px;
    border-color: var(--ec-border);
    border-radius: 8px;
    background: var(--ec-panel-alt);
    color: var(--ec-text);
    font-size: 16px;
}

.ets-unlock-modal .input:focus {
    border-color: var(--ec-brand);
    box-shadow: var(--ec-ring);
}

.ets-unlock-modal .input-with-btn.right .btn {
    background: var(--ec-panel);
    color: var(--ec-brand-700);
    border: 1px solid var(--ec-border);
    box-shadow: none;
}

.ets-unlock-modal .unlock-help {
    color: var(--ec-muted);
}

.ets-unlock-modal .swal2-actions .btn {
    min-height: 40px;
    border-radius: 8px;
}

.ets-unlock-modal .swal2-confirm {
    background: var(--ec-brand);
    color: #ffffff;
}

.ets-unlock-modal .swal2-deny,
.ets-unlock-modal .swal2-cancel {
    background: var(--ec-panel-alt);
    color: var(--ec-brand-700);
    border-color: var(--ec-border);
}

html[data-theme="eurotels"] .ets-unlock-container.swal2-backdrop-show {
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='420' viewBox='0 0 1440 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233a74b4' stroke-width='1' opacity='.34'%3E%3Cpath d='M0 150 C240 90 410 205 650 145 S1030 55 1440 120'/%3E%3Cpath d='M0 165 C240 105 410 220 650 160 S1030 70 1440 135'/%3E%3Cpath d='M0 180 C240 120 410 235 650 175 S1030 85 1440 150'/%3E%3Cpath d='M0 195 C240 135 410 250 650 190 S1030 100 1440 165'/%3E%3Cpath d='M0 210 C240 150 410 265 650 205 S1030 115 1440 180'/%3E%3Cpath d='M0 225 C240 165 410 280 650 220 S1030 130 1440 195'/%3E%3Cpath d='M0 240 C240 180 410 295 650 235 S1030 145 1440 210'/%3E%3Cpath d='M0 255 C240 195 410 310 650 250 S1030 160 1440 225'/%3E%3Cpath d='M0 270 C240 210 410 325 650 265 S1030 175 1440 240'/%3E%3Cpath d='M0 285 C240 225 410 340 650 280 S1030 190 1440 255'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #235b9d 0%, #1d4f89 58%, #173f72 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% min(48rem, 58vh), cover !important;
    background-position: center 46%, center !important;
}

html[data-theme="eurotels"] .ets-unlock-modal {
    border: 0;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(7, 27, 56, .20);
}

html[data-theme="eurotels"] .ets-unlock-modal .form-label {
    color: #647684;
}

html[data-theme="eurotels"] .ets-unlock-modal .input {
    height: 48px;
    border-color: #d6dbe6;
    border-radius: 6px;
    background: #f3f3f3;
    color: #0f172a;
}

html[data-theme="eurotels"] .ets-unlock-modal .input:focus {
    border-color: #1d5397;
    box-shadow: 0 0 0 3px rgba(29,83,151,.16);
}

html[data-theme="eurotels"] .ets-unlock-modal .input-with-btn.right .btn {
    background: transparent;
    color: #0e2648;
    border: 0;
    box-shadow: none;
}

html[data-theme="eurotels"] .ets-unlock-modal .unlock-help {
    color: #475569;
}

html[data-theme="eurotels"] .ets-unlock-modal .swal2-actions .btn {
    min-height: 40px;
    border-radius: 8px;
}

html[data-theme="eurotels"] .ets-unlock-modal .swal2-confirm {
    background: #1d5397;
    color: #ffffff;
}

html[data-theme="eurotels"] .ets-unlock-modal .swal2-deny,
html[data-theme="eurotels"] .ets-unlock-modal .swal2-cancel {
    background: #eef3f9;
    color: #0e2648;
    border-color: #d6e0ec;
}
.unlock-options {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .25rem;
}

.unlock-help {
    line-height: 1.4;
}

.unlock-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.ets-unlock-modal .swal2-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .5rem;
}

    .ets-unlock-modal .swal2-actions .btn {
        white-space: nowrap;
    }

@media (max-width: 640px) {
    .ets-unlock-modal {
        width: calc(100vw - 1.25rem) !important;
        margin-inline: .625rem;
    }

    .ets-unlock-modal .swal2-html-container {
        padding-inline: .95rem;
    }

    .ets-unlock-modal .swal2-actions {
        flex-wrap: wrap;
    }

    .ets-unlock-modal .swal2-actions .btn {
        flex: 1 1 auto;
        min-width: 8rem;
    }
}

body.ets-app-resetting {
    overflow: hidden;
}

/*
 * Mobile Safari zooms the viewport when an editable control is focused with a
 * computed font size below 16px. Keep every mobile editing surface at the
 * threshold so focus never changes the page scale.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}

    body.ets-app-resetting::before {
        content: "";
        position: fixed;
        inset: 0;
        background: #f5f7fb;
        z-index: 999999;
    }