/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}
:root {
    --rp-primary: #2563eb;
    --rp-accent: #60a5fa;
    --rp-background: #07111f;
    --rp-surface: #111c2f;
    --rp-surface-elevated: #17243a;
    --rp-border: rgb(148 163 184 / 24%);
    --rp-text: #f8fafc;
    --rp-text-muted: #cbd5e1;
    --rp-radius: 0.9rem;
    --rp-shadow: 0 1.25rem 3.75rem rgb(0 0 0 / 35%);
    --rp-focus: #fbbf24;
    --remote-platform-primary: var(--rp-primary);
    --remote-platform-accent: var(--rp-accent);
    --remote-platform-login-card-opacity: 0.94;
    --remote-platform-surface: 23, 32, 51;
    --remote-platform-text: var(--rp-text);
    --remote-platform-text-muted: var(--rp-text-muted);
    --remote-platform-focus: var(--rp-focus);
    --remote-platform-background: var(--rp-background);
    --remote-platform-login-background-image: none;
    --remote-platform-login-background-size: cover;
}

.login-ui {
    background-color: var(--remote-platform-background);
    background-image:
        var(--remote-platform-login-background-image),
        radial-gradient(circle at 20% 15%, rgb(79 140 255 / 18%), transparent 36rem),
        radial-gradient(circle at 80% 80%, rgb(125 211 252 / 12%), transparent 34rem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--remote-platform-login-background-size), auto, auto;
    color: var(--remote-platform-text);
    min-height: 100%;
}

.login-ui .login-dialog {
    background: rgb(var(--remote-platform-surface) / var(--remote-platform-login-card-opacity));
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    color: var(--remote-platform-text);
    margin: 1.5rem auto;
    max-width: 27rem;
    padding: 2.25rem;
    width: min(calc(100% - 2rem), 27rem);
}

/* Guacamole 1.6.0 nests both stock marks directly beneath form.login-form. */
.login-ui .login-dialog .login-form > .logo,
.login-ui .login-dialog .login-form > .version {
    display: none !important;
}

.login-ui .remote-platform-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 0 1.5rem;
}

.login-ui .remote-platform-brand img {
    display: block;
    height: auto;
    max-width: 14rem;
    width: 100%;
}

.login-ui .remote-platform-welcome {
    color: var(--remote-platform-text-muted);
    margin: 0.75rem 0 0;
    text-align: center;
}

.login-ui .login-dialog label,
.login-ui .login-dialog th {
    color: var(--remote-platform-text);
    text-shadow: none;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="email"],
.login-ui .login-dialog input[type="password"] {
    -webkit-text-fill-color: var(--remote-platform-text);
    background-color: var(--rp-surface-elevated) !important;
    border: 1px solid #94a3b8 !important;
    caret-color: var(--remote-platform-focus);
    color: var(--remote-platform-text) !important;
    opacity: 1;
}

.login-ui .login-dialog input[type="text"]::placeholder,
.login-ui .login-dialog input[type="email"]::placeholder,
.login-ui .login-dialog input[type="password"]::placeholder {
    color: #dbe6f3;
    opacity: 1;
}

.login-ui .login-dialog input[type="text"]:focus,
.login-ui .login-dialog input[type="email"]:focus,
.login-ui .login-dialog input[type="password"]:focus {
    background-color: var(--rp-surface) !important;
    border-color: var(--remote-platform-focus) !important;
    box-shadow: 0 0 0 3px rgb(251 191 36 / 28%);
    outline: 2px solid transparent;
}

.login-ui .login-dialog input:-webkit-autofill,
.login-ui .login-dialog input:-webkit-autofill:hover,
.login-ui .login-dialog input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--rp-surface-elevated) inset !important;
    -webkit-text-fill-color: var(--remote-platform-text) !important;
    caret-color: var(--remote-platform-focus);
}

.login-ui .login-dialog button,
.login-ui .login-dialog input[type="submit"] {
    background: var(--remote-platform-primary) !important;
    border: 1px solid rgb(255 255 255 / 28%) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: none;
}

.login-ui .login-dialog button:hover,
.login-ui .login-dialog input[type="submit"]:hover {
    background: var(--remote-platform-accent) !important;
    color: #07111f !important;
}

.login-ui .login-dialog button:focus-visible,
.login-ui .login-dialog input:focus-visible {
    outline: 3px solid var(--remote-platform-focus);
    outline-offset: 2px;
}

.login-ui .login-dialog button:disabled,
.login-ui .login-dialog input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 30rem) {
    .login-ui .login-dialog {
        border-radius: 0.75rem;
        margin: 0.75rem auto;
        padding: 1.25rem;
        width: min(calc(100% - 1rem), 27rem);
    }

    .login-ui .remote-platform-brand img {
        max-width: 11rem;
    }
}
.home-view {
    background:
        radial-gradient(circle at 15% 5%, rgb(37 99 235 / 18%), transparent 32rem),
        radial-gradient(circle at 85% 65%, rgb(96 165 250 / 10%), transparent 34rem),
        var(--rp-background);
    box-sizing: border-box;
    color: var(--rp-text);
    min-height: 100%;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.home-view .connection-list-ui {
    margin: 0 auto;
    max-width: 76rem;
}

.remote-platform-auto-connect-enabled body.home .home-view:not([data-rp-auto-connect="dashboard"]) .connection-list-ui {
    display: none;
}

.home-view .remote-platform-auto-connect-state {
    align-items: center;
    display: none;
    justify-content: center;
    min-height: min(28rem, 62vh);
}

.remote-platform-auto-connect-enabled body.home .home-view .remote-platform-auto-connect-state:not([hidden]) {
    display: flex;
}

.home-view .remote-platform-auto-connect-debug {
    background: rgb(3 7 18 / 94%);
    border: 1px solid #f59e0b;
    border-radius: 0.45rem;
    bottom: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 40%);
    color: #f8fafc;
    font: 0.75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    max-width: min(24rem, calc(100vw - 1.5rem));
    padding: 0.65rem 0.75rem;
    position: fixed;
    right: 0.75rem;
    text-align: left;
    z-index: 2147483000;
}

.home-view .remote-platform-auto-connect-debug strong {
    color: #fbbf24;
}

.home-view .remote-platform-auto-connect-card,
.remote-platform-post-session-card {
    background: rgb(17 28 47 / 94%);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    box-sizing: border-box;
    max-width: 32rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    text-align: center;
    width: min(100%, 32rem);
}

.home-view .remote-platform-auto-connect-card h2,
.remote-platform-post-session-card h1 {
    color: var(--rp-text);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    margin: 0 0 0.55rem;
}

