:root {
    color-scheme: dark;
    --vls-bg: #090d13;
    --vls-bg-alt: #101722;
    --vls-surface: #151d29;
    --vls-surface-hover: #1b2635;
    --vls-border: #303846;
    --vls-text: #f5f4f0;
    --vls-text-soft: #c4c8d0;
    --vls-muted: #9099a6;
    --vls-gold: #c9a66b;
    --vls-gold-bright: #e3c58e;
    --vls-gold-dark: #a68048;
    --vls-on-gold: #111317;
    --vls-danger: #e78b8b;
    --vls-radius: 10px;
    --vls-radius-lg: 18px;
    --vls-container: 1180px;
    --vls-shadow: 0 16px 46px rgb(0 0 0 / 22%);
    --vls-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

html:has(body.vls) {
    background: var(--vls-bg);
}

.vls,
.vls * {
    box-sizing: border-box;
}

body.vls {
    margin: 0;
    min-height: 100vh;
    background: var(--vls-bg);
    color: var(--vls-text);
    font: 400 16px/1.6 var(--vls-font);
    -webkit-font-smoothing: antialiased;
}

.vls :where(h1, h2, h3, p) {
    margin-top: 0;
}

.vls h1,
.vls h2,
.vls h3 {
    line-height: 1.18;
    letter-spacing: -.025em;
}

.vls h1 {
    margin-bottom: 12px;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.vls h2 {
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.vls p {
    color: var(--vls-text-soft);
}

.vls a {
    color: var(--vls-gold-bright);
    text-decoration: none;
    transition: color .18s ease;
}

.vls a:hover {
    color: #ffe0a8;
}

.vls :is(button, input, select, textarea) {
    font: inherit;
}

.vls :focus-visible {
    outline: 3px solid var(--vls-gold-bright);
    outline-offset: 3px;
}

.vls-shell {
    width: min(var(--vls-container), calc(100% - 40px));
    margin-inline: auto;
    padding-block: clamp(40px, 7vw, 88px);
}

.vls-shell--clients {
    --vls-container: 95vw;
}

.vls-page-header {
    margin-bottom: 34px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--vls-border);
}

.vls-eyebrow {
    margin-bottom: 12px;
    color: var(--vls-gold);
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vls-panel,
.vls-login-card {
    border: 1px solid var(--vls-border);
    border-radius: var(--vls-radius-lg);
    background: linear-gradient(155deg, var(--vls-surface), #111823);
    box-shadow: var(--vls-shadow);
}

.vls-panel {
    padding: clamp(20px, 4vw, 30px);
}

.vls-panel--clients {
    min-width: 0;
}

.vls-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
}

.vls-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px 18px;
    margin: 0 0 16px;
}

.vls-table-tool {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.vls-table-tool--search {
    width: min(100%, 30rem);
}

.vls-table-tool-label {
    color: var(--vls-text);
    font-size: .87rem;
    font-weight: 650;
}

.vls-table-expiry-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vls-table-search,
.vls-table-expiry-mode,
.vls-table-expiry-value {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #445063;
    border-radius: 7px;
    background: #0c121b;
    color: var(--vls-text);
}

.vls-table-search {
    width: 100%;
}

.vls-table-expiry-mode {
    width: 10rem;
}

.vls-table-expiry-value {
    width: 11rem;
}

.vls-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.vls-btn:hover {
    transform: translateY(-1px);
}

.vls-btn--primary {
    background: var(--vls-gold);
    border-color: var(--vls-gold);
    color: var(--vls-on-gold);
}

.vls-btn--primary:hover {
    background: var(--vls-gold-bright);
    border-color: var(--vls-gold-bright);
    color: var(--vls-on-gold);
}

.vls-btn--outline {
    border-color: var(--vls-gold);
    color: var(--vls-gold-bright);
}

.vls-btn--outline:hover {
    background: rgb(201 166 107 / 10%);
    color: #ffe0a8;
}

.vls-btn--ghost {
    background: var(--vls-surface);
    border-color: var(--vls-border);
    color: var(--vls-text);
}

.vls-btn--ghost:hover {
    background: var(--vls-surface-hover);
    color: var(--vls-text);
}

.vls-btn--danger {
    background: #ad4848;
    border-color: #ad4848;
    color: #fff;
}

.vls-btn--danger:hover {
    background: #c65858;
    border-color: #c65858;
    color: #fff;
}

.vls-alert {
    margin: 0 0 24px;
    padding: 15px 18px;
    border-left: 3px solid var(--vls-danger);
    border-radius: 0 7px 7px 0;
    background: rgb(231 139 139 / 10%);
    color: var(--vls-text-soft);
}

.vls-alert p {
    margin-bottom: 8px;
}

.vls-alert :last-child {
    margin-bottom: 0;
}

.vls-alert--success {
    border-left-color: #8bcfa7;
    background: rgb(139 207 167 / 10%);
}

.vls-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--vls-border);
    border-radius: var(--vls-radius);
}

.vls-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
}

