@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root, .dark {
    --background: #0b0d11 !important;
    --surfacePrimary: rgba(255,255,255,0.05) !important;
    --surfaceSecondary: rgba(255,255,255,0.08) !important;
    --textPrimary: #e5e7eb !important;
    --textSecondary: rgba(229,231,235,0.87) !important;
    --iconPrimary: #20b2aa !important;
    --iconSecondary: #20b2aa !important;
    --iconTertiary: rgba(229,231,235,0.5) !important;
    --action: #e5e7eb !important;
    --hover: rgba(32,178,170,0.1) !important;
    --item-selected: #20b2aa !important;
    --borderPrimary: rgba(255,255,255,0.08) !important;
    --borderSecondary: rgba(255,255,255,0.12) !important;
    --divider: rgba(255,255,255,0.08) !important;
    --dividerPrimary: rgba(255,255,255,0.06) !important;
    --dividerSecondary: rgba(255,255,255,0.04) !important;
    --teal: #20b2aa !important;
    --purple: #8b5cf6 !important;
    --text: #e5e7eb !important;
    --text-muted: #9ca3af !important;
}

* { font-family: 'Saira', sans-serif !important; }

.material-icons {
    font-family: 'Material Icons' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    color: #20b2aa !important;
}

body, #app {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(32,178,170,0.08), transparent 60%),
        radial-gradient(800px 500px at 90% 10%, rgba(120,120,255,0.08), transparent 60%),
        linear-gradient(180deg, #0f1115, #0b0d11) !important;
    background-attachment: fixed !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0b0d11; }
::-webkit-scrollbar-thumb { background: rgba(32,178,170,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(32,178,170,0.6); }

#sidebar, nav {
    background: linear-gradient(180deg, rgba(15,17,21,0.97), rgba(11,13,17,0.99)) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
}

.breadcrumbs {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.vue-simple-progress { background: rgba(255,255,255,0.08) !important; border-radius: 8px !important; }
.vue-simple-progress-bar { background: linear-gradient(90deg, #20b2aa, #8b5cf6) !important; border-radius: 8px !important; }

.file-icons.mosaic .item {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease !important;
}

.file-icons.mosaic .item:hover {
    background: rgba(32,178,170,0.1) !important;
    border-color: rgba(32,178,170,0.35) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(32,178,170,0.15) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.context-menu {
    background: linear-gradient(135deg, rgba(15,17,21,0.97), rgba(11,13,17,0.99)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

input[type="text"], input[type="password"], input[type="search"], textarea, select {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    color: #e5e7eb !important;
    font-family: 'Saira', sans-serif !important;
}

input:focus, textarea:focus, select:focus {
    border-color: rgba(32,178,170,0.5) !important;
    box-shadow: 0 0 0 3px rgba(32,178,170,0.12) !important;
    outline: none !important;
}

button, .button, input[type="submit"] {
    border-radius: 10px !important;
    font-family: 'Saira', sans-serif !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.Vue-Toastification__toast {
    background: linear-gradient(135deg, rgba(15,17,21,0.97), rgba(11,13,17,0.99)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    color: #e5e7eb !important;
}

.material-icons.spin { animation: spin 1s linear infinite !important; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#listing .item[aria-selected=true] {
    background: rgba(32,178,170,0.18) !important;
    border-color: rgba(32,178,170,0.45) !important;
    color: #e5e7eb !important;
}

#listing .item[aria-selected=true] .material-icons {
    color: #20b2aa !important;
}

#listing .item[aria-selected=true] .name,
#listing .item[aria-selected=true] .size,
#listing .item[aria-selected=true] .modified {
    color: #e5e7eb !important;
}

.vfm--overlay {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(5,7,10,0.75) !important;
}

.vfm__content {
    background: linear-gradient(135deg, rgba(15,17,21,0.97), rgba(11,13,17,0.99)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
    color: #e5e7eb !important;
    z-index: 9999 !important;
    position: relative !important;
}

.vfm__content button {
    border-radius: 4px !important;
    min-width: unset !important;
    padding: 4px 10px !important;
}

select option {
    background: #0f1115 !important;
    color: #e5e7eb !important;
}

/* Info nad tabelką udostępniania - tylko na /settings/shares */
.card-content.full::before {
    content: '💡 Dodaj ?inline=true do linku aby wyświetlić plik bezpośrednio w przeglądarce';
    display: block;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(32,178,170,0.1);
    border: 1px solid rgba(32,178,170,0.3);
    color: #20b2aa;
    font-size: 0.85em;
    font-weight: 500;
}