.home-view .remote-platform-auto-connect-card p,
.remote-platform-post-session-card p {
    color: var(--rp-text-muted);
    line-height: 1.5;
    margin: 0;
}

.home-view[data-rp-auto-connect="opening"] .remote-platform-auto-connect-spinner {
    animation: remote-platform-spin 850ms linear infinite;
    border: 3px solid rgb(148 163 184 / 30%);
    border-radius: 50%;
    border-top-color: var(--rp-accent);
    height: 2rem;
    margin: 0 auto 1rem;
    width: 2rem;
}

.remote-platform-auto-connect-actions,
.remote-platform-post-session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 1.2rem;
}

.remote-platform-auto-connect-actions button,
.remote-platform-post-session-actions button {
    background: var(--rp-primary);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 0.5rem;
    color: #fff;
    cursor: pointer;
    font: inherit;
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
}

.remote-platform-auto-connect-actions button.secondary,
.remote-platform-post-session-actions button.secondary {
    background: var(--rp-surface-elevated);
}

.remote-platform-auto-connect-actions button:focus-visible,
.remote-platform-post-session-actions button:focus-visible {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.remote-platform-post-session {
    align-items: center;
    background: var(--rp-background);
    color: var(--rp-text);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2147483100;
}

.remote-platform-post-session-visible body.client .client-status-modal {
    visibility: hidden;
}

@keyframes remote-platform-spin {
    to { transform: rotate(360deg); }
}

.home-view .remote-platform-home-brand {
    align-items: center;
    background: rgb(17 28 47 / 82%);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.home-view .remote-platform-home-identity {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    min-width: 0;
}

.home-view .remote-platform-home-identity img {
    height: 2.75rem;
    object-fit: contain;
    width: 8.5rem;
}

.home-view .remote-platform-home-copy h1 {
    color: var(--rp-text);
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    margin: 0;
}

.home-view .remote-platform-home-copy p {
    color: var(--rp-text-muted);
    margin: 0.2rem 0 0;
}

.home-view .remote-platform-home-account .user-menu,
.home-view .remote-platform-home-account a,
.home-view .remote-platform-home-account button {
    color: var(--rp-text);
}

.home-view .connection-list-ui > .header .user-menu {
    display: none;
}

.home-view .connection-list-ui > .header,
.home-view .connection-list-ui > h2,
.home-view .header h2 {
    color: var(--rp-text);
    text-shadow: none;
}

.home-view .recent-connections,
.home-view .all-connections,
.home-view .group-list-page {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.home-view .recent-connections > .connection,
.home-view .group-list-page > .list-item {
    margin: 0;
    width: auto;
}

.home-view a.home-connection,
.home-view .group-list-page > .list-item > .connection,
.home-view .group-list-page > .list-item > .connection-group {
    align-items: center;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 18%);
    box-sizing: border-box;
    color: var(--rp-text);
    display: flex;
    min-height: 6.5rem;
    padding: 1rem;
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

.home-view a.home-connection:hover,
.home-view .group-list-page > .list-item > .connection:hover,
.home-view .group-list-page > .list-item > .connection-group:hover {
    background: var(--rp-surface-elevated);
    border-color: var(--rp-accent);
    transform: translateY(-2px);
}

.home-view a.home-connection:focus-visible,
.home-view .group-list-page a:focus-visible,
.home-view .group-list-filter input:focus-visible {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.home-view .connection .name,
.home-view .connection-group .caption,
.home-view .connection .caption {
    color: var(--rp-text);
    font-weight: 700;
}

.home-view .connection .icon,
.home-view .connection-group .icon {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.home-view .recent-connections .placeholder {
    background: rgb(17 28 47 / 70%);
    border: 1px dashed var(--rp-border);
    border-radius: var(--rp-radius);
    color: var(--rp-text-muted);
    grid-column: 1 / -1;
    margin: 0;
    padding: 2rem;
    text-align: center;
}

.home-view .group-list-filter input.search-string {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 0.65rem;
    box-sizing: border-box;
    color: var(--rp-text);
    margin: 0.5rem 0 1rem;
    max-width: 28rem;
    padding: 0.75rem 0.9rem;
    width: 100%;
}

@media (max-width: 38rem) {
    .home-view .remote-platform-home-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-view .remote-platform-home-account {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-view a.home-connection,
    .home-view .group-list-page > .list-item > .connection,
    .home-view .group-list-page > .list-item > .connection-group {
        transition: none;
    }

    .home-view[data-rp-auto-connect="opening"] .remote-platform-auto-connect-spinner {
        animation: none;
    }
}
/* Module 06: Remote Platform administrator console. */
body.remote-platform-admin {
    background: #07101d;
    overflow: hidden;
}

body.remote-platform-admin #content {
    height: 100vh;
    max-width: none;
    padding: 0;
    width: 100%;
}

.home-view.remote-platform-admin-active {
    background: #07101d;
    box-sizing: border-box;
    height: 100%;
    max-width: none;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.home-view.remote-platform-admin-active > :not(.remote-platform-admin-console) {
    display: none !important;
}

.remote-platform-admin-console,
.remote-platform-admin-console * {
    box-sizing: border-box;
}

.remote-platform-admin-console {
    --admin-bg: #07101d;
    --admin-sidebar: #091525;
    --admin-surface: #0e1b2d;
    --admin-surface-2: #132238;
    --admin-border: rgb(148 163 184 / 17%);
    --admin-text: #f8fafc;
    --admin-muted: #94a3b8;
    --admin-blue: #3b82f6;
    --admin-blue-soft: rgb(59 130 246 / 14%);
    --admin-green: #34d399;
    --admin-amber: #fbbf24;
    --admin-red: #fb7185;
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.rp-admin-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    position: relative;
}

.rp-admin-sidebar {
    background: linear-gradient(180deg, #0a1728, #081321);
    border-right: 1px solid var(--admin-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 1.3rem 1rem 1rem;
    position: relative;
    z-index: 12;
}

.rp-admin-brand {
    align-items: center;
    display: flex;
    gap: .8rem;
    margin: 0 .45rem 1.5rem;
}

.rp-admin-brand img {
    height: 2.2rem;
    object-fit: contain;
    object-position: left center;
    width: 2.2rem;
}

.rp-admin-brand div,
.rp-admin-account div:not(.rp-admin-avatar),
.rp-admin-current-user,
.rp-admin-api-status div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-admin-brand strong {
    font-size: .94rem;
    letter-spacing: -.01em;
}

.rp-admin-brand span,
.rp-admin-account span,
.rp-admin-current-user span {
    color: var(--admin-muted);
    font-size: .72rem;
    margin-top: .12rem;
}

.rp-admin-nav {
    margin-bottom: .75rem;
}

.rp-admin-nav p {
    color: #64748b;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin: .5rem .65rem .38rem;
    text-transform: uppercase;
}

.rp-admin-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .65rem;
    color: #b8c4d5;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    gap: .72rem;
    min-height: 2.35rem;
    padding: .5rem .65rem;
    text-align: left;
    transition: background-color .12s ease, color .12s ease;
    width: 100%;
}

.rp-admin-nav button > span {
    background: #52647b;
    border-radius: .3rem;
    height: .52rem;
    width: .52rem;
}

.rp-admin-nav button:hover {
    background: rgb(148 163 184 / 8%);
    color: white;
}

.rp-admin-nav button.active {
    background: var(--admin-blue-soft);
    color: #dbeafe;
}

.rp-admin-nav button.active > span {
    background: var(--admin-blue);
    box-shadow: 0 0 0 .25rem rgb(59 130 246 / 12%);
}

.rp-admin-account {
    align-items: center;
    border-top: 1px solid var(--admin-border);
    display: grid;
    gap: .65rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    margin-top: auto;
    padding: 1rem .35rem .1rem;
}

.rp-admin-account strong {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-admin-avatar {
    align-items: center;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: .65rem;
    display: flex;
    font-size: .82rem;
    font-weight: 800;
    height: 2.15rem;
    justify-content: center;
}

.rp-admin-account button {
    background: transparent;
    border: 0;
    color: #93c5fd;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    padding: .4rem .2rem;
}

.rp-admin-workspace {
    display: grid;
    grid-template-rows: 4.4rem minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
}

.rp-admin-topbar {
    align-items: center;
    background: rgb(7 16 29 / 92%);
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    gap: 1rem;
    padding: 0 1.7rem;
}

.rp-admin-menu {
    background: transparent;
    border: 1px solid var(--admin-border);
    border-radius: .55rem;
    color: white;
    cursor: pointer;
    display: none;
    font-size: 1.1rem;
    height: 2.35rem;
    width: 2.35rem;
}

.rp-admin-search {
    max-width: 32rem;
    position: relative;
    width: min(38vw, 32rem);
}

.rp-admin-search::before {
    color: #64748b;
    content: "⌕";
    font-size: 1.3rem;
    left: .8rem;
    position: absolute;
    top: .38rem;
}

.rp-admin-search input,
.rp-inline-filter select,
.rp-branding-preview-form input,
.rp-branding-preview-form select {
    background: #0d1a2b;
    border: 1px solid var(--admin-border);
    border-radius: .62rem;
    color: var(--admin-text);
    font: inherit;
    min-height: 2.4rem;
}

.rp-admin-search input {
    padding: .55rem .8rem .55rem 2.4rem;
    width: 100%;
}

.rp-admin-api-status {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin-left: auto;
}

.rp-admin-api-status > span {
    background: var(--admin-muted);
    border-radius: 50%;
    box-shadow: 0 0 0 .25rem rgb(148 163 184 / 10%);
    height: .48rem;
    width: .48rem;
}

.rp-admin-api-status[data-state="connected"] > span {
    background: var(--admin-green);
    box-shadow: 0 0 0 .25rem rgb(52 211 153 / 12%);
}

.rp-admin-api-status[data-state="partial"] > span {
    background: var(--admin-amber);
}

.rp-admin-api-status small {
    color: var(--admin-muted);
    font-size: .65rem;
}

.rp-admin-api-status strong,
.rp-admin-current-user strong {
    font-size: .76rem;
}

.rp-admin-refresh,
.rp-primary-action,
.rp-preferences-callout button,
.rp-branding-login button {
    background: var(--admin-blue);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .58rem;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 750;
    min-height: 2.35rem;
    padding: .55rem .85rem;
}

.rp-primary-action.danger {
    background: #be123c;
}

.rp-admin-current-user {
    border-left: 1px solid var(--admin-border);
    padding-left: 1rem;
}

.rp-admin-main {
    background:
        radial-gradient(circle at 85% -5%, rgb(37 99 235 / 9%), transparent 30rem),
        var(--admin-bg);
    min-height: 0;
    overflow: auto;
    padding: 1.7rem;
}

.rp-admin-heading {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto 1.25rem;
    max-width: 95rem;
}

.rp-admin-eyebrow {
    color: #60a5fa !important;
    font-size: .62rem !important;
    font-weight: 850;
    letter-spacing: .15em;
    margin: 0 0 .34rem !important;
}

.rp-admin-heading h1 {
    color: white;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    letter-spacing: -.035em;
    margin: 0;
}

.rp-admin-heading p:not(.rp-admin-eyebrow) {
    color: var(--admin-muted);
    font-size: .82rem;
    margin: .35rem 0 0;
}

.rp-admin-heading [data-role="page-actions"] {
    flex: none;
}

.rp-admin-main [data-role="content"] {
    margin: 0 auto;
    max-width: 95rem;
}

.rp-admin-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.rp-stat,
.rp-card,
.rp-table-card {
    background: linear-gradient(145deg, rgb(18 34 55 / 94%), rgb(12 25 43 / 96%));
    border: 1px solid var(--admin-border);
    border-radius: .9rem;
    box-shadow: 0 .8rem 2rem rgb(0 0 0 / 10%);
}

.rp-stat {
    min-height: 8.2rem;
    overflow: hidden;
    padding: 1.1rem 1.1rem 1rem;
    position: relative;
}

.rp-stat::after {
    background: radial-gradient(circle, rgb(59 130 246 / 14%), transparent 65%);
    content: "";
    height: 7rem;
    position: absolute;
    right: -2.5rem;
    top: -2.6rem;
    width: 7rem;
}

.rp-stat-icon {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    border-radius: .35rem;
    display: block;
    height: .55rem;
    margin-bottom: .75rem;
    width: 1.7rem;
}

.rp-stat p {
    color: #a9b7c9;
    font-size: .72rem;
    font-weight: 650;
    margin: 0;
}

.rp-stat strong {
    display: block;
    font-size: 1.7rem;
    letter-spacing: -.04em;
    margin: .25rem 0 .12rem;
}

.rp-stat small {
    color: #708197;
    display: block;
    font-size: .65rem;
}

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

.rp-admin-grid.wide-left {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .75fr);
}

.rp-card {
    min-width: 0;
    overflow: hidden;
}

.rp-card > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.rp-card h2 {
    color: white;
    font-size: .9rem;
    letter-spacing: -.01em;
    margin: 0;
}

.rp-card header p {
    color: var(--admin-muted);
    font-size: .67rem;
    margin: .25rem 0 0;
}

.rp-card-body {
    min-width: 0;
    padding: .4rem 1.15rem 1rem;
}

.rp-card footer {
    border-top: 1px solid var(--admin-border);
    padding: .75rem 1.15rem;
}

.rp-activity-chart {
    padding: .9rem 0 .15rem;
}

.rp-activity-chart svg {
    height: 11rem;
    overflow: visible;
    width: 100%;
}

.rp-activity-chart .grid {
    fill: none;
    stroke: rgb(148 163 184 / 12%);
    stroke-width: .5;
    vector-effect: non-scaling-stroke;
}

.rp-activity-chart polyline {
    fill: none;
    stroke: var(--admin-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
    vector-effect: non-scaling-stroke;
}

.rp-activity-chart circle {
    fill: #93c5fd;
    stroke: #0e1b2d;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.rp-chart-labels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rp-chart-labels span {
    color: var(--admin-muted);
    display: flex;
    flex-direction: column;
    font-size: .62rem;
    gap: .1rem;
    text-align: center;
}

.rp-chart-labels b {
    color: #dbeafe;
    font-size: .7rem;
}

.rp-link-button {
    background: transparent;
    border: 0;
    color: #93c5fd;
    cursor: pointer;
    font: inherit;
    font-size: .72rem;
    padding: 0;
}

.rp-table-card {
    overflow: hidden;
}

.rp-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.remote-platform-admin-console table {
    border-collapse: collapse;
    font-size: .72rem;
    min-width: 42rem;
    width: 100%;
}

.remote-platform-admin-console table.compact {
    min-width: 34rem;
}

.remote-platform-admin-console th {
    color: #7f90a7;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .045em;
    padding: .72rem .8rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.remote-platform-admin-console td {
    border-top: 1px solid var(--admin-border);
    color: #cbd5e1;
    padding: .75rem .8rem;
    vertical-align: middle;
}

.remote-platform-admin-console tbody tr:hover {
    background: rgb(148 163 184 / 4%);
}

.remote-platform-admin-console td > strong,
.remote-platform-admin-console td > small {
    display: block;
}

.remote-platform-admin-console td > strong {
    color: #edf4ff;
    font-size: .73rem;
}

.remote-platform-admin-console td > small {
    color: #64748b;
    font-size: .62rem;
    margin-top: .15rem;
}

.rp-table-note {
    background: rgb(59 130 246 / 7%);
    border-bottom: 1px solid var(--admin-border);
    color: #9fb0c7;
    font-size: .68rem;
    padding: .7rem 1rem;
}

.rp-badge {
    align-items: center;
    background: rgb(148 163 184 / 10%);
    border: 1px solid rgb(148 163 184 / 13%);
    border-radius: 999px;
    color: #cbd5e1;
    display: inline-flex;
    font-size: .61rem;
    font-weight: 720;
    gap: .38rem;
    padding: .22rem .5rem;
    white-space: nowrap;
}

.rp-badge > span {
    background: currentColor;
    border-radius: 50%;
    height: .34rem;
    width: .34rem;
}

.rp-badge.success {
    background: rgb(52 211 153 / 9%);
    border-color: rgb(52 211 153 / 18%);
    color: #6ee7b7;
}

.rp-badge.info {
    background: rgb(59 130 246 / 10%);
    border-color: rgb(59 130 246 / 18%);
    color: #93c5fd;
}

.rp-badge.muted {
    color: #94a3b8;
}

.rp-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.rp-row-actions button,
.rp-pager button {
    background: rgb(148 163 184 / 8%);
    border: 1px solid var(--admin-border);
    border-radius: .4rem;
    color: #bfdbfe;
    cursor: pointer;
    font: inherit;
    font-size: .63rem;
    min-height: 1.85rem;
    padding: .35rem .52rem;
}

.rp-row-actions button.danger {
    color: #fda4af;
}

.rp-row-actions button:hover,
.rp-pager button:hover:not(:disabled) {
    background: rgb(59 130 246 / 14%);
    border-color: rgb(96 165 250 / 30%);
}

.rp-pager {
    align-items: center;
    border-top: 1px solid var(--admin-border);
    color: #718198;
    display: flex;
    font-size: .65rem;
    justify-content: space-between;
    min-height: 3.2rem;
    padding: .65rem 1rem;
}

.rp-pager div {
    display: flex;
    gap: .4rem;
}

.rp-pager button:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.rp-check {
    text-align: center !important;
    width: 2.6rem;
}

.rp-check input {
    accent-color: var(--admin-blue);
    height: 1rem;
    width: 1rem;
}

.rp-tree-indent {
    display: inline-block;
    width: calc(var(--depth) * .8rem);
}

.rp-muted {
    color: #6f8095;
}

.rp-admin-alert {
    align-items: flex-start;
    background: rgb(59 130 246 / 8%);
    border: 1px solid rgb(59 130 246 / 20%);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: .22rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
}

.rp-admin-alert strong {
    color: #bfdbfe;
    font-size: .75rem;
}

.rp-admin-alert span {
    color: #9baec6;
    font-size: .7rem;
    line-height: 1.5;
}

.rp-admin-alert.warning {
    background: rgb(245 158 11 / 7%);
    border-color: rgb(245 158 11 / 20%);
}

.rp-admin-alert.warning strong {
    color: #fcd34d;
}

.rp-definition-list {
    margin: .25rem 0 0;
}

.rp-definition-list > div {
    align-items: center;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 2.7rem;
}

.rp-definition-list > div:last-child {
    border-bottom: 0;
}

.rp-definition-list dt {
    color: #8293aa;
    font-size: .68rem;
}

.rp-definition-list dd {
    color: #dbe5f3;
    font-size: .69rem;
    margin: 0;
    text-align: right;
    word-break: break-word;
}

.rp-top-connections,
.rp-checklist {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
}

.rp-top-connections li {
    align-items: center;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    justify-content: space-between;
    min-height: 3.25rem;
}

.rp-top-connections li:last-child {
    border-bottom: 0;
}

.rp-top-connections strong,
.rp-top-connections small {
    display: block;
}

.rp-top-connections strong {
    color: #dce7f5;
    font-size: .72rem;
}

.rp-top-connections small {
    color: #6d7e94;
    font-size: .61rem;
    margin-top: .15rem;
}

.rp-top-connections b {
    background: rgb(59 130 246 / 12%);
    border-radius: .45rem;
    color: #93c5fd;
    font-size: .7rem;
    min-width: 2rem;
    padding: .35rem .5rem;
    text-align: center;
}

.rp-checklist li {
    align-items: flex-start;
    border-bottom: 1px solid var(--admin-border);
    color: #aebed1;
    display: flex;
    font-size: .69rem;
    gap: .65rem;
    line-height: 1.45;
    padding: .7rem 0;
}

.rp-checklist li:last-child {
    border-bottom: 0;
}

.rp-checklist span {
    color: var(--admin-green);
    font-weight: 850;
}

.rp-card-copy,
.rp-form-help {
    color: #9aacc2;
    font-size: .7rem;
    line-height: 1.6;
}

.rp-empty-inline {
    color: #73849a;
    font-size: .7rem;
    margin: 1.5rem 0 .8rem;
    text-align: center;
}

.rp-empty-state,
.rp-admin-loading {
    align-items: center;
    background: linear-gradient(145deg, rgb(18 34 55 / 82%), rgb(12 25 43 / 88%));
    border: 1px dashed rgb(148 163 184 / 22%);
    border-radius: .9rem;
    display: flex;
    flex-direction: column;
    min-height: 18rem;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.rp-empty-state > span {
    color: #60a5fa;
    font-size: 2.2rem;
}

.rp-empty-state h2,
.rp-admin-loading h2 {
    font-size: .95rem;
    margin: .65rem 0 .3rem;
}

.rp-empty-state p,
.rp-admin-loading p {
    color: var(--admin-muted);
    font-size: .72rem;
    margin: 0 0 1rem;
}

.rp-admin-loading > span {
    animation: rp-admin-spin .8s linear infinite;
    border: .18rem solid rgb(96 165 250 / 20%);
    border-radius: 50%;
    border-top-color: #60a5fa;
    height: 2rem;
    width: 2rem;
}

@keyframes rp-admin-spin {
    to { transform: rotate(360deg); }
}

.rp-inline-filter {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.rp-inline-filter label {
    align-items: center;
    color: #9aabc0;
    display: flex;
    font-size: .7rem;
    gap: .55rem;
}

.rp-inline-filter select {
    padding: .45rem 2rem .45rem .7rem;
}

.rp-inline-filter > span {
    color: #718198;
    font-size: .67rem;
}

.rp-branding-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(20rem, .9fr) minmax(24rem, 1.1fr);
}

.rp-branding-preview-form {
    padding-bottom: 1rem;
}

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

.rp-form-grid label {
    color: #9aabc0;
    font-size: .68rem;
}

.rp-form-grid label > span {
    display: block;
    margin-bottom: .35rem;
}

.rp-branding-preview-form input {
    padding: .45rem .6rem;
    width: 100%;
}

.rp-branding-preview-form input[type="color"] {
    padding: .2rem;
}

.rp-branding-preview-form .rp-form-help {
    margin: .8rem 1.15rem 0;
}

.rp-branding-login {
    --preview-primary: #2563eb;
    --preview-secondary: #60a5fa;
    align-items: center;
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--preview-primary) 22%, transparent), transparent 25rem),
        radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--preview-secondary) 16%, transparent), transparent 23rem),
        #07111f;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--admin-border);
    border-radius: .9rem;
    display: flex;
    justify-content: center;
    min-height: 31rem;
    overflow: hidden;
    padding: 1.5rem;
}

.rp-branding-login > div {
    background: rgb(18 31 50 / 92%);
    border: 1px solid rgb(148 163 184 / 25%);
    border-radius: .85rem;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 35%);
    max-width: 23rem;
    padding: 1.6rem;
    width: 100%;
}

.rp-branding-login img {
    display: block;
    height: 3rem;
    margin: 0 auto .8rem;
    max-width: 12rem;
    object-fit: contain;
}

.rp-branding-login h2,
.rp-branding-login p {
    text-align: center;
}

.rp-branding-login h2 {
    font-size: 1.1rem;
    margin: 0;
}

.rp-branding-login p {
    color: #a8b6c8;
    font-size: .7rem;
    margin: .35rem 0 1.2rem;
}

.rp-branding-login label {
    color: #aab8ca;
    display: block;
    font-size: .65rem;
    margin-top: .65rem;
}

.rp-branding-login input {
    background: #17243a;
    border: 1px solid #4b5f79;
    border-radius: .45rem;
    display: block;
    min-height: 2.25rem;
    margin-top: .28rem;
    width: 100%;
}

.rp-branding-login button {
    background: var(--preview-primary);
    margin-top: 1rem;
    width: 100%;
}

.rp-preferences-callout {
    align-items: center;
    display: flex;
    gap: 1.2rem;
    min-height: 12rem;
    padding: 1.2rem .5rem;
}

.rp-preferences-callout > span {
    align-items: center;
    background: rgb(59 130 246 / 12%);
    border-radius: 1rem;
    color: #93c5fd;
    display: flex;
    flex: none;
    font-size: 2rem;
    height: 4rem;
    justify-content: center;
    width: 4rem;
}

.rp-preferences-callout h3 {
    font-size: .9rem;
    margin: 0 0 .3rem;
}

.rp-preferences-callout p {
    color: #9aacc2;
    font-size: .7rem;
    line-height: 1.55;
    margin: 0 0 .8rem;
}

.rp-domain-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    margin-bottom: 1rem;
}

.rp-domain-form > label:not(.rp-domain-checkbox) {
    color: #c9d7e8;
    display: block;
    font-size: .72rem;
    font-weight: 700;
    margin-top: 1rem;
}

.rp-domain-form > label:not(.rp-domain-checkbox) input {
    background: #16263d;
    border: 1px solid #53677f;
    border-radius: .5rem;
    color: #f8fafc;
    display: block;
    font: inherit;
    margin-top: .4rem;
    min-height: 2.6rem;
    padding: .55rem .7rem;
    width: 100%;
}

.rp-domain-checkbox {
    align-items: flex-start;
    color: #c9d7e8;
    display: flex;
    font-size: .72rem;
    gap: .6rem;
    margin-top: 1rem;
}

.rp-domain-checkbox input {
    accent-color: #3b82f6;
    margin-top: .15rem;
}

.rp-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.15rem;
}

.rp-domain-actions button,
.rp-card > footer button,
.rp-card > button[data-action^="domain-"] {
    background: #1b2b42;
    border: 1px solid var(--admin-border);
    border-radius: .5rem;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    min-height: 2.35rem;
    padding: .55rem .85rem;
}

.rp-domain-actions button.primary {
    background: #2563eb;
    border-color: #60a5fa;
}

.rp-domain-actions button:disabled,
.rp-card > button[data-action^="domain-"]:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.rp-card > button[data-action="domain-remove"],
.rp-card > button[data-action="domain-rollback"] {
    background: #9f1239;
    border-color: #fb7185;
    margin: .25rem 0 1rem 1rem;
}

.rp-admin-dialog {
    background: #101e31;
    border: 1px solid rgb(148 163 184 / 25%);
    border-radius: .9rem;
    box-shadow: 0 2rem 5rem rgb(0 0 0 / 55%);
    color: white;
    max-width: 27rem;
    padding: 0;
    width: calc(100% - 2rem);
}

.rp-admin-dialog::backdrop {
    background: rgb(1 6 15 / 76%);
    backdrop-filter: blur(3px);
}

.rp-admin-dialog form {
    padding: 1.35rem;
    text-align: center;
}

.rp-admin-dialog-icon {
    align-items: center;
    background: rgb(244 63 94 / 12%);
    border-radius: 50%;
    color: #fb7185;
    display: flex;
    font-size: 1.15rem;
    font-weight: 850;
    height: 2.8rem;
    justify-content: center;
    margin: 0 auto .8rem;
    width: 2.8rem;
}

.rp-admin-dialog h2 {
    font-size: 1rem;
    margin: 0;
}

.rp-admin-dialog p {
    color: #9fb0c5;
    font-size: .72rem;
    line-height: 1.55;
    margin: .5rem 0 1.2rem;
}

.rp-admin-dialog-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

.rp-admin-dialog-actions button {
    background: #1b2b42;
    border: 1px solid var(--admin-border);
    border-radius: .5rem;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    min-height: 2.25rem;
    padding: .5rem .8rem;
}

.rp-admin-dialog-actions button.danger {
    background: #be123c;
    border-color: #e11d48;
}

.rp-admin-toast {
    background: #123527;
    border: 1px solid rgb(52 211 153 / 30%);
    border-radius: .6rem;
    bottom: 1rem;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 30%);
    color: #a7f3d0;
    font-size: .72rem;
    max-width: 24rem;
    padding: .75rem 1rem;
    position: fixed;
    right: 1rem;
    z-index: 30;
}

