/* ==========================================================================
   1. PALETA E VARIÁVEIS GLOBAIS SMARTBACKUP
   ========================================================================== */
:root {
    --smart-bg: #060B14;
    --smart-card-bg: #0B132B;
    --smart-header-bg: #090F1D;
    --smart-border: #1E293B;
    --smart-border-focus: #1D68A8;
    --smart-blue: #0E78F9;
    --smart-blue-hover: #0263D6;
    --smart-text-main: #FFFFFF;
    --smart-text-muted: #94A3B8;
}

/* ==========================================================================
   2. TELA DE LOGIN (SMARTBACKUP CENTRAL DE OPERAÇÕES)
   ========================================================================== */
body#body-login {
    background: var(--smart-bg) radial-gradient(circle at center, #0F1D38 0%, var(--smart-bg) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Zerar wrappers do Nextcloud */
body#body-login .wrapper,
body#body-login #content,
body#body-login #content-wrapper,
body#body-login main,
body#body-login .body-login-container,
body#body-login .guest-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 420px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Logo no topo com brilho */
body#body-login #header,
body#body-login header,
body#body-login .logo,
body#body-login .header-app__logo,
body#body-login [class*="logo"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin: 0 auto 20px auto !important;
    height: 90px !important;
    min-height: 90px !important;
    width: 90px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 16px rgba(14, 120, 249, 0.6)) !important;
}

body#body-login .logo img,
body#body-login .logo svg,
body#body-login #header img,
body#body-login #header svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 90px !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* Card Principal de Login */
body#body-login form,
body#body-login .login-form {
    background-color: var(--smart-card-bg) !important;
    border: 1px solid var(--smart-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
    padding: 32px 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 420px !important;
}

body#body-login fieldset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Badge superior estilo Pill */
body#body-login form::before {
    content: "SMARTBACKUP STORAGE";
    display: table;
    background: rgba(14, 120, 249, 0.12) !important;
    border: 1px solid rgba(14, 120, 249, 0.4) !important;
    color: #60A5FA !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    margin: 0 auto 16px auto !important;
    text-transform: uppercase;
}

/* Título de Login */
body#body-login h1,
body#body-login h2,
body#body-login .login-title,
body#body-login .body-login__title {
    color: #FFFFFF !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
}

/* Campos de Login */
body#body-login input[type="text"],
body#body-login input[type="password"] {
    background-color: #060B14 !important;
    border: 1px solid var(--smart-border) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body#body-login input[type="text"]:focus,
body#body-login input[type="password"]:focus {
    border-color: var(--smart-blue) !important;
    box-shadow: 0 0 0 2px rgba(14, 120, 249, 0.3) !important;
    outline: none !important;
}

/* Checkbox e Labels de Login */
body#body-login label,
body#body-login label[for="remember_login"],
body#body-login .checkbox-label {
    color: var(--smart-text-muted) !important;
    font-size: 13px !important;
}

body#body-login input[type="checkbox"] {
    accent-color: var(--smart-blue) !important;
}

/* Botão Azul Sólido "Entrar" */
body#body-login button[type="submit"],
body#body-login .primary,
body#body-login #submit-form,
body#body-login .login-button {
    background-color: var(--smart-blue) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 15px !important;
    width: 100% !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: background-color 0.2s ease !important;
}

body#body-login button[type="submit"]:hover,
body#body-login .primary:hover {
    background-color: var(--smart-blue-hover) !important;
}

/* Links do rodapé do card */
body#body-login a,
body#body-login a:visited,
body#body-login #lost-password {
    color: var(--smart-text-muted) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 8px !important;
}

body#body-login a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Ocultar Rodapés públicos soltos */
body#body-login footer,
body#body-login .footer,
body#body-login .entity-name,
#footer,
.footer {
    display: none !important;
}

/* ==========================================================================
   3. PAINEL INTERNO (HEADER, MENU LATERAL E TABELAS)
   ========================================================================== */
html, body, #body-user, #content, #app-content, #app-content-vue {
    background-color: var(--smart-bg) !important;
    color: var(--smart-text-main) !important;
}

/* Cabeçalho */
header#header {
    background-color: var(--smart-header-bg) !important;
    border-bottom: 1px solid var(--smart-border) !important;
}

#header .header-left,
#header .header-right,
#header .header-right-no-margin {
    background-color: transparent !important;
}

/* Menu Lateral */
#app-navigation, .app-navigation {
    background-color: var(--smart-header-bg) !important;
    border-right: 1px solid var(--smart-border) !important;
}

#app-navigation li a {
    color: var(--smart-text-muted) !important;
    border-radius: 6px;
    margin: 2px 8px;
}

#app-navigation li.active a,
#app-navigation li a:hover {
    background-color: #111D35 !important;
    color: #FFFFFF !important;
}

/* Ocultar recomendações */
[data-cy-files-list-recommendations],
.recommendations,
#recommendations {
    display: none !important;
}

/* Barra de Controles */
.files-controls, .app-content-controls, #controls {
    background-color: var(--smart-bg) !important;
    border-bottom: 1px solid var(--smart-border) !important;
}

/* Tabelas */
table.files-filestable,
.files-filestable {
    background-color: var(--smart-bg) !important;
}

.files-filestable thead th {
    background-color: #0B1325 !important;
    color: var(--smart-text-muted) !important;
    border-bottom: 1px solid var(--smart-border) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.files-filestable tbody tr,
tr[data-file] {
    background-color: var(--smart-bg) !important;
    border-bottom: 1px solid #111B2E !important;
}

.files-filestable tbody tr:hover,
tr[data-file]:hover {
    background-color: #0E182E !important;
}

.files-filestable .filename,
.files-filestable .filesize,
.files-filestable .modified,
.files-filestable .nametext {
    color: #CBD5E1 !important;
}

/* Botões */
.button-vue--primary,
#controls .actions .button.primary,
button.primary {
    background-color: var(--smart-blue) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}

#searchbox input,
input[type="search"] {
    background-color: #111827 !important;
    border: 1px solid #374151 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   4. MENUS SUSPENSOS, DROPDOWNS E POPOVERS (SÓLIDOS)
   ========================================================================== */
.popover__wrapper,
.popover__inner,
.menu,
.user-status-menu,
.v-popper__popper,
.v-popper__wrapper,
.v-popper__inner,
div[class*="popover"],
div[class*="dropdown"],
#user-menu {
    background-color: var(--smart-card-bg) !important;
    border: 1px solid var(--smart-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
    z-index: 99999 !important;
}

.popover__inner li,
.popover__inner a,
.popover__inner button,
.menu li,
.menu a,
.menu button,
.user-status-menu-item {
    background-color: transparent !important;
    color: #E2E8F0 !important;
}

.popover__inner li:hover,
.popover__inner a:hover,
.popover__inner button:hover,
.menu li:hover,
.menu a:hover,
.menu button:hover,
.user-status-menu-item:hover {
    background-color: #111D35 !important;
    color: #FFFFFF !important;
}

.user-status-menu__header,
.popover__inner .header {
    border-bottom: 1px solid var(--smart-border) !important;
}

.oc-dialog,
.modal-wrapper,
.modal-container {
    background-color: var(--smart-card-bg) !important;
    border: 1px solid var(--smart-border) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
}