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

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}/* =====================================================================
   sosofm — page de login (theme sombre, or rose / cuivre comme le logo)
   ===================================================================== */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(app/ext/sosofm-branding/cormorant-600.woff2) format("woff2");
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(app/ext/sosofm-branding/cormorant-500i.woff2) format("woff2");
}

/* ---------- Fond ---------- */

div.login-ui {
    background: #07070a;
    color: #e8e2dc;
    overflow: hidden;
}

.login-ui .sosofm-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(120, 62, 40, .35), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(60, 30, 22, .5), transparent 60%),
        #07070a;
}

/* Halos flous qui derivent lentement */
.login-ui .sosofm-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    mix-blend-mode: screen;
    will-change: transform;
}
.login-ui .sosofm-blob-1 {
    width: 55vmax; height: 55vmax; left: -15vmax; top: -20vmax;
    background: radial-gradient(circle, rgba(196, 122, 88, .55) 0%, rgba(196, 122, 88, 0) 65%);
    animation: sosofm-drift-1 26s ease-in-out infinite alternate;
}
.login-ui .sosofm-blob-2 {
    width: 60vmax; height: 60vmax; right: -25vmax; bottom: -30vmax;
    background: radial-gradient(circle, rgba(232, 176, 140, .45) 0%, rgba(232, 176, 140, 0) 65%);
    animation: sosofm-drift-2 32s ease-in-out infinite alternate;
}
.login-ui .sosofm-blob-3 {
    width: 40vmax; height: 40vmax; left: 30vw; top: 55vh;
    background: radial-gradient(circle, rgba(120, 48, 40, .5) 0%, rgba(120, 48, 40, 0) 65%);
    animation: sosofm-drift-3 38s ease-in-out infinite alternate;
}
@keyframes sosofm-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(12vw, 10vh, 0) scale(1.15); }
}
@keyframes sosofm-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-14vw, -12vh, 0) scale(.95); }
}
@keyframes sosofm-drift-3 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-10vw, -18vh, 0); }
}

