@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Manrope:wght@400..800&display=swap');

/* ==========================================================================
   HelixDrive — thème "Liquid Glass" (repris de Tempo)
   À charger APRÈS le <style> existant de chaque page :
   <link rel="stylesheet" href="{{ url_for('static', filename='liquid-glass.css') }}">
   ========================================================================== */

:root {
    /* Palette Tempo */
    --brand-teal: #009B77;
    --brand-teal-deep: #007A5E;
    --brand-teal-bright: #00BF8F;
    --brand-teal-glow: rgba(0, 155, 119, 0.18);
    --brand-mint: #20C997;
    --text-dark: #0D1F1C;
    --text-muted: #3F6B61;

    /* Fond : champs de couleur flous */
    --bg-gradient:
        radial-gradient(1100px 720px at -6% -18%, rgba(32, 201, 151, .32), transparent 62%),
        radial-gradient(900px 640px at 106% 2%, rgba(0, 155, 119, .20), transparent 58%),
        radial-gradient(1000px 760px at 52% 118%, rgba(123, 143, 212, .17), transparent 62%),
        linear-gradient(180deg, #F5FBF8 0%, #E8F5EF 100%);

    /* Verre */
    --glass-bg: rgba(255, 255, 255, 0.52);
    --glass-bg-hover: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.78);
    --glass-shield: 0 4px 16px rgba(0, 70, 52, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    --glass-thick: linear-gradient(150deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58));
    --ease: cubic-bezier(.22, .9, .3, 1);

    --orange-bg: rgba(254, 247, 224, 0.7);
    --red-bg: rgba(252, 232, 230, 0.7);
    --bottom-nav-height: 64px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { background: var(--bg-gradient) fixed; }

body {
    background: var(--bg-gradient) !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::before, body::after { display: none !important; } /* anciennes taches floues */

body, button, input, select, textarea, table {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
    letter-spacing: -.003em;
}
h1, h2, h3, .brand, .modal-header, .welcome-title {
    font-family: 'Bricolage Grotesque', 'Manrope', -apple-system, 'SF Pro Display', system-ui, sans-serif !important;
    letter-spacing: -.02em;
}
h2, h3, .modal-header { font-weight: 650; }
::selection { background: rgba(0, 155, 119, .24); }
:focus-visible { outline: 2px solid rgba(0, 155, 119, .6); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0, 155, 119, .30); border-radius: 10px; border: 1px solid rgba(255, 255, 255, .45); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Chrome : sidebar & header mobile ─────────────────────────────────── */
.sidebar {
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
    border-right: 1px solid var(--glass-border);
    box-shadow: 0 0 40px rgba(0, 70, 52, .06), inset -1px 0 0 rgba(255, 255, 255, .6);
}
.mobile-header {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 rgba(0, 155, 119, .07), 0 12px 32px rgba(0, 70, 52, .07);
}
.brand { color: var(--brand-teal); }

.user-profile-card {
    background: rgba(255, 255, 255, .6); border-radius: 18px;
    box-shadow: var(--glass-shield);
}
.user-profile-card:hover { background: var(--glass-bg-hover); }
.user-avatar { background: linear-gradient(135deg, #009B77, #00BF8F); }

/* ── Boutons ──────────────────────────────────────────────────────────── */
button, .btn-action, .btn-new, .btn-secondary, .nav-item, .file-card, .btn-up {
    transition: transform .2s var(--ease), box-shadow .25s, filter .2s, background-color .2s, border-color .2s, color .2s;
}
button:not(:disabled):active, .btn-action:active, .btn-new:active { transform: scale(.97); }

.btn-new, .mobile-fab,
button[style*="background: var(--brand-teal)"], .btn-action[style*="background: var(--brand-teal)"] {
    background: linear-gradient(135deg, #009B77, #00BF8F) !important;
    box-shadow: 0 8px 22px rgba(0, 155, 119, .34), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 5px rgba(0, 80, 60, .18) !important;
}
.btn-new:hover { transform: translateY(-2px); filter: brightness(1.04) saturate(1.05); }

.btn-secondary, .btn-up, .btn-action, .btn-selection-action, .btn-keep-active {
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 2px 8px rgba(0, 70, 52, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.btn-secondary { color: var(--brand-teal); }
.btn-secondary:hover, .btn-up:hover { background: rgba(255, 255, 255, .92); }
.btn-action:hover { background: var(--brand-teal); }
.btn-selection-action:hover { background: var(--brand-teal); }

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav-item { border-radius: 14px; }
.nav-item:hover { background: rgba(255, 255, 255, .45); }
.nav-item.active {
    background: rgba(255, 255, 255, .85); color: var(--brand-teal-deep);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(0, 70, 52, .12), inset 0 1px 0 #fff;
}
.sidebar-faq { border-top-color: rgba(0, 155, 119, .12); }

.bottom-nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: var(--bottom-nav-height); border-radius: 26px;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(30px) saturate(2); backdrop-filter: blur(30px) saturate(2);
    border: 1px solid var(--glass-border);
    box-shadow: 0 14px 40px rgba(0, 70, 52, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.bottom-nav-item.active { color: var(--brand-teal-deep); }

/* ── Surfaces : cartes, tableaux, grille ──────────────────────────────── */
.table-container, .file-grid, .config-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--glass-border);
    border-radius: 26px;
    box-shadow: var(--glass-shield);
}
.config-card { border-radius: 22px; }
.file-table th { border-bottom-color: rgba(0, 155, 119, .12); }
.file-table td { border-bottom-color: rgba(0, 155, 119, .07); }
.file-table tr:hover td { background-color: rgba(255, 255, 255, .45); }
.file-row.selected td { background-color: rgba(0, 155, 119, .12) !important; }

.file-card {
    background: rgba(255, 255, 255, .58); border-radius: 20px;
    box-shadow: 0 5px 16px rgba(0, 70, 52, .09), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.file-card:hover { background: rgba(255, 255, 255, .88); transform: translateY(-3px); }
.file-card-thumb { border-radius: 15px; background: rgba(0, 155, 119, .08); box-shadow: inset 0 1px 3px rgba(0, 70, 52, .08); }

/* Cartes de stats du coffre et bloc blanc inline */
#coffre div[style*="background: rgba(255,255,255,0.6)"] {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    border-radius: 26px !important;
}
#coffre div[style*="background: rgba(0,156,127,0.08)"] {
    background: rgba(0, 155, 119, .09) !important;
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Barre de sélection, bannière d'archivage */
.selection-bar { background: rgba(0, 155, 119, .1); border-color: rgba(0, 155, 119, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.archive-warning-banner {
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--glass-shield);
}
.archive-warning-item { background: rgba(255, 255, 255, .62); }
.marquee-rect { background: rgba(0, 155, 119, .12); border-color: var(--brand-teal); border-radius: 6px; }

/* Toggle liste/grille */
.file-view-toggle {
    background: rgba(0, 155, 119, .08); border-color: var(--glass-border);
    box-shadow: inset 0 1px 2px rgba(0, 70, 52, .08);
}
.file-view-toggle button.active {
    background: rgba(255, 255, 255, .95); color: var(--brand-teal-deep);
    box-shadow: 0 2px 8px rgba(0, 70, 52, .14), inset 0 1px 0 #fff;
}

/* Badges */
.badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.badge-dna { background-color: rgba(32, 201, 151, .22); }

/* ── Champs ───────────────────────────────────────────────────────────── */
.search-bar,
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea {
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(0, 155, 119, .18);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(0, 70, 52, .07);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.search-bar {
    border-radius: 30px; border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: var(--glass-shield);
}
.search-bar:focus,
input:focus, select:focus, textarea:focus {
    outline: none; background: rgba(255, 255, 255, .88);
    border-color: rgba(0, 155, 119, .55);
    box-shadow: 0 0 0 4px rgba(0, 155, 119, .15);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-teal); }
select { border-radius: 20px; }

/* ── Champ fichier (photo de profil) ──────────────────────────────────── */
input[type="file"] {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    padding: 6px 14px 6px 6px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
    border: 1px dashed rgba(0, 155, 119, .38);
    border-radius: 999px;
    color: var(--text-muted); font-size: .85rem !important; font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
input[type="file"]:hover {
    background: rgba(255, 255, 255, .8);
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 4px rgba(0, 155, 119, .10), inset 0 1px 0 #fff;
}
input[type="file"]::file-selector-button {
    margin-right: 12px; padding: .55rem 1.2rem;
    border: none; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: .85rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #009B77, #00BF8F);
    box-shadow: 0 6px 16px rgba(0, 155, 119, .30), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 5px rgba(0, 80, 60, .18);
    transition: transform .2s var(--ease), filter .2s;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); }
input[type="file"]::file-selector-button:active { transform: scale(.97); }

/* ── Menu d'actions (déplacé dans <body>) ─────────────────────────────── */
.actions-dropdown-menu {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
    border: 1px solid var(--glass-border); border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 60, 45, .22), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.dropdown-item { border-radius: 12px; }
.dropdown-item:hover { background: rgba(0, 155, 119, .08); }
.mobile-fab-menu button {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 10px 28px rgba(0, 60, 45, .18), inset 0 1px 0 #fff;
}
.mobile-fab-container { bottom: calc(var(--bottom-nav-height) + 1.75rem); }

/* ── Modales : verre épais ────────────────────────────────────────────── */
.modal {
    background-color: rgba(8, 40, 31, .30);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    animation: glassFade .25s ease both;
}
.modal-content {
    background: var(--glass-thick);
    -webkit-backdrop-filter: blur(36px) saturate(1.9); backdrop-filter: blur(36px) saturate(1.9);
    border: 1px solid var(--glass-border); border-radius: 28px;
    box-shadow: 0 34px 90px rgba(0, 60, 45, .24), 0 2px 8px rgba(0, 60, 45, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
    animation: glassIn .34s var(--ease) both;
}
.modal-header { color: var(--brand-teal); }
.input-modal { border-radius: 14px; }

@keyframes glassIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes glassFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Pages de connexion / inscription ─────────────────────────────────── */
.card {
    background: var(--glass-thick) !important;
    -webkit-backdrop-filter: blur(36px) saturate(1.9); backdrop-filter: blur(36px) saturate(1.9);
    border: 1px solid var(--glass-border) !important; border-radius: 28px !important;
    box-shadow: 0 34px 90px rgba(0, 60, 45, .20), 0 2px 8px rgba(0, 60, 45, .06), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    animation: glassIn .5s var(--ease) both;
}
.card h2 { color: var(--brand-teal); font-size: 1.6rem; }
.card label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.card input { border: 1px solid rgba(0, 155, 119, .18); }
.card button[type="submit"] {
    background: linear-gradient(135deg, #009B77, #00BF8F);
    box-shadow: 0 8px 22px rgba(0, 155, 119, .34), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 5px rgba(0, 80, 60, .18);
    border-radius: 14px;
}
.card button[type="submit"]:hover { background: linear-gradient(135deg, #009B77, #00BF8F); filter: brightness(1.05) saturate(1.05); }
.card a { color: var(--brand-teal); }
.error { background: var(--red-bg); border-radius: 12px; padding: .6rem .85rem; }
.hint { color: var(--text-muted); }

.welcome-title { color: var(--brand-teal); border-right-color: var(--brand-teal); }
@keyframes typing { from { width: 0; } to { width: 12.5ch; } }
@keyframes blink { from, to { border-color: transparent; } 50% { border-color: #009B77; } }

/* Petits points du fond (login / register uniquement) */
body:has(> .card) {
    background:
        radial-gradient(circle, rgba(0, 155, 119, .28) 1.4px, transparent 1.4px),
        var(--bg-gradient) !important;
    background-size: 24px 24px, auto, auto, auto, auto !important;
    background-position: 0 0 !important;
    background-attachment: fixed !important;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html { background: var(--bg-gradient) fixed; }
    .main-content { padding-bottom: calc(var(--bottom-nav-height) + 2.75rem); }
}

/* ── Accessibilité ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .sidebar, .mobile-header, .bottom-nav, .modal-content, .card, .actions-dropdown-menu,
    .table-container, .file-grid, .config-card {
        background: rgba(255, 255, 255, .96) !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
}

/* ==========================================================================
   Stockage (quota par utilisateur) + onglet « Partagés par moi »
   ========================================================================== */

/* La sidebar peut défiler si la fenêtre est basse (la barre de stockage ajoute de la hauteur) */
/* Sidebar fixe (pas de défilement) : l'espace libre est réparti entre les blocs au lieu de tout coller en haut.
   On ne resserre les espacements que sur les écrans vraiment bas. */
.sidebar { overflow: hidden; justify-content: space-between; }
@media (min-width: 769px) and (max-height: 650px) {
    .sidebar { padding-top: 1.5rem; padding-bottom: 1rem; gap: 1rem; }
    .sidebar .nav-item { padding-top: .45rem; padding-bottom: .45rem; margin-bottom: .1rem; }
}
@media (min-width: 769px) and (max-height: 560px) {
    .sidebar { padding-top: 1rem; gap: .6rem; }
    .sidebar .user-profile-card { padding: .5rem .7rem; }
}
.sidebar-bottom { display: flex; flex-direction: column; gap: .95rem; }
.sidebar-bottom .sidebar-faq { margin-top: 0; }

.storage-meter {
    --meter-a: #009B77; --meter-b: #00BF8F;
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; padding: 0 .15rem;
}
.storage-meter-note { flex-basis: 100%; font-size: .72rem; font-weight: 700; line-height: 1.2; color: var(--orange-hot, #B06000); }
.storage-meter-text { flex-basis: 100%; font-size: .7rem; color: var(--text-muted); line-height: 1.2; }
.storage-track {
    flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(0, 155, 119, .14);
}
.storage-fill {
    height: 100%; border-radius: 999px; transform-origin: left center;
    background: linear-gradient(90deg, var(--meter-a), var(--meter-b));
    animation: storageFill .9s var(--ease) both;
    transition: width .6s var(--ease);
}
@keyframes storageFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.storage-meter-percent {
    font-size: .78rem; font-weight: 700; color: var(--brand-teal-deep);
    min-width: 2.4rem; text-align: right; font-variant-numeric: tabular-nums;
}

/* Carte de stockage de l'onglet Profil : uniquement utile sur mobile (sidebar masquée) */
.storage-card-mobile { display: none; padding: 1rem 1.25rem; }

/* ── Onglet « Partagés par moi » ──────────────────────────────────────── */
.share-path { font-size: .74rem; font-weight: 500; color: var(--text-muted); margin-top: .15rem; opacity: .85; }
.share-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.share-chip {
    display: inline-flex; align-items: center; gap: .4rem; max-width: 190px;
    padding: .2rem .65rem .2rem .25rem; border-radius: 999px;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(0, 70, 52, .08), inset 0 1px 0 #fff;
    font-size: .8rem; font-weight: 600; color: var(--text-dark);
}
.share-chip-avatar {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #009B77, #00BF8F); color: #fff; font-size: .7rem; font-weight: 700;
}
.share-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-chip-more { padding: .2rem .65rem; color: var(--brand-teal-deep); background: rgba(0, 155, 119, .1); }

@media (max-width: 768px) {
    .storage-card-mobile { display: block; }
    /* Sur mobile, la colonne « Partagé avec » est l'info clé de cet onglet : on la garde, on masque la date */
    #table-mes-partages th:nth-child(2), #table-mes-partages td:nth-child(2) { display: table-cell; }
    #table-mes-partages th:nth-child(5), #table-mes-partages td:nth-child(5) { display: none; }
    .share-chip { max-width: 130px; }
    /* 5 entrées dans la barre du bas : on évite le retour à la ligne des libellés */
    .bottom-nav-item span { white-space: nowrap; }
    #m-nav-mes-partages span { font-size: .68rem; }
}

/* ── Modale « Espace insuffisant » ────────────────────────────────────── */
.quota-modal-icon {
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--orange-hot, #B06000);
    background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(254, 247, 224, .85));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px rgba(176, 96, 0, .18), inset 0 1px 0 #fff;
}
#quotaModal .modal-footer { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
#quotaModal .storage-meter { padding: 0; }