.vls-table-column--client_id {
    width: 5rem;
}

.vls-table-column--surname,
.vls-table-column--name {
    width: 10rem;
}

.vls-table-column--activation_date,
.vls-table-column--expiry_date {
    width: 9rem;
}

.vls-table-column--phone_number,
.vls-table-column--ip_internal {
    width: 12rem;
}

.vls-table-column--ip_port {
    width: 7rem;
}

.vls-table-column--machine_name {
    width: 12rem;
}

.vls-table-column--email {
    width: 18rem;
}

.vls-table-column--notes {
    width: 20rem;
}

.vls-table :is(th, td) {
    padding: 12px 13px;
    border-bottom: 1px solid var(--vls-border);
    vertical-align: top;
}

.vls-table th {
    background: #18202b;
    color: var(--vls-gold-bright);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vls-table th {
    padding: 0;
}

.vls-table-sort {
    appearance: none;
    display: block;
    width: 100%;
    padding: 12px 13px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.vls-table-sort::after {
    margin-left: 7px;
    color: var(--vls-muted);
    content: '↕';
}

.vls-table-sort[data-sort-direction="ascending"]::after {
    color: var(--vls-gold-bright);
    content: '↑';
}

.vls-table-sort[data-sort-direction="descending"]::after {
    color: var(--vls-gold-bright);
    content: '↓';
}

.vls-table td {
    min-width: 120px;
    color: var(--vls-text-soft);
}

.vls .vls-delete-link {
    margin-left: 8px;
    color: var(--vls-danger);
    font-size: .8rem;
    text-decoration: underline;
}

.vls .vls-delete-link:hover {
    color: #ffb0b0;
}

.vls .vls-credential-link {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    text-decoration: underline;
}

.vls-credential-values {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

.vls-credential-item > strong {
    display: block;
    margin-bottom: 6px;
}

.vls-credential-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.vls-credential-value {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.vls-credential-copy {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
}

.vls-credential-copy[hidden] {
    display: none;
}

.vls-credential-copy-status {
    margin: 0;
    color: var(--vls-text-soft);
}

.vls-credential-copy-status:empty {
    display: none;
}

.vls-table-no-matches td {
    color: var(--vls-muted);
    text-align: center;
}

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

.vls-table tbody tr:hover {
    background: var(--vls-surface-hover);
}

.vls-table :is(input, textarea) {
    display: block;
    width: 12rem;
    max-width: 100%;
}

.vls-table .vls-table-notes {
    width: 100%;
    max-width: none;
}

.vls-table-wrap .vls-table input.vls-table-field {
    width: 100%;
    max-width: none;
}

.vls-form {
    display: grid;
    gap: 18px;
}

.vls-field {
    display: grid;
    gap: 7px;
}

.vls-label {
    display: block;
    color: var(--vls-text);
    font-size: .87rem;
    font-weight: 650;
}

.vls-input,
.vls-form input:not([type="hidden"]),
.vls-form textarea,
.vls-table input:not([type="hidden"]),
.vls-table textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #445063;
    border-radius: 7px;
    background: #0c121b;
    color: var(--vls-text);
    transition: border-color .2s, box-shadow .2s;
}

.vls-form textarea,
.vls-table textarea {
    min-height: 110px;
    resize: vertical;
}

.vls-form :is(input, textarea)::placeholder,
.vls-table :is(input, textarea)::placeholder {
    color: #8e98a7;
}

.vls-form :is(input, textarea):focus,
.vls-table :is(input, textarea):focus {
    outline: none;
    border-color: var(--vls-gold-bright);
    box-shadow: 0 0 0 3px rgb(201 166 107 / 18%);
}

.vls-login {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background: radial-gradient(ellipse at 80% 15%, rgb(201 166 107 / 12%), transparent 44%), var(--vls-bg);
}

.vls-login-card {
    width: min(100%, 440px);
    padding: clamp(26px, 6vw, 48px);
}

.vls-login-card h1 {
    margin-bottom: 28px;
}

.vls-logout-form {
    margin-top: 28px;
}

@media (max-width: 620px) {
    .vls-shell {
        width: min(var(--vls-container), calc(100% - 28px));
    }

    .vls-panel {
        padding: 16px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .vls *,
    .vls *::before,
    .vls *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}