/* 3DHISTECH branding for Filestash. Colours, fonts and logo from 3dhistech.com.
   Fonts and logo are served by the gate at /_gate/brand/ (no third-party requests). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("/_gate/brand/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 100 900; font-display: swap; src: url("/_gate/brand/fonts/noto-sans.woff2") format("woff2"); }

:root {
    --brand-navy: #2A2872;
    --brand-magenta: #C41F6B;
    --brand-ink: #2C2C2C;
    --brand-paper: #F3F3F3;
    --emphasis: var(--brand-navy);
    --emphasis-secondary: var(--brand-navy);
    --primary: #B7B5E4;
    --emphasis-primary: #E2E1F4;
}

body, button, input, select, textarea { font-family: "Noto Sans", system-ui, sans-serif; }
.component_breadcrumb, .component_sidebar h3, h1, h2 { font-family: "Bricolage Grotesque", "Noto Sans", sans-serif; }

/* Logo at the top of the sidebar */
.component_filemanager_shell .component_sidebar > div::before {
    content: "";
    display: block;
    height: 30px;
    margin: 18px 14px 4px 14px;
    background: url("/_gate/brand/logo.png") left center / contain no-repeat;
}
body.dark-mode .component_filemanager_shell .component_sidebar > div::before {
    background-color: #fff;
    background-origin: content-box;
    padding: 6px 10px;
    border-radius: 10px;
}

/* Selected items and the upload button in brand colours */
.component_fab .content { background: var(--brand-navy); }
.component_fab .content:hover { background: var(--brand-magenta); }
.component_thing.selected .component_checkbox .indicator { background: var(--brand-magenta); }

/* Staff login page */
body.common_response_page {
    background: var(--brand-paper);
    color: var(--brand-ink);
    font-family: "Noto Sans", system-ui, sans-serif;
    padding-top: 12vh;
}
body.common_response_page::before {
    content: "";
    display: block;
    width: min(320px, 80vw);
    height: 54px;
    margin: 0 auto 6px auto;
    background: url("/_gate/brand/logo.png") center / contain no-repeat;
}
body.common_response_page form.component_middleware::before {
    content: "Files";
    display: block;
    text-align: center;
    margin-bottom: 22px;
    font: 500 1.3rem "Bricolage Grotesque", sans-serif;
    color: var(--brand-navy);
    letter-spacing: 0.02em;
}
body.common_response_page input:not([type="checkbox"]) {
    border: 1px solid #dcdce4;
    border-radius: 10px;
    background: #fff;
}
body.common_response_page input:not([type="checkbox"]):focus { border-color: var(--brand-navy); }
body.common_response_page button, body.common_response_page .btn {
    background: var(--brand-navy);
    border-radius: 150px;
    padding: 13px 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.15s ease;
}
body.common_response_page button:hover, body.common_response_page .btn:hover { background: var(--brand-magenta); }
body.common_response_page .flash { color: var(--brand-magenta); }