/*
 * SeuSaude File Browser - Branding CSS
 * Personalização visual sobre o File Browser original
 * Coloque este arquivo em: branding/custom.css
 */

/* ===== Paleta SeuSaúde ===== */
:root {
    --ss-primary: #0066CC;
    --ss-primary-dark: #004D99;
    --ss-primary-light: #3388DD;
    --ss-accent: #00B894;
    --ss-accent-dark: #009975;
    --ss-bg-dark: #0F1720;
    --ss-bg-card: #162030;
    --ss-text: #E8ECF0;
    --ss-text-muted: #8896A8;
    --ss-border: #1E2D40;
    --ss-danger: #E74C3C;
    --ss-warning: #F39C12;
    --ss-success: #00B894;
}

/* ===== Login Page ===== */
#login {
    background: var(--ss-bg-dark) !important;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(0, 102, 204, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 184, 148, 0.06) 0%, transparent 50%) !important;
}

#login .card {
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

#login .card h1 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

#login input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease !important;
}

#login input:focus {
    border-color: var(--ss-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
}

/* ===== Header ===== */
header {
    background: var(--ss-bg-card) !important;
    border-bottom: 1px solid var(--ss-border) !important;
}

/* ===== Sidebar ===== */
#sidebar {
    background: var(--ss-bg-dark) !important;
    border-right: 1px solid var(--ss-border) !important;
}

/* ===== Botões Primários ===== */
.button--flat.button--blue,
.button.button--blue,
button.action[aria-label="Upload"],
#login input[type="submit"],
.prompt .action {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}

.button--flat.button--blue:hover,
.button.button--blue:hover,
button.action[aria-label="Upload"]:hover,
#login input[type="submit"]:hover {
    background: var(--ss-primary-dark) !important;
}

/* ===== Botões de Exclusão ===== */
.button--flat.button--red,
.button.button--red {
    background: var(--ss-danger) !important;
    border-radius: 8px !important;
}

/* ===== Links e Acentos ===== */
a {
    color: var(--ss-primary-light) !important;
}

/* ===== Cards e Items de Arquivo ===== */
.item {
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.item:hover {
    background: rgba(0, 102, 204, 0.06) !important;
}

.item.selected {
    background: rgba(0, 102, 204, 0.12) !important;
    border-color: var(--ss-primary) !important;
}

/* ===== Breadcrumbs ===== */
#breadcrumbs span:last-child {
    font-weight: 600 !important;
}

/* ===== Editor ===== */
.editor #ace_editor {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important;
}

/* ===== Prompt / Modals ===== */
.overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

.card.floating {
    background: var(--ss-bg-card) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ===== Upload Area ===== */
.upload-area {
    border: 2px dashed var(--ss-border) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.upload-area:hover,
.upload-area.dragging {
    border-color: var(--ss-primary) !important;
    background: rgba(0, 102, 204, 0.05) !important;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ss-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ss-text-muted);
}

/* ===== Rodapé Personalizado ===== */
footer::after {
    content: " | SeuSaude ERP";
    font-size: 12px;
    color: var(--ss-text-muted);
}

/* ===== Seleção de Texto ===== */
::selection {
    background: rgba(0, 102, 204, 0.3);
    color: #fff;
}

/* ===== Responsivo ===== */
@media (max-width: 768px) {
    .card.floating {
        margin: 12px !important;
        border-radius: 10px !important;
    }
}

/* ===== LOGO NO LOGIN (correto: /static/...) ===== */

/* Não esconda tudo. Só esconda o logo padrão, se existir */
#login img[src*="logo"],
#login svg[class*="logo"],
#login .logo {
  display: none !important;
}

/* Injeta a logo acima do formulário */
#login form::before,
#login .card form::before,
#login .card.floating form::before {
  content: "";
  display: block;
  width: 260px;
  height: 90px;
  margin: 0 auto 18px auto;
  background: url("/static/img/logo.svg") center/contain no-repeat;
}