.rp-admin-toast.error {
    background: #3f1722;
    border-color: rgb(251 113 133 / 30%);
    color: #fecdd3;
}

.rp-admin-scrim {
    display: none;
}

.sr-only {
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.remote-platform-admin-console button:focus-visible,
.remote-platform-admin-console input:focus-visible,
.remote-platform-admin-console select:focus-visible,
.remote-platform-admin-console [tabindex]:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

/* Keep Guacamole's native, protocol-aware editors as the safe fallback while
   bringing them into the Remote Platform visual system. */
.remote-platform-native-admin body.settings,
.remote-platform-native-admin body.manage {
    background: #07101d !important;
    color: #e2e8f0;
}

.remote-platform-native-admin body.settings .settings-view,
.remote-platform-native-admin body.manage .manage-view,
.remote-platform-native-admin body.manage .view {
    color: #e2e8f0;
}

.remote-platform-native-admin body.settings .settings-view > .header,
.remote-platform-native-admin body.manage .manage-view > .header,
.remote-platform-native-admin body.manage .view > .header {
    background: #0a1728;
    border-bottom: 1px solid rgb(148 163 184 / 18%);
    color: white;
}

.remote-platform-native-admin body.settings .settings-view .page-tabs,
.remote-platform-native-admin body.settings .settings-view .settings.section,
.remote-platform-native-admin body.manage .manage-form {
    background: #0e1b2d;
    border-color: rgb(148 163 184 / 18%);
    color: #dbe5f3;
}

.remote-platform-native-admin body.settings .settings-view input[type="text"],
.remote-platform-native-admin body.settings .settings-view input[type="password"],
.remote-platform-native-admin body.settings .settings-view input[type="email"],
.remote-platform-native-admin body.settings .settings-view input[type="number"],
.remote-platform-native-admin body.settings .settings-view input[type="search"],
.remote-platform-native-admin body.settings .settings-view select,
.remote-platform-native-admin body.settings .settings-view textarea,
.remote-platform-native-admin body.manage .view input[type="text"],
.remote-platform-native-admin body.manage .view input[type="password"],
.remote-platform-native-admin body.manage .view input[type="email"],
.remote-platform-native-admin body.manage .view input[type="number"],
.remote-platform-native-admin body.manage .view select,
.remote-platform-native-admin body.manage .view textarea {
    background-color: #16263d;
    border-color: #53677f;
    color: #f8fafc;
}

.remote-platform-native-admin body.settings .settings-view table,
.remote-platform-native-admin body.manage .view table {
    background: #0e1b2d;
    color: #dbe5f3;
}

.remote-platform-native-admin body.settings .settings-view th,
.remote-platform-native-admin body.settings .settings-view td,
.remote-platform-native-admin body.manage .view th,
.remote-platform-native-admin body.manage .view td {
    border-color: rgb(148 163 184 / 18%);
    color: #dbe5f3;
}

.remote-platform-native-admin body.settings .settings-view a,
.remote-platform-native-admin body.manage .view a {
    color: #93c5fd;
}

.remote-platform-native-admin body.settings .settings-view input[type="checkbox"],
.remote-platform-native-admin body.settings .settings-view input[type="radio"],
.remote-platform-native-admin body.manage .view input[type="checkbox"],
.remote-platform-native-admin body.manage .view input[type="radio"] {
    accent-color: #3b82f6;
}

.remote-platform-native-admin body.settings .settings-view button,
.remote-platform-native-admin body.manage .view button {
    border-color: rgb(148 163 184 / 32%);
}

.remote-platform-native-admin body.settings .settings-view button.danger,
.remote-platform-native-admin body.manage .view button.danger,
.remote-platform-native-admin body.manage .view .danger button {
    background-color: #9f1239;
    border-color: #fb7185;
    color: #fff;
}

.remote-platform-native-admin body.settings .settings-view button:focus-visible,
.remote-platform-native-admin body.settings .settings-view input:focus-visible,
.remote-platform-native-admin body.settings .settings-view select:focus-visible,
.remote-platform-native-admin body.settings .settings-view textarea:focus-visible,
.remote-platform-native-admin body.manage .view button:focus-visible,
.remote-platform-native-admin body.manage .view input:focus-visible,
.remote-platform-native-admin body.manage .view select:focus-visible,
.remote-platform-native-admin body.manage .view textarea:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

@media (max-width: 74rem) {
    .rp-admin-layout {
        grid-template-columns: 14.5rem minmax(0, 1fr);
    }

    .rp-admin-sidebar {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .rp-admin-current-user {
        display: none;
    }

    .rp-admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 58rem) {
    .rp-admin-layout {
        display: block;
    }

    .rp-admin-sidebar {
        bottom: 0;
        box-shadow: 1.5rem 0 4rem rgb(0 0 0 / 45%);
        left: 0;
        max-width: 18rem;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform .18s ease;
        width: 86vw;
    }

    .remote-platform-admin-console.sidebar-open .rp-admin-sidebar {
        transform: translateX(0);
    }

    .rp-admin-scrim {
        background: rgb(0 5 13 / 68%);
        bottom: 0;
        display: block;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .18s ease;
        z-index: 11;
    }

    .remote-platform-admin-console.sidebar-open .rp-admin-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .rp-admin-workspace {
        height: 100%;
    }

    .rp-admin-menu {
        display: block;
        flex: none;
    }

    .rp-admin-grid,
    .rp-admin-grid.wide-left,
    .rp-branding-layout,
    .rp-domain-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-branding-login {
        min-height: 26rem;
    }
}

@media (max-width: 42rem) {
    .rp-admin-workspace {
        grid-template-rows: 4rem minmax(0, 1fr);
    }

    .rp-admin-topbar {
        gap: .55rem;
        padding: 0 .8rem;
    }

    .rp-admin-search {
        flex: 1;
        width: auto;
    }

    .rp-admin-api-status div,
    .rp-admin-refresh {
        display: none;
    }

    .rp-admin-main {
        padding: 1.1rem .8rem 1.5rem;
    }

    .rp-admin-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .rp-admin-heading [data-role="page-actions"],
    .rp-admin-heading [data-role="page-actions"] button {
        width: 100%;
    }

    .rp-admin-stats,
    .rp-admin-stats.security,
    .rp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-stat {
        min-height: 7.5rem;
    }

    .rp-definition-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
        justify-content: center;
        padding: .65rem 0;
    }

    .rp-definition-list dd {
        text-align: left;
    }

    .rp-inline-filter {
        align-items: flex-start;
        flex-direction: column;
        gap: .65rem;
    }

    .rp-preferences-callout {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-admin-sidebar,
    .rp-admin-scrim,
    .rp-admin-nav button {
        transition: none;
    }

    .rp-admin-loading > span {
        animation: none;
    }
}
body.client .remote-platform-session-tools {
    color: var(--rp-text);
    font-family: Arial, sans-serif;
    left: 50%;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateX(-50%);
    z-index: 2147483000;
}

body.client .remote-platform-session-tools button,
body.client .remote-platform-session-tools textarea,
body.client .remote-platform-session-tools input {
    font: inherit;
}

body.client .remote-platform-toolbar-shell {
    align-items: center;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

body.client .remote-platform-toolbar,
body.client .remote-platform-toolbar-toggle {
    backdrop-filter: blur(1rem) saturate(135%);
    background: rgb(7 17 31 / 92%);
    border: 1px solid var(--rp-border);
    box-shadow: var(--rp-shadow);
}

body.client .remote-platform-toolbar-toggle {
    align-items: center;
    border-radius: 0 0 0.65rem 0.65rem;
    border-top: 0;
    color: var(--rp-text);
    cursor: pointer;
    display: flex;
    height: 1.8rem;
    justify-content: center;
    order: 2;
    padding: 0;
    width: 3.25rem;
}

body.client .remote-platform-toolbar-toggle svg {
    height: 0.95rem;
    transition: transform 160ms ease;
    width: 0.95rem;
}

body.client .remote-platform-session-tools[data-expanded="true"] .remote-platform-toolbar-toggle svg {
    transform: rotate(180deg);
}

body.client .remote-platform-toolbar {
    border-radius: 0 0 var(--rp-radius) var(--rp-radius);
    display: grid;
    grid-template-rows: 0fr;
    max-width: min(96vw, 49rem);
    opacity: 0;
    order: 1;
    overflow: hidden;
    transform: translateY(-0.45rem);
    transition: grid-template-rows 170ms ease, opacity 140ms ease, transform 170ms ease;
}

body.client .remote-platform-session-tools[data-expanded="true"] .remote-platform-toolbar {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

body.client .remote-platform-toolbar-inner {
    min-height: 0;
    overflow: hidden;
}

body.client .remote-platform-toolbar-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    padding: 0.45rem;
}

body.client .remote-platform-tool-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--rp-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 0.71rem;
    gap: 0.18rem;
    min-height: 3.3rem;
    min-width: 4.75rem;
    padding: 0.38rem 0.45rem;
}

body.client .remote-platform-tool-button:hover,
body.client .remote-platform-tool-button[aria-pressed="true"] {
    background: rgb(96 165 250 / 16%);
    border-color: rgb(96 165 250 / 48%);
}

body.client .remote-platform-tool-button svg {
    height: 1.25rem;
    width: 1.25rem;
}

body.client .remote-platform-tool-button:focus-visible,
body.client .remote-platform-toolbar-toggle:focus-visible,
body.client .remote-platform-panel button:focus-visible,
body.client .remote-platform-panel textarea:focus-visible {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

body.client .remote-platform-panel {
    background: rgb(17 28 47 / 96%);
    border-top: 1px solid var(--rp-border);
    color: var(--rp-text);
    padding: 0.85rem;
    text-align: left;
}

body.client .remote-platform-panel[hidden],
body.client .remote-platform-file-input {
    display: none;
}

body.client .remote-platform-panel-header {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

body.client .remote-platform-panel h2 {
    color: var(--rp-text);
    flex: 1;
    font-size: 1rem;
    margin: 0;
}

body.client .remote-platform-panel p {
    color: var(--rp-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0.35rem 0 0.65rem;
}

body.client .remote-platform-icon-button,
body.client .remote-platform-text-button,
body.client .remote-platform-row-action,
body.client .remote-platform-crumb {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--rp-text-muted);
    cursor: pointer;
}

body.client .remote-platform-icon-button {
    align-items: center;
    display: flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

body.client .remote-platform-icon-button svg {
    height: 1rem;
    width: 1rem;
}

body.client .remote-platform-text-button,
body.client .remote-platform-row-action,
body.client .remote-platform-crumb {
    font-size: 0.73rem;
    padding: 0.35rem 0.5rem;
}

body.client .remote-platform-icon-button:hover,
body.client .remote-platform-text-button:hover,
body.client .remote-platform-row-action:hover,
body.client .remote-platform-crumb:hover {
    background: rgb(96 165 250 / 14%);
    border-color: var(--rp-border);
    color: var(--rp-text);
}

body.client .remote-platform-panel textarea {
    background: var(--rp-background);
    border: 1px solid var(--rp-border);
    border-radius: 0.55rem;
    box-sizing: border-box;
    color: var(--rp-text);
    min-height: 5rem;
    padding: 0.6rem;
    resize: vertical;
    width: 100%;
}

body.client .remote-platform-clipboard-states {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

body.client .remote-platform-clipboard-state {
    background: rgb(7 17 31 / 58%);
    border: 1px solid var(--rp-border);
    border-radius: 0.48rem;
    display: grid;
    font-size: 0.72rem;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
}

body.client .remote-platform-clipboard-state strong {
    color: var(--rp-text);
}

body.client .remote-platform-clipboard-state span {
    color: var(--rp-text-muted);
    line-height: 1.35;
}

body.client .remote-platform-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

body.client .remote-platform-panel-actions button {
    background: var(--rp-primary);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 0.48rem;
    color: #fff;
    cursor: pointer;
    min-height: 2.25rem;
    padding: 0.45rem 0.72rem;
}

body.client .remote-platform-panel-actions button.secondary {
    background: var(--rp-surface-elevated);
}

body.client .remote-platform-panel-actions button.compact {
    min-height: 1.9rem;
    padding: 0.3rem 0.55rem;
}

body.client .remote-platform-status {
    color: #bfdbfe;
    font-size: 0.75rem;
    min-height: 1.1em;
}

body.client .remote-platform-upload-zone {
    align-items: center;
    background: rgb(7 17 31 / 72%);
    border: 2px dashed rgb(96 165 250 / 58%);
    border-radius: 0.7rem;
    color: var(--rp-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.55rem;
    min-height: 5.4rem;
    padding: 0.7rem;
    width: 100%;
}

body.client .remote-platform-upload-zone:hover,
body.client .remote-platform-upload-zone[data-dragging="true"] {
    background: rgb(37 99 235 / 20%);
    border-color: var(--rp-accent);
}

body.client .remote-platform-upload-zone:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

body.client .remote-platform-upload-zone svg {
    color: var(--rp-accent);
    height: 1.45rem;
    width: 1.45rem;
}

body.client .remote-platform-upload-zone span {
    color: var(--rp-text-muted);
    font-size: 0.72rem;
}

body.client .remote-platform-transfer-list,
body.client .remote-platform-drive-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.45rem;
    max-height: min(14rem, 38vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.client .remote-platform-transfer-row {
    align-items: center;
    background: rgb(7 17 31 / 62%);
    border: 1px solid var(--rp-border);
    border-radius: 0.55rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(9rem, 1fr) 5rem 4.5rem;
    padding: 0.55rem;
}

body.client .remote-platform-transfer-details {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

body.client .remote-platform-transfer-details strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.client .remote-platform-transfer-details span,
body.client .remote-platform-transfer-size,
body.client .remote-platform-transfer-action {
    color: var(--rp-text-muted);
    font-size: 0.7rem;
}

body.client .remote-platform-transfer-row.complete .remote-platform-transfer-details > span { color: #86efac; }
body.client .remote-platform-transfer-row.failed .remote-platform-transfer-details > span { color: #fca5a5; }

body.client .remote-platform-progress {
    background: rgb(148 163 184 / 18%);
    border-radius: 999px;
    height: 0.3rem;
    overflow: hidden;
}

body.client .remote-platform-progress span {
    background: var(--rp-accent);
    display: block;
    height: 100%;
    transition: width 160ms linear;
}

body.client .remote-platform-progress.indeterminate span {
    animation: remote-platform-progress 1.1s ease-in-out infinite;
    width: 38%;
}

body.client .remote-platform-empty-state {
    border: 1px dashed var(--rp-border);
    border-radius: 0.55rem;
    color: var(--rp-text-muted);
    font-size: 0.78rem;
    padding: 0.9rem;
    text-align: center;
}

body.client .remote-platform-drive-controls {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

body.client .remote-platform-breadcrumbs {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.2rem;
}

body.client .remote-platform-crumb:disabled {
    color: var(--rp-text);
    cursor: default;
    font-weight: 700;
}

body.client .remote-platform-drive-row {
    align-items: center;
    background: rgb(7 17 31 / 62%);
    border: 1px solid var(--rp-border);
    border-radius: 0.55rem;
    color: var(--rp-text);
    cursor: pointer;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1.25rem 1fr auto;
    padding: 0.58rem;
    text-align: left;
}

body.client .remote-platform-drive-row:hover {
    background: var(--rp-surface-elevated);
    border-color: var(--rp-accent);
}

body.client .remote-platform-drive-row svg {
    color: var(--rp-accent);
    height: 1.1rem;
    width: 1.1rem;
}

body.client .remote-platform-drive-row small {
    color: var(--rp-text-muted);
}

body.client .remote-platform-panel-note {
    border-top: 1px solid var(--rp-border);
    margin-top: 0.75rem !important;
    padding-top: 0.65rem;
}

body.client .remote-platform-drop-zone {
    align-items: center;
    background: rgb(3 10 20 / 62%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 120ms ease;
    visibility: hidden;
    z-index: 2147482999;
}

body.client .remote-platform-drop-zone[data-visible="true"] {
    opacity: 1;
    visibility: visible;
}

body.client .remote-platform-drop-zone-message {
    backdrop-filter: blur(0.75rem);
    background: rgb(7 17 31 / 94%);
    border: 3px dashed var(--rp-accent);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    color: var(--rp-text);
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: 700;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    text-align: center;
}

@keyframes remote-platform-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(280%); }
}

@media (max-width: 42rem) {
    body.client .remote-platform-session-tools { width: 100%; }
    body.client .remote-platform-toolbar { margin: 0 0.25rem; max-width: calc(100vw - 0.5rem); }
    body.client .remote-platform-toolbar-actions { justify-content: flex-start; overflow-x: auto; }
    body.client .remote-platform-tool-button { flex: 0 0 4.55rem; min-width: 4.55rem; }
}

@media (max-width: 32rem) {
    body.client .remote-platform-transfer-row { grid-template-columns: 1fr auto; }
    body.client .remote-platform-transfer-size { grid-column: 1; }
    body.client .remote-platform-transfer-row > :last-child { grid-column: 2; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    body.client .remote-platform-toolbar,
    body.client .remote-platform-toolbar-toggle svg,
    body.client .remote-platform-drop-zone,
    body.client .remote-platform-progress span { animation: none; transition: none; }
}