:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-strong: #f0f5f2;
    --text: #17202a;
    --muted: #5f6f7a;
    --line: #d8e0e6;
    --primary: #246b61;
    --primary-dark: #15534a;
    --danger: #b42318;
    --success: #1f7a4d;
    --warning-bg: #fff7df;
    --shadow: 0 18px 45px rgba(23, 32, 42, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

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

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    font-size: 2rem;
    line-height: 1.15;
}

h2 {
    font-size: 1.25rem;
}

code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfcfd;
}

input,
textarea,
select,
button {
    font: inherit;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
    background: #fff;
    color: var(--text);
}

input[type="color"] {
    min-height: 44px;
    padding: 0.2rem;
}

textarea {
    resize: vertical;
}

small {
    display: block;
    margin-top: 0.35rem;
}

label span {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

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

.eyebrow {
    margin-bottom: 0.35rem;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.center-body,
.installer-body {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.login-panel,
.installer-shell {
    width: min(100%, 760px);
}

.login-panel,
.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-panel {
    max-width: 420px;
    padding: 2rem;
}

.panel {
    padding: 1.5rem;
}

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

.installer-header {
    margin-bottom: 1rem;
}

.app-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    padding: 1rem clamp(1rem, 4vw, 2rem);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.nav-links a {
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--primary-dark);
}

.nav-links a.is-active {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.35rem;
}

.client-nav {
    flex: 1 1 auto;
}

.brand {
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}

.brand-with-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-with-logo img,
.login-logo {
    max-width: 150px;
    max-height: 46px;
    object-fit: contain;
}

.login-logo {
    display: block;
    margin-bottom: 1rem;
}

.app-main {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 2rem clamp(1rem, 4vw, 2rem);
}

.app-shell-body {
    overflow-x: hidden;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    padding: 1rem;
    background: #101828;
    color: #fff;
}

[dir="rtl"] .app-sidebar {
    border-right: 0;
    border-left: 1px solid var(--line);
}

.sidebar-brand {
    display: flex;
    min-height: 52px;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.75rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-brand img {
    max-width: 42px;
    max-height: 34px;
}

.sidebar-nav {
    display: grid;
    gap: 0.2rem;
}

.sidebar-group {
    margin: 1.1rem 0 0.35rem;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sidebar-nav a,
.sidebar-logout button {
    display: flex;
    align-items: center;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    background: transparent;
    color: #dbe4f0;
    font-weight: 700;
    text-align: start;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sidebar-nav a:hover,
.sidebar-logout button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav a.is-active {
    background: #fff;
    color: #101828;
}

.sidebar-logout {
    margin-top: 1rem;
}

.sidebar-logout button {
    width: 100%;
    cursor: pointer;
}

.app-workspace {
    display: flex;
    min-width: 0;
    min-height: 100vh;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 0.8rem clamp(1rem, 4vw, 2rem);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
}

.topbar-title {
    min-width: 0;
}

.topbar-title .eyebrow {
    display: block;
    margin: 0;
}

.topbar-title strong {
    display: block;
    overflow: hidden;
    max-width: 42vw;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: flex-end;
}

.sidebar-toggle {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

.sidebar-button {
    display: none;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    place-items: center;
    background: #fff;
    cursor: pointer;
}

.sidebar-button span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px auto;
    border-radius: 999px;
    background: var(--text);
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    border-top: 1px solid var(--line);
    padding: 1rem;
    color: var(--muted);
    background: var(--surface);
}

.login-footer {
    width: min(100%, 420px);
    border: 0;
    border-radius: 8px;
    margin-top: 1rem;
}

.page-heading {
    margin-bottom: 1.25rem;
}

.status-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-stack {
    display: grid;
    gap: 1rem;
}

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

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 0.65rem 1rem;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--primary-dark);
}

.button:disabled {
    border-color: #9eaab3;
    background: #9eaab3;
    cursor: not-allowed;
}

.button-secondary {
    border-color: var(--line);
    background: #fff;
    color: var(--text);
}

.button-secondary:hover {
    background: #edf2f5;
}

.alert,
.notice,
.success-block {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert p:last-child,
.notice p:last-child {
    margin-bottom: 0;
}

.alert-error {
    border: 1px solid #f3b4ad;
    background: #fff1ef;
    color: var(--danger);
}

.notice {
    border: 1px solid #efd37b;
    background: var(--warning-bg);
}

.success-block {
    border: 1px solid #a9d8bf;
    background: #eefaf3;
}

.step-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.step-nav-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.step-nav-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.step {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.step.is-active {
    border-color: var(--primary);
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.requirement-list,
.summary-list,
.checklist {
    display: grid;
    gap: 0.75rem;
}

.requirement-row,
.summary-list div,
.checklist-item,
.choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

.requirement-row p,
.choice small {
    display: block;
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.choice {
    justify-content: flex-start;
    cursor: pointer;
}

.language-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.language-switcher label {
    min-width: 130px;
}

.language-switcher label span {
    font-size: 0.78rem;
}

.floating-language {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

[dir="rtl"] .floating-language {
    right: auto;
    left: 1rem;
}

.choice input,
.checklist-item input {
    width: auto;
}

.status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.status-pass {
    background: #e4f6ec;
    color: var(--success);
}

.status-fail {
    background: #fff1ef;
    color: var(--danger);
}

.summary-list div {
    align-items: flex-start;
}

.summary-list span {
    color: var(--muted);
}

.checklist-item {
    justify-content: flex-start;
}

.service-panel {
    margin-bottom: 1rem;
}

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

.data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.data-table td {
    overflow-wrap: anywhere;
}

.empty-state {
    margin: 0;
    color: var(--muted);
}

.pagination,
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.pagination {
    margin-top: 1rem;
}

.search-form label {
    flex: 1 1 280px;
}

.align-start {
    align-items: start;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

.token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.token-list code {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f7faf9;
    padding: 0.35rem 0.5rem;
}

.message-thread {
    display: grid;
    gap: 1rem;
}

.ticket-message {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
}

.ticket-message header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ticket-message header span {
    color: var(--muted);
    font-size: 0.9rem;
}

.ticket-message p {
    margin: 0;
    overflow-wrap: anywhere;
}

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.branding-preview {
    display: block;
    max-width: 180px;
    max-height: 70px;
    margin-top: 0.75rem;
    object-fit: contain;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
}

.checkbox-grid legend {
    padding: 0 0.35rem;
    font-weight: 700;
}

.checkbox-grid label {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.checkbox-grid input {
    width: auto;
}

.web-phone-stage {
    border: 1px solid rgba(10, 25, 47, 0.18);
    border-radius: 8px;
    padding: clamp(1rem, 3vw, 2rem);
    background:
        radial-gradient(circle at top left, rgba(94, 214, 134, 0.18), transparent 32rem),
        linear-gradient(145deg, #0c1726 0%, #111827 48%, #17223a 100%);
    box-shadow: var(--shadow);
}

.web-phone-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 420px);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
}

.web-phone-meta {
    color: #f8fafc;
}

.web-phone-meta h2 {
    color: #fff;
}

.web-phone-meta .muted {
    color: #cbd5e1;
}

.web-phone-sip-summary div {
    border-color: rgba(226, 232, 240, 0.18);
    background: rgba(15, 23, 42, 0.72);
}

.web-phone-sip-summary span {
    color: #cbd5e1;
}

.web-phone-sip-summary strong {
    color: #fff;
}

.web-phone-token-panel {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.64);
}

.web-phone-token-panel h2 {
    margin-bottom: 0.4rem;
}

.web-phone-token-panel .button {
    width: auto;
    margin: 0.35rem 0 0.75rem;
}

.web-phone-device {
    width: min(100%, 420px);
    border: 1px solid rgba(201, 220, 245, 0.72);
    border-radius: 32px;
    margin-inline: auto;
    padding: 1.05rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.web-phone-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    border: 1px solid #cfe0fb;
    border-radius: 999px;
    margin: 0 auto 0.9rem;
    padding: 0.3rem 0.8rem;
    background: #f5f9ff;
    color: #28406f;
    font-size: 0.9rem;
    font-weight: 800;
}

.web-phone-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #62d67b;
}

.web-phone-status-pill.is-calling .web-phone-status-dot {
    background: #f6b44b;
}

.web-phone-display {
    border: 1px solid #d5e4f8;
    border-radius: 22px;
    padding: 1rem;
    background: #f1f6ff;
}

.web-phone-display input {
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: center;
}

.web-phone-display input:first-child {
    height: 48px;
    background: #e6eefc;
    color: #081d3a;
    font-size: clamp(1.75rem, 6vw, 2.35rem);
    font-weight: 900;
}

.web-phone-display input:first-child::placeholder {
    color: #90a3c0;
}

.web-phone-display input:last-child {
    border-top: 1px solid #dce6f3;
    margin-top: 0.55rem;
    padding-top: 0.75rem;
    color: #596f93;
}

.web-phone-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin: 1rem 0;
}

.web-phone-actions button,
.web-phone-keypad button,
.web-phone-delete {
    border: 0;
    cursor: pointer;
    font-weight: 900;
}

.web-phone-actions button {
    min-height: 56px;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}

.web-phone-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.web-phone-call {
    background: #62d66e;
}

.web-phone-hangup {
    background: #f05a54;
}

.web-phone-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.web-phone-keypad button {
    aspect-ratio: 1.52 / 0.92;
    border: 1px solid #d6e5fb;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    color: #061936;
    box-shadow: 0 10px 24px rgba(31, 77, 136, 0.08);
}

.web-phone-keypad button span {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
}

.web-phone-keypad button small {
    color: #7d90b1;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08rem;
}

.web-phone-delete {
    display: grid;
    width: 86px;
    min-height: 58px;
    place-items: center;
    border-radius: 18px;
    margin: 0.85rem auto 0.65rem;
    background: #2f333d;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.web-phone-delete span {
    position: relative;
    width: 26px;
    height: 20px;
    border-radius: 4px 7px 7px 4px;
    background: #fff;
}

.web-phone-delete span::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
}

.web-phone-note {
    min-height: 1.5rem;
    color: #405580;
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 700px) {
    .grid-2,
    .step-nav,
    .step-nav-7,
    .step-nav-8,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .installer-header,
    .app-header,
    .status-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .button-row,
    .button {
        width: 100%;
    }

    .pagination,
    .search-form,
    .language-switcher {
        align-items: stretch;
        flex-direction: column;
    }

    .floating-language {
        position: static;
        width: min(100%, 420px);
        margin-bottom: 1rem;
    }

    .web-phone-panel {
        grid-template-columns: 1fr;
    }

    .web-phone-stage {
        padding: 0.75rem;
    }

    .web-phone-device {
        border-radius: 26px;
        padding: 0.85rem;
    }

    .web-phone-keypad {
        gap: 0.55rem;
    }

    .web-phone-keypad button {
        border-radius: 18px;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 30;
        width: min(86vw, 320px);
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    }

    [dir="rtl"] .app-sidebar {
        inset-inline-start: auto;
        inset-inline-end: 0;
        transform: translateX(105%);
    }

    .sidebar-toggle:checked ~ .app-shell .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-button {
        display: block;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar-title {
        flex: 1 1 auto;
    }

    .topbar-title strong {
        max-width: 100%;
        white-space: normal;
    }

    .topbar-actions {
        width: 100%;
    }

    .topbar .language-switcher {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .topbar {
        flex-wrap: wrap;
    }

    .topbar-actions,
    .topbar-actions form,
    .topbar-actions .button {
        width: 100%;
    }

    .app-main {
        padding: 1rem;
    }
}


/* RC1_3_FORCE_SIDEBAR_LAYOUT */
.app-shell-body { overflow-x: hidden; }
.app-shell { display: grid !important; grid-template-columns: 280px minmax(0,1fr) !important; min-height: 100vh; }
.app-sidebar { position: sticky !important; top: 0; height: 100vh; overflow-y: auto; background: #0f172a !important; color: #fff !important; padding: 18px 14px !important; border-right: 1px solid rgba(255,255,255,.08); }
.app-sidebar a, .app-sidebar button { text-decoration: none !important; }
.sidebar-nav { display: grid !important; gap: 4px !important; }
.sidebar-nav a, .sidebar-logout button { display: flex !important; width: 100%; min-height: 40px; align-items: center; border-radius: 10px; padding: 9px 10px; color: #dbe4f0 !important; font-weight: 700; background: transparent; border: 0; }
.sidebar-nav a:hover, .sidebar-logout button:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sidebar-nav a.is-active { background: #fff !important; color: #0f172a !important; }
.sidebar-group { margin: 18px 8px 6px; color: #93a4b8 !important; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.app-workspace { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 10; }
.app-main { width: min(100%, 1060px); margin: 0 auto; padding: 32px clamp(16px,4vw,40px); }
.sidebar-button { display: none; }
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .app-sidebar { position: fixed !important; z-index: 50; width: min(86vw, 320px); transform: translateX(-105%); transition: transform .18s ease; }
  [dir="rtl"] .app-sidebar { transform: translateX(105%); right: 0; }
  .sidebar-toggle:checked ~ .app-shell .app-sidebar { transform: translateX(0); }
  .sidebar-button { display: grid !important; }
  .topbar-actions { max-width: 100%; }
  .language-switcher { flex-wrap: wrap; }
}


/* rc1.4-clean-ui-final */
.app-shell-body{overflow-x:hidden;background:#f3f6fb;}
.app-shell{display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;min-height:100vh;}
.app-sidebar{background:linear-gradient(180deg,#0f172a 0%,#111827 100%)!important;color:#fff!important;border:0!important;padding:18px 12px!important;box-shadow:18px 0 40px rgba(15,23,42,.08);}
.sidebar-brand{padding:10px 10px 18px!important;color:#fff!important;}
.sidebar-nav{display:grid!important;gap:3px!important;}
.sidebar-group{margin:18px 10px 7px!important;color:#93a4b8!important;font-size:11px!important;font-weight:900!important;letter-spacing:.08em;text-transform:uppercase;}
.sidebar-nav a,.sidebar-logout button{display:flex!important;align-items:center!important;width:100%!important;min-height:38px!important;border-radius:10px!important;padding:8px 10px!important;color:#d7e0ee!important;text-decoration:none!important;font-weight:750!important;background:transparent!important;border:0!important;text-align:left!important;}
.sidebar-nav a:hover,.sidebar-logout button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
.sidebar-nav a.is-active{background:#fff!important;color:#0f172a!important;box-shadow:0 8px 22px rgba(0,0,0,.12)!important;}
.app-workspace{min-width:0;}
.topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:14px 22px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--line)!important;position:sticky!important;top:0!important;z-index:20!important;}
.app-main{width:min(100%,1180px)!important;margin:0 auto!important;padding:22px!important;}
.panel,.login-panel{border-radius:18px!important;box-shadow:0 14px 42px rgba(15,23,42,.08)!important;}
.button{border-radius:12px!important;font-weight:800!important;}
.button-danger{background:#b42318!important;border-color:#b42318!important;color:#fff!important;}
.button-row.compact-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.button-row.compact-actions form{margin:0;display:inline-flex;}
.button-row.compact-actions .button{padding:.48rem .65rem;font-size:.88rem;}
.provider-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px;}
.provider-card{display:block;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(15,23,42,.05);}
.provider-card strong{display:block;color:var(--text);font-size:1.05rem;margin-bottom:4px;}
.provider-card span{color:var(--muted);font-weight:700;}
@media(max-width:920px){.app-shell{grid-template-columns:1fr!important}.app-sidebar{position:fixed!important;z-index:60!important;width:min(86vw,310px)!important;height:100vh!important;transform:translateX(-105%);transition:transform .18s ease}.sidebar-toggle:checked~.app-shell .app-sidebar{transform:translateX(0)}.sidebar-button{display:grid!important}.topbar{align-items:flex-start!important}.topbar-actions{flex-wrap:wrap!important}.app-main{padding:14px!important}.data-table{min-width:760px}}
@media(max-width:560px){.topbar{padding:12px!important}.topbar-title strong{font-size:1rem!important}.login-panel{padding:1.25rem!important}.button-row{gap:8px!important}.button-row .button,.button-row button{width:auto!important}}

/* rc1.7 embedded secure central WebPhone */
.web-phone-stage-embedded .web-phone-panel-embedded{
    max-width: 760px;
    margin: 0 auto;
}
.web-phone-embed-card{
    width: 100%;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border, #dbe3ee);
    border-radius: 24px;
    background: var(--card, #fff);
    box-shadow: 0 18px 50px rgba(34, 49, 74, .08);
}
.web-phone-embed-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.web-phone-embed-head h2{
    margin: 0 0 6px;
}
.status-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(37, 99, 235, .10);
    color: #1d4ed8;
    white-space: nowrap;
}
.status-badge.is-online{
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}
.web-phone-frame{
    display: block;
    width: 100%;
    min-height: 720px;
    border: 0;
    border-radius: 26px;
    background: #f6f9ff;
    overflow: hidden;
}
.web-phone-embed-note{
    margin-top: 12px;
    text-align: center;
}
@media (max-width: 720px){
    .web-phone-embed-card{padding: 12px; border-radius: 20px;}
    .web-phone-embed-head{flex-direction: column; align-items: stretch;}
    .web-phone-frame{min-height: 700px; border-radius: 22px;}
}
@media (max-width: 460px){
    .web-phone-embed-card{padding: 8px; margin-left: -4px; margin-right: -4px;}
    .web-phone-frame{min-height: 680px;}
}



/* rc1.8 explicit enable/disable provider buttons */
.provider-toggle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 10px;}
.provider-toggle-button{min-width:132px;}
.summary-list .button{margin-left:8px;margin-top:4px;}


/* rc1.9 full embedded WebPhone: no SIP/server/token text, no tiny iframe */
.web-phone-page-fullscreen{
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 0;
}
.web-phone-frame-full,
.web-phone-page-fullscreen .web-phone-frame{
    display: block !important;
    width: 100% !important;
    min-width: 360px;
    max-width: 520px;
    height: min(82vh, 820px) !important;
    min-height: 720px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #f6f9ff !important;
    box-shadow: 0 20px 58px rgba(15,23,42,.12) !important;
    overflow: hidden !important;
}
@media (max-width: 640px){
    .web-phone-page-fullscreen{width: 100%;}
    .web-phone-frame-full,
    .web-phone-page-fullscreen .web-phone-frame{
        min-width: 0;
        max-width: 100%;
        height: calc(100vh - 115px) !important;
        min-height: 660px !important;
        border-radius: 24px !important;
    }
}


/* rc2.0 language badges ticket rows */
.language-buttons{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
}
.lang-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:44px;
    min-height:34px;
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--text);
    text-decoration:none!important;
    font-weight:900;
    line-height:1;
}
.lang-button:hover{border-color:var(--primary); color:var(--primary-dark);}
.lang-button.is-active{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;}
.sidebar-nav a{justify-content:space-between;gap:10px;}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1;
    box-shadow:0 0 0 2px rgba(255,255,255,.12);
}
.clickable-row{cursor:pointer;}
.clickable-row:hover{background:rgba(36,107,97,.07);}
.clickable-row:focus{outline:2px solid var(--primary);outline-offset:-2px;}
.row-link{color:var(--primary);font-weight:900;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:560px){.language-buttons{gap:5px!important}.lang-button{min-width:42px;min-height:32px;padding:7px 10px}}

/* rc2.1 clickable support tickets */

.row-cell-link{display:block;color:inherit;text-decoration:none;margin:-0.75rem;padding:0.75rem;min-height:1.2em;}
.clickable-row .row-cell-link:hover{text-decoration:none;}