/*
 * 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;

}
/* ============================================================
   Ownclaw brand theme for Guacamole — matches the ownclaw.io
   landing page (dark, orange #ff4500 accent). Login-screen scoped.
   ============================================================ */

/* --- Login background --- */
.login-ui {
    background: radial-gradient(1200px 600px at 50% -10%, #17110d 0%, #0a0a0b 55%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif !important;
}

/* --- Login card --- */
.login-ui .login-dialog {
    background: #111114 !important;
    border: 1px solid #26262b !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
    color: #f4f4f5 !important;
    padding: 36px 32px 30px !important;
}

/* --- Replace Guacamole logo + product name with the Ownclaw wordmark --- */
.login-ui .login-dialog .logo,
.login-ui .logo,
.login-ui .app-name {
    display: none !important;
}
.login-ui .login-dialog:before {
    content: "OWNCLAW";
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f4f4f5;
    margin: 0 0 4px;
}
.login-ui .login-dialog form:before {
    content: "Own your AI. Own your claw.";
    display: block;
    text-align: center;
    font-size: 13px;
    color: #a1a1aa;
    margin: 0 0 22px;
}

/* --- Labels / helper text --- */
.login-ui .login-dialog,
.login-ui .login-dialog .login-fields,
.login-ui .login-dialog label,
.login-ui .login-dialog .field-header {
    color: #a1a1aa !important;
}

/* --- Text inputs --- */
.login-ui .login-dialog input:not([type=submit]):not([type=checkbox]),
.login-ui .login-dialog .field input {
    background: #0a0a0b !important;
    border: 1px solid #26262b !important;
    color: #f4f4f5 !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    box-shadow: none !important;
}
.login-ui .login-dialog input:not([type=submit]):focus {
    border-color: #ff4500 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, .20) !important;
}

/* --- Login button --- */
.login-ui .login-dialog .buttons input[type=submit],
.login-ui .login-dialog input[type=submit],
.login-ui input[type=submit] {
    background: #ff4500 !important;
    color: #0a0a0b !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    cursor: pointer !important;
    text-shadow: none !important;
}
.login-ui .login-dialog input[type=submit]:hover,
.login-ui input[type=submit]:hover {
    background: #ff6a33 !important;
}

/* --- Error message --- */
.login-ui .login-dialog .login-error,
.login-ui .error-text,
.login-ui .error {
    color: #ff6a33 !important;
}

/* --- Version / footer text --- */
.login-ui .version,
.login-ui .version * {
    color: #52525b !important;
}

/* ============================================================
   POST-LOGIN (home / connection list / settings) — same theme
   ============================================================ */

/* --- Base app background --- */
body {
    background: #0a0a0b !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif !important;
}
.home-view,
.settings,
.manage {
    background: radial-gradient(1200px 600px at 50% -10%, #17110d 0%, #0a0a0b 55%) !important;
    color: #f4f4f5 !important;
}

/* --- Top header / nav bar (all non-client pages) --- */
.header {
    background: #111114 !important;
    border-bottom: 1px solid #26262b !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) !important;
    color: #f4f4f5 !important;
}
/* hide Guacamole logo, drop in the Ownclaw wordmark */
.header .logo { display: none !important; }
.header h1::before {
    content: "OWNCLAW";
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f4f4f5;
    margin-right: 12px;
}
.header h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #a1a1aa !important;
}
.header a,
.header button,
.header .user-menu,
.header .menu-dropdown {
    color: #f4f4f5 !important;
}
/* --- User menu (top-right "mika ▾") --- */
/* visible title on the dark header */
.menu-dropdown .menu-title { color: #f4f4f5 !important; font-weight: 600 !important; }
.user-menu .menu-dropdown .menu-title { filter: none !important; }
/* the down-arrow indicator (dark svg) -> light */
.menu-dropdown .menu-indicator { filter: invert(1) brightness(1.6) !important; opacity: .65 !important; }
.menu-dropdown.open,
.menu-dropdown.open:hover { background: rgba(255, 69, 0, .10) !important; }

/* dropdown panel: kept light so the dark action icons stay visible, but
   rounded + shadowed + orange hover (replaces the old green #CDA hover) */
.menu-dropdown .menu-contents {
    background: #f7f7f8 !important;
    border: 1px solid #26262b !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}
.menu-dropdown .menu-contents li a { color: #18181b !important; }
.menu-dropdown .menu-contents li a:hover {
    background-color: #ffe4d6 !important;
    color: #b23000 !important;
}
.user-menu .menu-dropdown .menu-contents .profile .full-name { color: #18181b !important; }
.user-menu .menu-dropdown .menu-contents .profile .organization,
.user-menu .menu-dropdown .menu-contents .profile .organizational-role { color: #52525b !important; }

/* --- Section captions ("All Connections", "Recent") --- */
.home-view h2,
.all-connections > .header,
.recent-connections .header {
    color: #71717a !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* --- Connection + group cards --- */
.home-connection,
.home-connection-group {
    background: #111114 !important;
    border: 1px solid #26262b !important;
    border-radius: 14px !important;
    color: #f4f4f5 !important;
    padding: 14px 16px !important;
    margin: 8px !important;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
.home-connection:hover,
.home-connection-group:hover {
    border-color: #ff4500 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,69,0,.35) !important;
    cursor: pointer !important;
}
.home-connection .name,
.home-connection-group .name,
.list-item .caption .name {
    color: #f4f4f5 !important;
    font-weight: 600 !important;
}
/* active-connection indicator -> orange */
.home-connection.active .activeUserCount,
.home-connection .activeUserCount {
    color: #ff6a33 !important;
}
/* protocol / folder icons: lift for the dark bg */
.home-connection .icon,
.home-connection-group .icon,
.list-item .icon {
    filter: invert(1) brightness(1.15) !important;
    opacity: .9 !important;
}

/* --- Recent connections (thumbnail tiles) --- */
.recent-connections .connection {
    background: #111114 !important;
    border: 1px solid #26262b !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color .12s ease, transform .12s ease !important;
}
.recent-connections .connection:hover {
    border-color: #ff4500 !important;
    transform: translateY(-2px) !important;
}
.recent-connections .connection .caption .name { color: #f4f4f5 !important; }
.recent-connections .connection .placeholder,
.recent-connections .thumbnail { background: #0a0a0b !important; }
.recent-connections .remove-recent { color: #a1a1aa !important; }

/* --- Group list rows (tree view) — distinct cards so each row reads clearly --- */
.group-list .list-item {
    background: #16161b !important;
    border: 1px solid #2a2a31 !important;
    border-radius: 12px !important;
    margin: 7px 0 !important;
    color: #f4f4f5 !important;
    transition: background .12s ease, border-color .12s ease !important;
}
.group-list .list-item:hover {
    background: linear-gradient(0deg, rgba(255, 69, 0, .13), rgba(255, 69, 0, .13)), #16161b !important;
    border-color: #ff4500 !important;
    box-shadow: 0 0 0 1px rgba(255, 69, 0, .25), 0 8px 22px rgba(0, 0, 0, .45) !important;
}
.group-list .caption .name { color: #f4f4f5 !important; }
.group-list .icon.expand { filter: invert(1) brightness(1.3) !important; }

/* --- Search / filter input --- */
.filter input,
input.search-string,
.group-list-filter input {
    background: #0a0a0b !important;
    border: 1px solid #26262b !important;
    color: #f4f4f5 !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
}
.filter input:focus,
input.search-string:focus {
    border-color: #ff4500 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,69,0,.20) !important;
}

/* --- Buttons (settings / dialogs) --- */
.settings button,
.manage button,
.home-view button,
button.primary,
input[type=submit].primary {
    border-radius: 10px !important;
    border: 1px solid #26262b !important;
    background: #17171b !important;
    color: #f4f4f5 !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
}
button.primary,
.settings button[type=submit],
input[type=submit].primary {
    background: #ff4500 !important;
    color: #0a0a0b !important;
    border: none !important;
    font-weight: 700 !important;
}
.settings button:hover,
.manage button:hover,
.home-view button:hover { border-color: #ff4500 !important; }
button.primary:hover { background: #ff6a33 !important; }

/* --- Pager --- */
.pager .icon { filter: brightness(1.3) !important; }
.pager .page-numbers .current { color: #ff6a33 !important; font-weight: 700 !important; }

/* --- Tables (settings lists) --- */
.settings table th { color: #71717a !important; border-color: #26262b !important; }
.settings table td { border-color: #1c1c20 !important; color: #e4e4e7 !important; }
.settings table tr:hover td { background: #17171b !important; }

/* ============================================================
   SETTINGS view — real container is .settings-view (not .settings),
   plus the sub-tabs (Sessions / History / Preferences / ...).
   ============================================================ */
.settings-view {
    background: radial-gradient(1200px 600px at 50% -10%, #17110d 0%, #0a0a0b 55%) !important;
    color: #e4e4e7 !important;
}
.settings-view h1,
.settings-view h2,
.settings-view h3 { color: #f4f4f5 !important; }
.settings-view p,
.settings-view .caption,
.settings-view label,
.settings-view .section > .header { color: #a1a1aa !important; }
.settings-view a { color: #ff6a33 !important; }
.settings-view .placeholder,
.settings .placeholder { color: #71717a !important; }

/* --- Sub-tabs (page-tabs / section-tabs) --- */
.page-tabs .page-list ul,
.section-tabs ul {
    background: transparent !important;
    border-bottom: 1px solid #26262b !important;
}
.page-tabs .page-list li a[href],
.section-tabs li a,
.page-tabs .page-list li a[href]:visited {
    color: #a1a1aa !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
}
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: rgba(255, 69, 0, .12) !important;
    color: #f4f4f5 !important;
}
.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: #16161b !important;
    color: #ff6a33 !important;
    border-bottom: 2px solid #ff4500 !important;
}

/* --- Settings tables (sessions / history / users lists) --- */
.settings-view table th,
.settings table th {
    color: #71717a !important;
    border-color: #26262b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: 12px !important;
}
.settings-view table td,
.settings table td { border-color: #1c1c20 !important; color: #e4e4e7 !important; }
.settings-view table tr:hover td,
.settings table tr:hover td { background: #17171b !important; }

/* --- Buttons inside settings-view --- */
.settings-view button,
.settings-view input[type=submit] {
    border-radius: 10px !important;
    border: 1px solid #26262b !important;
    background: #17171b !important;
    color: #f4f4f5 !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
}
.settings-view button.danger,
.settings-view .danger button { background: #ff4500 !important; color: #0a0a0b !important; border: none !important; }
.settings-view button:hover { border-color: #ff4500 !important; }

/* --- Filter/search inside settings --- */
.settings-view .filter input,
.settings-view input.search-string {
    background: #0a0a0b !important;
    border: 1px solid #26262b !important;
    color: #f4f4f5 !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
}