/* Grain tres leger pour eviter le banding des degrades */
.login-ui .sosofm-grain {
    position: absolute; inset: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.login-ui canvas.sosofm-stars {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .login-ui .sosofm-blob { animation: none; }
}

/* ---------- Carte de connexion ---------- */

.login-ui .login-dialog-middle {
    position: relative;
    z-index: 1;
}

.login-ui .login-dialog {
    position: relative;
    max-width: 19em;
    background: rgba(18, 16, 18, .72);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    color: #e8e2dc;
    border: 1px solid rgba(232, 176, 140, .18);
    border-radius: 1em;
    padding: 1.4em 1.4em 1.2em;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(0, 0, 0, .4) inset,
        0 1px 0 rgba(255, 255, 255, .05) inset;
}
/* Liseret dore degrade sur le bord de la carte */
.login-ui .login-dialog::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: 1em;
    padding: 1px;
    background: linear-gradient(160deg, rgba(243, 201, 176, .55), rgba(201, 138, 106, .1) 40%, rgba(120, 62, 40, .05) 60%, rgba(243, 201, 176, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ---------- Logo video ---------- */

.login-ui .login-dialog .logo.sosofm-logo {
    background-image: none;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: .7em;
    margin: 0 auto 1em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 40px rgba(201, 138, 106, .12);
}

/* ---------- Titre : masque, le logo video prend toute la place ---------- */

.login-ui .login-dialog .version { display: none; }

/* ---------- Champs ---------- */

.login-ui .login-dialog .login-fields input {
    background: rgba(7, 7, 10, .6);
    color: #f4efea;
    border: 1px solid rgba(232, 176, 140, .16);
    border-radius: .45em;
    padding: .6em .85em;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-ui .login-fields .labeled-field.empty input {
    background: transparent; /* laisse voir le libelle flottant */
}
.login-ui .login-fields .labeled-field input:focus {
    background: rgba(7, 7, 10, .85);
    border-color: rgba(232, 176, 140, .55);
    box-shadow: 0 0 0 3px rgba(232, 176, 140, .12);
    outline: none;
}
.login-ui .login-fields .labeled-field .field-header {
    color: #e8e2dc;
    opacity: .45;
    margin: .6em .85em;
}
.login-ui .login-dialog .login-fields input::placeholder { color: rgba(232, 226, 220, .4); }
.login-ui .login-dialog .login-fields input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0c0b0d inset;
    -webkit-text-fill-color: #f4efea;
}

/* ---------- Bouton ---------- */

.login-ui .login-dialog input[type=submit] {
    width: 100%;
    margin: .6em 0 0;
    padding: .6em 1em;
    background: linear-gradient(100deg, #c98a6a, #f3cfb6 50%, #c98a6a);
    background-size: 200% 100%;
    color: #1a100c;
    border: none;
    border-radius: .45em;
    text-shadow: none;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 8px 24px rgba(201, 138, 106, .25);
    transition: background-position .5s, transform .15s, box-shadow .2s;
}
.login-ui .login-dialog input[type=submit]:hover {
    background-position: 100% 50%;
    box-shadow: 0 10px 30px rgba(201, 138, 106, .4);
    transform: translateY(-1px);
}
.login-ui .login-dialog input[type=submit]:active { transform: translateY(0); }

/* ---------- Erreur ---------- */

.login-ui.error p.login-error {
    background: rgba(58, 18, 20, .9);
    color: #ffb4b8;
    border: 1px solid #7a2a2e;
    z-index: 2;
}

/* =====================================================================
   sosofm — reste de l'interface (accueil, menus, parametres, modales)
   ===================================================================== */

:root {
    --sf-bg: #07070a;
    --sf-panel: rgba(18, 16, 18, .78);
    --sf-panel-solid: #141214;
    --sf-line: rgba(232, 176, 140, .16);
    --sf-line-strong: rgba(232, 176, 140, .38);
    --sf-text: #e8e2dc;
    --sf-muted: rgba(232, 226, 220, .55);
    --sf-gold: #e2a98a;
    --sf-gold-light: #f3cfb6;
    --sf-gold-dark: #b87a5c;
    --sf-hover: rgba(232, 176, 140, .10);
    --sf-active: rgba(232, 176, 140, .20);
}

body { background: var(--sf-bg); color: var(--sf-text); }
body.client { background: #000; }

/* Fond anime derriere la page d'accueil (fixe, sous le contenu) */
.home-view { position: relative; min-height: 100vh; }
.home-view .sosofm-bg-app { position: fixed; z-index: 0; }
.home-view .connection-list-ui { position: relative; z-index: 1; }

/* ---------- Bandeaux de section / en-tetes ---------- */

.header {
    background: var(--sf-panel);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.header:not(.ng-hide) ~ * .header,
.header:not(.ng-hide) ~ .header { border-top: 1px solid var(--sf-line); }
.header h2,
.attributes .form h3,
.notification .title-bar {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    letter-spacing: .12em;
    background: linear-gradient(100deg, var(--sf-gold-dark), var(--sf-gold-light) 45%, var(--sf-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.attributes .form h3, .notification .title-bar {
    background-color: transparent;
    border-color: var(--sf-line);
    box-shadow: none;
}

/* ---------- Menu utilisateur (en haut a droite) ---------- */

.menu-dropdown { background: transparent; border-left: 1px solid var(--sf-line); }
.menu-dropdown:hover { background: var(--sf-hover); }
.menu-dropdown.open, .menu-dropdown.open:hover { background: var(--sf-active); }
.menu-dropdown .menu-title { color: var(--sf-text); }
.user-menu .menu-dropdown .menu-title,
.share-menu .menu-dropdown .menu-title,
.menu-dropdown .menu-indicator { filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-20deg) brightness(1.05); }
.user-menu .menu-dropdown .menu-title,
.share-menu .menu-dropdown .menu-title { color: #17110e; } /* devient dore apres le filtre */

.menu-dropdown .menu-contents {
    background: var(--sf-panel-solid);
    border: 1px solid var(--sf-line);
    border-top: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .7);
}
.menu-dropdown .menu-contents li a { color: var(--sf-text); }
.menu-dropdown .menu-contents li a:hover { background-color: var(--sf-hover); }
.user-menu .menu-dropdown .menu-contents li a,
.client .user-menu .menu-contents li a.disconnect { filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-20deg) brightness(1.05); color: #17110e; }
.user-menu .menu-dropdown .menu-contents li a:hover { background-color: rgba(23, 17, 14, .12); }
.menu-dropdown .menu-contents li a.danger { background-color: #6b2a2a; color: #fff; filter: none; }
.menu-dropdown .menu-contents li a.danger:hover { background-color: #8a3535; }
.user-menu .menu-dropdown .menu-contents .profile { border-bottom: 1px solid var(--sf-line); color: var(--sf-text); }

/* ---------- Filtre / recherche ---------- */

.filter .search-string,
.header .filter input {
    background-color: transparent;
    color: var(--sf-text);
    border-left: 1px solid var(--sf-line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2a98a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
    background-size: 1.25em;
    background-position: .6em 50%;
}
.filter .search-string::placeholder { color: var(--sf-muted); }

/* ---------- Listes de connexions ---------- */

.placeholder { color: var(--sf-gold); opacity: .35; text-shadow: none; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: .06em; }

.recent-connections .connection { border-radius: .6em; transition: background .2s, transform .2s; }
.recent-connections .connection:hover { background: var(--sf-hover); transform: translateY(-2px); }
.recent-connections .connection .thumbnail > * {
    border: 1px solid var(--sf-line-strong);
    border-radius: .4em;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .7), 0 0 24px rgba(201, 138, 106, .12);
}
.recent-connections .connection .remove-recent:after { filter: invert(1); }
.recent-connections .connection .name,
.connection a, .connection a:hover, .connection a:visited,
.connection-group a, .connection-group a:hover, .connection-group a:visited,
.user a, .user a:hover, .user a:visited,
.user-group a, .user-group a:hover, .user-group a:visited,
.settings.connections .connection-list .new-connection a,
.settings.connections .connection-list .new-connection-group a,
.settings.connections .connection-list .new-sharing-profile a,
.list-item .name { color: var(--sf-text); }
.list-item .usage { color: var(--sf-muted); }
.list-item .caption { border-radius: .4em; }
.list-item.selected { background: var(--sf-active); }
.list-item:not(.selected) .caption:hover { background: var(--sf-hover); }
.connection .icon, .connection-group .icon, .sharing-profile .icon,
.pager .icon { filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-20deg) brightness(1.05); }
.pager .set-page.current { background: var(--sf-active); border-color: var(--sf-line); }
.pager a { color: var(--sf-text); }

/* ---------- Onglets, tableaux, formulaires (parametres) ---------- */

.page-tabs .page-list ul, .section-tabs ul { background: transparent; border-bottom: 1px solid var(--sf-line); }
.page-tabs .page-list li a[href], .page-tabs .page-list li a[href]:visited, .section-tabs li a { color: var(--sf-text); }
.page-tabs .page-list li a[href]:hover, .section-tabs li a:hover { background-color: var(--sf-hover); }
.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: var(--sf-active); color: var(--sf-gold-light); }

table.sorted th { background: rgba(232, 176, 140, .08); color: var(--sf-gold-light); }
table.sorted td, table.sorted th { border-color: var(--sf-line); }
table.sorted th.sort-primary:after { filter: invert(1); }
.connection-parameters .form .fields { border-left-color: var(--sf-line-strong); }

input[type=text], input[type=email], input[type=number], input[type=password],
textarea, select {
    background: rgba(7, 7, 10, .6);
    color: var(--sf-text);
    border: 1px solid var(--sf-line);
    border-radius: .35em;
}
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus,
textarea:focus, select:focus { border-color: var(--sf-line-strong); outline: none; box-shadow: 0 0 0 3px rgba(232, 176, 140, .12); }
select option { background: var(--sf-panel-solid); color: var(--sf-text); }
.form-field .password-field .icon.toggle-password { filter: invert(1); }
label { color: var(--sf-text); }
a { color: var(--sf-gold); }

.manage-user .notice.read-only, .manage-user-group .notice.read-only { background: rgba(232, 176, 140, .12); border-color: var(--sf-line); color: var(--sf-text); }

/* ---------- Boutons ---------- */

a.button, button, input[type=submit] {
    background-color: rgba(232, 176, 140, .10);
    border: 1px solid var(--sf-line-strong);
    color: var(--sf-gold-light);
    text-shadow: none;
    border-radius: .4em;
    box-shadow: none;
    transition: background .2s, border-color .2s;
}
a.button:hover, button:hover, input[type=submit]:hover { background-color: rgba(232, 176, 140, .22); border-color: var(--sf-gold); }
a.button:active, button:active, input[type=submit]:active { background-color: rgba(232, 176, 140, .30); box-shadow: none; }
button:disabled, button.danger:disabled, input[type=submit]:disabled { background-color: rgba(232, 176, 140, .05); color: var(--sf-muted); border-color: var(--sf-line); }
a.button.danger, button.danger { background: #6b2a2a; border-color: #8a3535; color: #fff; }
a.button.danger:hover, button.danger:hover { background: #8a3535; }
a.button.danger:active, button.danger:active { background: #562222; }
/* icones noires des boutons (accueil, retour, deconnexion...) */
.button.back:before, .button.change-password:before, .button.home:before, .button.logout:before,
.button.manage:before, .button.reconnect:before, button.back:before, button.change-password:before,
button.home:before, button.logout:before, button.manage:before, button.reconnect:before { filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-20deg); }

/* ---------- Notifications / modales ---------- */

.notification {
    background: var(--sf-panel-solid);
    color: var(--sf-text);
    border: 1px solid var(--sf-line);
    border-radius: .8em;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .75);
}
.notification.error { background: #2a1214; border-color: #7a2a2e; }
.notification .progress { background-color: rgba(232, 176, 140, .15); border-color: var(--sf-line); }
.notification .progress .bar { background: linear-gradient(90deg, var(--sf-gold-dark), var(--sf-gold-light)); box-shadow: none; }
.client-status-modal .notification { background: rgba(18, 16, 18, .85); border: 1px solid var(--sf-line); }
.client-status-modal .notification.error { background: rgba(58, 18, 20, .9); }
.client-status-modal .notification .button { border-color: var(--sf-gold); color: var(--sf-gold-light); }

/* ---------- En session : menu lateral (Ctrl+Alt+Shift) et panneau des autres connexions ---------- */

.menu {
    background: var(--sf-panel-solid);
    color: var(--sf-text);
    box-shadow: 1px 0 0 var(--sf-line), 8px 0 40px rgba(0, 0, 0, .7);
}
.menu .header { background: rgba(232, 176, 140, .06); }
.menu .header h2 { font-size: 1.1em; }
.menu-body { background: transparent; }
.menu .menu-section, .menu .menu-body > * { border-color: var(--sf-line); }
.menu .menu-section h3, .menu h3 { color: var(--sf-gold-light); font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: .1em; }
.menu input[type=range]::-webkit-slider-runnable-track { background: var(--sf-gold-dark); }
.menu input[type=range]::-moz-range-track { background: var(--sf-gold-dark); }
.menu .zoom-ctrl a, .menu .clipboard-settings, .menu p { color: var(--sf-text); }
.connection-select-menu .menu-dropdown .menu-contents .filter input { border-bottom-color: var(--sf-line); }

#other-connections .client-panel { background: rgba(18, 16, 18, .85); border-color: var(--sf-line-strong); border-radius: .5em 0 0 0; }
#other-connections .client-panel-handle { background-color: var(--sf-gold); opacity: .6; }
#other-connections .client-panel-connection { border-color: var(--sf-line-strong); }

/* ---------- Rouage de chargement ---------- */
.loading:before { filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-20deg); opacity: .7; }

/* ---------- Scrollbars ---------- */
* { scrollbar-color: rgba(232, 176, 140, .3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(232, 176, 140, .3); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }