/* Engirix File Cloud — light blue / white / soft grey theme */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* !important: Filestash loads designsystem_darkmode.css AFTER custom.css */
:root,
html,
body,
body.dark-mode {
    --engirix-blue: #2563eb;
    --engirix-blue-deep: #1d4ed8;
    --engirix-blue-soft: #dbeafe;
    --engirix-mist: #eef2f7;
    --engirix-ink: #1e293b;
    --engirix-muted: #64748b;
    --engirix-line: #d8dee8;
    --engirix-white: #ffffff; 
    --engirix-panel: #f8fafc;

    --bg-color: #f1f5f9 !important;
    --color: #1e293b !important;
    --emphasis: #1d4ed8 !important;
    --primary: #2563eb !important;
    --emphasis-primary: #dbeafe !important;
    --emphasis-secondary: #334155 !important;
    --light: #64748b !important;
    --super-light: #ffffff !important;
    --dark: #1e293b !important;
    --surface: #e2e8f0 !important;
    --border: #d8dee8 !important;
    --error: #dc2626 !important;
    --success: #059669 !important;
}

html, body {
    font-family: "Source Sans 3", system-ui, sans-serif !important;
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    color: #1e293b !important;
    background: #ffffff !important;
}

/* ========== LOGIN ========== */

.component_page_connect,
.dark-mode .component_page_connect {
    background: linear-gradient(160deg, #2563eb 0%, #3b82f6 45%, #1d4ed8 100%) !important;
}

.component_page_connection_form::before {
    content: "Engirix File Cloud";
    display: block;
    text-align: center;
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 6px;
}

.component_page_connection_form::after {
    content: "Fájlok biztonságos elérése";
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0 0 16px;
}

.component_page_connection_form .box {
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.component_page_connection_form form label {
    font-style: normal !important;
    text-transform: none !important;
    font-weight: 600;
    color: #64748b;
}

.component_page_connection_form form button.emphasis,
.component_page_connection_form .box button.emphasis {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: 0.01em;
}

.component_page_connection_form div.buttons {
    background: #eff6ff;
    border-radius: 10px;
}

.component_page_connection_form div.buttons button.active {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

.connect-form input:focus,
.connect-form textarea:focus,
.component_page_connection_form input:focus {
    border-color: #2563eb !important;
}

[data-bind="component_forkme"] {
    display: none !important;
}

.component_poweredbyfilestash {
    color: rgba(255, 255, 255, 0.7) !important;
}

.component_poweredbyfilestash a {
    color: #ffffff !important;
}

/* ========== APP SHELL (files) ========== */

.component_filemanager_shell,
body.dark-mode .component_filemanager_shell {
    background: #ffffff !important;
}

.component_page_filespage,
body.dark-mode .component_page_filespage,
body:not(.dark-mode) .component_page_filespage {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

.component_filemanager_shell [data-bind="filemanager-children"],
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"],
.component_filemanager_shell [data-bind="sidebar"].hidden ~ div > [data-bind="filemanager-children"].scrolling {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Top bar: white + dark text (fixes unreadable brand) */
.component_menubar,
.dark-mode .component_menubar,
body.dark-mode .component_menubar {
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 0 #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0;
}

.component_menubar .titlebar,
.component_menubar .container,
.dark-mode .component_menubar .container {
    color: #1e293b !important;
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.component_menubar .action-item .component_icon,
.component_menubar .action-item button {
    filter: none !important;
    color: #334155 !important;
    opacity: 0.85;
}

.component_menubar .action-item .btn {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* Sidebar */
.component_filemanager_shell .component_sidebar,
.component_sidebar,
[data-bind="sidebar"] {
    background: #ffffff !important;
    color: #1e293b !important;
    border-right: 1px solid #e2e8f0;
}

.component_sidebar a,
.component_sidebar span,
.component_sidebar .label {
    color: #334155 !important;
}

/* Breadcrumb / submenu — brand link must stay readable */
.component_breadcrumb,
.component_breadcrumb .breadcrumb,
[is="component_submenu"],
.scrolling [is="component_submenu"] {
    background: transparent !important;
    color: #1e293b !important;
    box-shadow: none !important;
    border-bottom-color: #e2e8f0 !important;
}

/* Filestash dark-mode sets label to #f1f1f1 — invisible on light bg */
.component_breadcrumb .component_path-element .label,
.component_breadcrumb .component_path-element a.label,
.dark-mode .component_breadcrumb .component_path-element .label,
.dark-mode .component_breadcrumb .component_path-element a.label,
body.dark-mode .component_breadcrumb .component_path-element .label,
body.dark-mode .component_breadcrumb .component_path-element a.label {
    color: #1e293b !important;
    opacity: 1 !important;
}

/* Home brand ("Engirix File Cloud") — strong, clickable */
.component_breadcrumb .component_path-element.n0 .label,
.component_breadcrumb .component_path-element.n0 a.label,
.component_breadcrumb .component_path-element.n0 .component_path-element-wrapper a,
.component_breadcrumb .component_path-element.n0 .component_path-element-wrapper div,
.dark-mode .component_breadcrumb .component_path-element.n0 .label,
.dark-mode .component_breadcrumb .component_path-element.n0 a.label {
    color: #1d4ed8 !important;
    font-family: "Outfit", system-ui, sans-serif !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    letter-spacing: -0.02em;
}

body.touch-no .component_path-element.n0 .component_path-element-wrapper a.label:hover,
body.touch-no .component_path-element.n0 .component_path-element-wrapper:hover {
    background: #dbeafe !important;
    border-radius: 6px;
}

body.dark-mode.touch-no .component_path-element-wrapper a.label:hover {
    background: #eff6ff !important;
}

[is="component_submenu"]::before {
    backdrop-filter: blur(10px);
    background: rgba(248, 250, 252, 0.85);
}

.component_submenu button,
.component_newitem,
[is="component_submenu"] button {
    color: #1e293b !important;
}

/* Files grid */
.component_thing,
.component_thing .file-details,
.component_thing .file-details > span {
    color: #1e293b !important;
}

.touch-no .component_thing:hover,
.component_thing.hover,
.component_thing .highlight {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.component_thing .component_filesize,
.component_thing .component_datetime {
    color: #64748b !important;
}

[is="component_filesystem"] .empty {
    color: #64748b !important;
}

/* Buttons */
button.primary,
button.emphasis {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 8px;
}

button.light {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Upload FAB / queue */
.component_upload {
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.1) !important;
}

.dark-mode .component_upload {
    color: #1e293b !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
}

::-webkit-scrollbar-track {
    background: #e2e8f0 !important;
}