/* ============================================================ BZPDrive — Design System Tema claro/escuro via data-theme="light|dark" no Fallback automático: prefers-color-scheme quando sem cookie ============================================================ */ /* ---------- Tokens base (claro) ---------- */ :root, [data-theme="light"] { --bzp-accent: #1a73e8; --bzp-accent-hover: #1557b0; --bzp-accent-soft: #e8f0fe; --bzp-bg: #f8f9fa; --bzp-surface: #ffffff; --bzp-surface-hover: #f1f3f4; --bzp-border: #dadce0; --bzp-text: #202124; --bzp-text-muted: #5f6368; --bzp-text-on-accent: #ffffff; --bzp-nav-bg: #ffffff; --bzp-nav-shadow: 0 1px 3px rgba(0,0,0,.12); --bzp-folder-icon: #fbbc04; --bzp-danger: #d93025; --bzp-success: #188038; --bzp-sidebar-bg: #ffffff; --bzp-shadow-sm: 0 1px 2px rgba(0,0,0,.08); --bzp-shadow-md: 0 2px 8px rgba(0,0,0,.12); --bzp-scrollbar-thumb: #c1c1c1; --bzp-scrollbar-track: #f1f1f1; } /* ---------- Tokens escuros ---------- */ [data-theme="dark"] { --bzp-accent: #8ab4f8; --bzp-accent-hover: #aecbfa; --bzp-accent-soft: #1e2a3a; --bzp-bg: #131314; --bzp-surface: #1e1e1e; --bzp-surface-hover: #2a2a2a; --bzp-border: #3c3c3c; --bzp-text: #e8eaed; --bzp-text-muted: #9aa0a6; --bzp-text-on-accent: #202124; --bzp-nav-bg: #1e1e1e; --bzp-nav-shadow: 0 1px 3px rgba(0,0,0,.4); --bzp-folder-icon: #fbbc04; --bzp-danger: #f28b82; --bzp-success: #81c995; --bzp-sidebar-bg: #1e1e1e; --bzp-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --bzp-shadow-md: 0 2px 8px rgba(0,0,0,.4); --bzp-scrollbar-thumb: #555; --bzp-scrollbar-track: #2a2a2a; } /* ---------- Fallback sistema (sem cookie / sem data-theme) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bzp-accent: #8ab4f8; --bzp-accent-hover: #aecbfa; --bzp-accent-soft: #1e2a3a; --bzp-bg: #131314; --bzp-surface: #1e1e1e; --bzp-surface-hover: #2a2a2a; --bzp-border: #3c3c3c; --bzp-text: #e8eaed; --bzp-text-muted: #9aa0a6; --bzp-text-on-accent: #202124; --bzp-nav-bg: #1e1e1e; --bzp-nav-shadow: 0 1px 3px rgba(0,0,0,.4); --bzp-folder-icon: #fbbc04; --bzp-danger: #f28b82; --bzp-success: #81c995; --bzp-sidebar-bg: #1e1e1e; --bzp-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --bzp-shadow-md: 0 2px 8px rgba(0,0,0,.4); --bzp-scrollbar-thumb: #555; --bzp-scrollbar-track: #2a2a2a; } } /* ============================================================ Reset / Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; position: relative; min-height: 100%; scroll-behavior: smooth; } @media (min-width: 768px) { html { font-size: 16px; } } body { background-color: var(--bzp-bg); color: var(--bzp-text); font-family: 'Google Sans', 'Roboto', system-ui, -apple-system, sans-serif; margin-bottom: 0; min-height: 100vh; display: flex; flex-direction: column; transition: background-color .25s, color .25s; } /* Scrollbar customizada */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bzp-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--bzp-scrollbar-thumb); border-radius: 4px; } /* ============================================================ Override Bootstrap p/ usar tokens ============================================================ */ .card { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 12px; box-shadow: var(--bzp-shadow-sm); color: var(--bzp-text); transition: box-shadow .2s, transform .15s; } .card:hover { box-shadow: var(--bzp-shadow-md); } .table { --bs-table-bg: transparent; --bs-table-color: var(--bzp-text); --bs-table-border-color: var(--bzp-border); --bs-table-hover-bg: var(--bzp-surface-hover); --bs-table-striped-bg: transparent; } .table thead th { color: var(--bzp-text-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--bzp-border); } .form-control, .form-select, .input-group-text { background-color: var(--bzp-surface); border-color: var(--bzp-border); color: var(--bzp-text); border-radius: 8px; transition: border-color .2s, box-shadow .2s; } .form-control:focus, .form-select:focus { background-color: var(--bzp-surface); border-color: var(--bzp-accent); color: var(--bzp-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bzp-accent) 20%, transparent); } .form-control::placeholder { color: var(--bzp-text-muted); } .dropdown-menu { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 10px; box-shadow: var(--bzp-shadow-md); padding: .5rem; } .dropdown-item { color: var(--bzp-text); border-radius: 6px; padding: .45rem .85rem; transition: background-color .15s; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bzp-surface-hover); color: var(--bzp-text); } .dropdown-item.text-danger:hover { background-color: color-mix(in srgb, var(--bzp-danger) 12%, transparent); } .dropdown-divider { border-color: var(--bzp-border); } .dropdown-header { color: var(--bzp-text-muted); font-size: .78rem; } .modal-content { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 16px; color: var(--bzp-text); } .modal-header, .modal-footer { border-color: var(--bzp-border); } .alert { border-radius: 10px; border: none; } .alert-success { background-color: color-mix(in srgb, var(--bzp-success) 15%, transparent); color: var(--bzp-success); } .alert-danger { background-color: color-mix(in srgb, var(--bzp-danger) 15%, transparent); color: var(--bzp-danger); } /* ============================================================ Botões ============================================================ */ .btn { border-radius: 8px; font-weight: 500; transition: background-color .15s, box-shadow .15s, transform .1s; } .btn:active { transform: scale(.97); } .btn-primary { background-color: var(--bzp-accent); border-color: var(--bzp-accent); color: var(--bzp-text-on-accent); } .btn-primary:hover, .btn-primary:focus { background-color: var(--bzp-accent-hover); border-color: var(--bzp-accent-hover); color: var(--bzp-text-on-accent); } .btn-secondary { background-color: var(--bzp-surface-hover); border-color: var(--bzp-border); color: var(--bzp-text); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--bzp-border); border-color: var(--bzp-border); color: var(--bzp-text); } .btn-danger { background-color: var(--bzp-danger); border-color: var(--bzp-danger); color: #fff; } .btn-danger:hover, .btn-danger:focus { background-color: color-mix(in srgb, var(--bzp-danger) 85%, #000); border-color: color-mix(in srgb, var(--bzp-danger) 85%, #000); color: #fff; } .btn-outline-primary { border-color: var(--bzp-accent); color: var(--bzp-accent); } .btn-outline-primary:hover { background-color: var(--bzp-accent-soft); border-color: var(--bzp-accent); color: var(--bzp-accent); } .btn-outline-secondary { border-color: var(--bzp-border); color: var(--bzp-text-muted); } .btn-outline-secondary:hover { background-color: var(--bzp-surface-hover); border-color: var(--bzp-border); color: var(--bzp-text); } .btn-outline-danger { border-color: var(--bzp-danger); color: var(--bzp-danger); } .btn-outline-danger:hover { background-color: color-mix(in srgb, var(--bzp-danger) 12%, transparent); border-color: var(--bzp-danger); color: var(--bzp-danger); } .btn-outline-info { border-color: var(--bzp-accent); color: var(--bzp-accent); } .btn-outline-info:hover { background-color: var(--bzp-accent-soft); border-color: var(--bzp-accent); color: var(--bzp-accent); } .btn-outline-light { border-color: rgba(255,255,255,.35); color: var(--bzp-nav-text, #fff); } .btn-outline-light:hover { background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bzp-accent) 25%, transparent); } /* ============================================================ Navbar ============================================================ */ .bzp-navbar { background-color: var(--bzp-nav-bg) !important; box-shadow: var(--bzp-nav-shadow); border-bottom: 1px solid var(--bzp-border); padding: .6rem 1.25rem; transition: background-color .25s; } .bzp-navbar .navbar-brand { color: var(--bzp-accent) !important; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .45rem; } .bzp-navbar .nav-link { color: var(--bzp-text-muted) !important; border-radius: 8px; padding: .45rem .8rem; font-weight: 500; transition: background-color .15s, color .15s; } .bzp-navbar .nav-link:hover, .bzp-navbar .nav-link.active { background-color: var(--bzp-accent-soft); color: var(--bzp-accent) !important; } .bzp-navbar .navbar-toggler { border: 1px solid var(--bzp-border); padding: .5rem .75rem; border-radius: 8px; transition: background-color .15s; } .bzp-navbar .navbar-toggler:hover { background-color: var(--bzp-surface-hover); } .bzp-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bzp-accent) 25%, transparent); } .bzp-navbar .navbar-toggler .fa-bars { font-size: 1.25rem; } /* Barra de busca da navbar */ .bzp-search { position: relative; } .bzp-search .form-control { background-color: var(--bzp-surface-hover); border: 1px solid transparent; border-radius: 24px; padding-left: 2.4rem; width: 260px; transition: width .3s, background-color .2s, border-color .2s; } .bzp-search .form-control:focus { background-color: var(--bzp-surface); border-color: var(--bzp-accent); width: 340px; } .bzp-search .bzp-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--bzp-text-muted); pointer-events: none; } .bzp-search .btn { display: none; /* ícone fica dentro do campo */ } /* Botão de usuário */ .bzp-user-btn { background: none; border: 1px solid var(--bzp-border); border-radius: 24px; color: var(--bzp-text) !important; padding: .35rem .9rem; font-weight: 500; display: flex; align-items: center; gap: .4rem; transition: background-color .15s; } .bzp-user-btn:hover { background-color: var(--bzp-surface-hover) !important; } /* Botão de toggle de tema */ .bzp-theme-btn { background: none; border: 1px solid var(--bzp-border); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--bzp-text-muted); cursor: pointer; transition: background-color .15s, color .15s; flex-shrink: 0; } .bzp-theme-btn:hover { background-color: var(--bzp-surface-hover); color: var(--bzp-accent); } /* ============================================================ Layout principal ============================================================ */ main.bzp-main { flex: 1; padding: 1.5rem 1.25rem; } /* ============================================================ Sidebar (estatísticas + ações) ============================================================ */ .bzp-sidebar .card { border-radius: 14px; } .bzp-sidebar .bzp-stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bzp-text-muted); } .bzp-sidebar .bzp-stat-value { font-size: 1.05rem; font-weight: 600; color: var(--bzp-text); margin: 0; } .bzp-sidebar .bzp-action-btn { border-radius: 24px; padding: .55rem 1.1rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .5rem; } .bzp-sidebar .bzp-action-btn.btn-primary { box-shadow: 0 2px 6px color-mix(in srgb, var(--bzp-accent) 35%, transparent); } /* ============================================================ Breadcrumb ============================================================ */ .breadcrumb { background: none; padding: 0; margin-bottom: 1.25rem; font-size: .88rem; } .breadcrumb-item + .breadcrumb-item::before { color: var(--bzp-text-muted); } .breadcrumb-item a { color: var(--bzp-accent); text-decoration: none; font-weight: 500; } .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-item.active { color: var(--bzp-text-muted); } /* ============================================================ Cards de Pasta ============================================================ */ .bzp-folder-card { cursor: pointer; border-radius: 12px; border: 1px solid var(--bzp-border); background-color: var(--bzp-surface); transition: box-shadow .2s, background-color .15s, transform .15s; user-select: none; } .bzp-folder-card:hover { background-color: var(--bzp-surface-hover); box-shadow: var(--bzp-shadow-md); transform: translateY(-2px); } .bzp-folder-card .folder-icon { color: var(--bzp-folder-icon); font-size: 2rem; } .bzp-folder-card .card-title { font-size: .9rem; font-weight: 600; color: var(--bzp-text); margin-top: .5rem; margin-bottom: .15rem; } .bzp-folder-card .card-subtitle { font-size: .75rem; color: var(--bzp-text-muted); } .bzp-folder-card .bzp-card-menu { color: var(--bzp-text-muted); background: none; border: none; padding: .2rem .4rem; border-radius: 6px; line-height: 1; transition: background-color .15s, color .15s; } .bzp-folder-card .bzp-card-menu:hover { background-color: var(--bzp-surface-hover); color: var(--bzp-text); } /* ============================================================ Tabela de arquivos ============================================================ */ .bzp-files-table { border-radius: 12px; /* overflow: hidden removido — permite dropdowns renderizarem fora */ border: 1px solid var(--bzp-border); background: var(--bzp-surface); } .bzp-files-table .table { margin-bottom: 0; border-radius: 12px; overflow: hidden; /* apenas na tabela interna, não no container */ } .bzp-files-table tbody tr { transition: background-color .12s; } .bzp-files-table tbody tr:hover { background-color: var(--bzp-surface-hover); } .bzp-files-table td, .bzp-files-table th { vertical-align: middle; padding: .75rem 1rem; } .bzp-file-icon { width: 32px; text-align: center; color: var(--bzp-text-muted); } .bzp-file-icon .fa-file-image, .bzp-file-icon .fa-image { color: #ea4335; } .bzp-file-icon .fa-file-pdf { color: #ea4335; } .bzp-file-icon .fa-file-word { color: #4285f4; } .bzp-file-icon .fa-file-excel, .bzp-file-icon .fa-file-csv { color: #34a853; } .bzp-file-icon .fa-file-powerpoint { color: #fbbc04; } .bzp-file-icon .fa-file-archive, .bzp-file-icon .fa-file-zipper { color: #ff6d00; } .bzp-file-icon .fa-file-code { color: #9c27b0; } .bzp-file-icon .fa-file-video { color: #00bcd4; } .bzp-file-icon .fa-file-audio { color: #e91e63; } .bzp-file-link { color: var(--bzp-text); text-decoration: none; font-weight: 500; } .bzp-file-link:hover { color: var(--bzp-accent); text-decoration: underline; } /* ============================================================ File Cards — Mobile ============================================================ */ .bzp-file-cards { display: flex; flex-direction: column; gap: .5rem; } .bzp-file-card { display: flex; align-items: center; gap: .75rem; background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 12px; padding: .75rem 1rem; box-shadow: var(--bzp-shadow-sm); transition: background-color .15s, box-shadow .15s; } .bzp-file-card:hover { background-color: var(--bzp-surface-hover); box-shadow: var(--bzp-shadow-md); } .bzp-file-card-icon { font-size: 1.6rem; width: 36px; text-align: center; flex-shrink: 0; } /* herda cores do .bzp-file-icon */ .bzp-file-card-icon .fa-file-image, .bzp-file-card-icon .fa-image { color: #ea4335; } .bzp-file-card-icon .fa-file-pdf { color: #ea4335; } .bzp-file-card-icon .fa-file-word { color: #4285f4; } .bzp-file-card-icon .fa-file-excel, .bzp-file-card-icon .fa-file-csv { color: #34a853; } .bzp-file-card-icon .fa-file-powerpoint { color: #fbbc04; } .bzp-file-card-icon .fa-file-archive, .bzp-file-card-icon .fa-file-zipper { color: #ff6d00; } .bzp-file-card-icon .fa-file-code { color: #9c27b0; } .bzp-file-card-icon .fa-file-video { color: #00bcd4; } .bzp-file-card-icon .fa-file-audio { color: #e91e63; } .bzp-file-card-icon .fa-file { color: var(--bzp-text-muted); } .bzp-file-card-info { flex: 1; min-width: 0; } .bzp-file-card-info .bzp-file-link { font-size: .9rem; } .bzp-file-card-info small { display: block; font-size: .75rem; margin-top: .1rem; } .bzp-file-card-actions { display: flex; gap: .3rem; flex-shrink: 0; } .bzp-file-action-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bzp-border); background: none; color: var(--bzp-text-muted); display: flex; align-items: center; justify-content: center; font-size: .85rem; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; text-decoration: none; flex-shrink: 0; } .bzp-file-action-btn:hover { background-color: var(--bzp-accent-soft); color: var(--bzp-accent); border-color: var(--bzp-accent); } .bzp-file-action-btn.bzp-file-action-danger:hover { background-color: color-mix(in srgb, var(--bzp-danger) 12%, transparent); color: var(--bzp-danger); border-color: var(--bzp-danger); } /* ============================================================ Estado vazio ============================================================ */ .bzp-empty-state { text-align: center; padding: 4rem 2rem; color: var(--bzp-text-muted); } .bzp-empty-state .bzp-empty-icon { font-size: 4rem; opacity: .35; margin-bottom: 1rem; color: var(--bzp-text-muted); } .bzp-empty-state h4 { font-size: 1.15rem; font-weight: 600; color: var(--bzp-text-muted); margin-bottom: .5rem; } .bzp-empty-state p { font-size: .9rem; } /* ============================================================ Seção de títulos (Pastas / Arquivos) ============================================================ */ .bzp-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bzp-text-muted); margin-bottom: .85rem; margin-top: .5rem; display: flex; align-items: center; gap: .5rem; } /* ============================================================ Páginas de Auth (Login / Registro) ============================================================ */ .bzp-auth-wrapper { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; } .bzp-auth-card { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 16px; box-shadow: var(--bzp-shadow-md); padding: 2.5rem 2rem; width: 100%; max-width: 420px; } .bzp-auth-logo { color: var(--bzp-accent); font-size: 2.5rem; } .bzp-auth-card h3 { font-weight: 700; color: var(--bzp-text); } .bzp-auth-card .text-muted { color: var(--bzp-text-muted) !important; } /* ============================================================ Footer ============================================================ */ .bzp-footer { background-color: var(--bzp-surface); border-top: 1px solid var(--bzp-border); color: var(--bzp-text-muted); padding: 1rem 0; font-size: .82rem; text-align: center; margin-top: auto; transition: background-color .25s; } /* ============================================================ Upload drag-and-drop zone ============================================================ */ .bzp-drop-zone { border: 2px dashed var(--bzp-border); border-radius: 12px; padding: 2rem; text-align: center; color: var(--bzp-text-muted); background: var(--bzp-surface-hover); cursor: pointer; transition: border-color .2s, background-color .2s; } .bzp-drop-zone:hover, .bzp-drop-zone.drag-over { border-color: var(--bzp-accent); background-color: var(--bzp-accent-soft); color: var(--bzp-accent); } /* ============================================================ Utilitários ============================================================ */ .text-accent { color: var(--bzp-accent) !important; } .bg-surface { background-color: var(--bzp-surface) !important; } .text-bzp { color: var(--bzp-text) !important; } .text-bzp-muted { color: var(--bzp-text-muted) !important; } .rounded-xl { border-radius: 12px !important; } .rounded-2xl { border-radius: 16px !important; } /* Links genéricos */ a { color: var(--bzp-accent); } a:hover { color: var(--bzp-accent-hover); } /* hr */ hr { border-color: var(--bzp-border); opacity: 1; } /* Floating form labels (compat) */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bzp-text-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Badges */ .badge { font-weight: 600; letter-spacing: .02em; } .badge.bg-secondary { background-color: var(--bzp-surface-hover) !important; color: var(--bzp-text-muted) !important; border: 1px solid var(--bzp-border); } .badge.bg-success { background-color: color-mix(in srgb, var(--bzp-success) 18%, transparent) !important; color: var(--bzp-success) !important; border: 1px solid color-mix(in srgb, var(--bzp-success) 30%, transparent); } .badge.bg-danger { background-color: color-mix(in srgb, var(--bzp-danger) 18%, transparent) !important; color: var(--bzp-danger) !important; border: 1px solid color-mix(in srgb, var(--bzp-danger) 30%, transparent); } .badge.bg-warning { background-color: color-mix(in srgb, var(--bzp-folder-icon) 18%, transparent) !important; color: var(--bzp-folder-icon) !important; border: 1px solid color-mix(in srgb, var(--bzp-folder-icon) 30%, transparent); } .badge.bg-warning.text-dark { color: var(--bzp-text) !important; } .badge.bg-info { background-color: color-mix(in srgb, var(--bzp-accent) 18%, transparent) !important; color: var(--bzp-accent) !important; border: 1px solid color-mix(in srgb, var(--bzp-accent) 30%, transparent); } .badge.bg-primary { background-color: var(--bzp-accent) !important; color: var(--bzp-text-on-accent) !important; border: none; } /* Progress bar */ .progress { background-color: var(--bzp-surface-hover); border-radius: 8px; border: 1px solid var(--bzp-border); } .progress-bar { background-color: var(--bzp-accent); } /* Nav tabs */ .nav-tabs { border-bottom: 2px solid var(--bzp-border); gap: .25rem; } .nav-tabs .nav-link { color: var(--bzp-text-muted); border: 1px solid transparent; border-radius: 8px 8px 0 0; padding: .45rem .9rem; font-weight: 500; transition: background-color .15s, color .15s; } .nav-tabs .nav-link:hover { background-color: var(--bzp-surface-hover); color: var(--bzp-text); border-color: var(--bzp-border) var(--bzp-border) transparent; } .nav-tabs .nav-link.active { background-color: var(--bzp-surface); color: var(--bzp-accent); border-color: var(--bzp-border) var(--bzp-border) var(--bzp-surface); font-weight: 600; } /* Pagination */ .pagination { gap: .25rem; } .page-link { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); color: var(--bzp-text); border-radius: 8px !important; padding: .35rem .7rem; transition: background-color .15s, color .15s; } .page-link:hover { background-color: var(--bzp-surface-hover); border-color: var(--bzp-border); color: var(--bzp-accent); } .page-item.active .page-link { background-color: var(--bzp-accent); border-color: var(--bzp-accent); color: var(--bzp-text-on-accent); } .page-item.disabled .page-link { background-color: var(--bzp-surface); border-color: var(--bzp-border); color: var(--bzp-text-muted); opacity: .5; } /* Table row muted (inactive users, etc.) */ .table-secondary { --bs-table-bg: color-mix(in srgb, var(--bzp-surface-hover) 60%, transparent) !important; --bs-table-color: var(--bzp-text-muted) !important; } /* Form check */ .form-check-input { background-color: var(--bzp-surface); border-color: var(--bzp-border); } .form-check-input:checked { background-color: var(--bzp-accent); border-color: var(--bzp-accent); } .form-check-label { color: var(--bzp-text); } /* Form text / help text */ .form-text { color: var(--bzp-text-muted); } /* form-label */ .form-label { color: var(--bzp-text); font-weight: 500; } /* btn-close override */ .btn-close { filter: none; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ============================================================ SweetAlert2 — BZP Theme ============================================================ */ .swal2-popup { background: var(--bzp-surface) !important; color: var(--bzp-text) !important; border: 1px solid var(--bzp-border) !important; border-radius: 16px !important; box-shadow: var(--bzp-shadow-md) !important; } .swal2-title { color: var(--bzp-text) !important; } .swal2-html-container { color: var(--bzp-text-muted) !important; } .swal2-confirm { background-color: var(--bzp-accent) !important; color: var(--bzp-text-on-accent) !important; border-radius: 8px !important; font-weight: 600 !important; border: none !important; } .swal2-confirm:hover { background-color: var(--bzp-accent-hover) !important; } .swal2-cancel { background-color: var(--bzp-surface-hover) !important; color: var(--bzp-text) !important; border: 1px solid var(--bzp-border) !important; border-radius: 8px !important; font-weight: 500 !important; } .swal2-cancel:hover { background-color: var(--bzp-border) !important; } .swal2-deny { background-color: color-mix(in srgb, var(--bzp-danger) 15%, transparent) !important; color: var(--bzp-danger) !important; border: 1px solid var(--bzp-danger) !important; border-radius: 8px !important; font-weight: 600 !important; } .swal2-input, .swal2-textarea, .swal2-select { background-color: var(--bzp-surface) !important; border: 1px solid var(--bzp-border) !important; color: var(--bzp-text) !important; border-radius: 8px !important; } .swal2-input:focus, .swal2-textarea:focus { border-color: var(--bzp-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bzp-accent) 20%, transparent) !important; } .swal2-input-label { color: var(--bzp-text-muted) !important; } .swal2-validation-message { background: color-mix(in srgb, var(--bzp-danger) 12%, transparent) !important; color: var(--bzp-danger) !important; } .swal2-icon.swal2-warning { border-color: var(--bzp-folder-icon) !important; color: var(--bzp-folder-icon) !important; } .swal2-icon.swal2-error { border-color: var(--bzp-danger) !important; color: var(--bzp-danger) !important; } .swal2-icon.swal2-success { border-color: var(--bzp-success) !important; color: var(--bzp-success) !important; } .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--bzp-success) !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--bzp-success) 30%, transparent) !important; } .swal2-icon.swal2-info { border-color: var(--bzp-accent) !important; color: var(--bzp-accent) !important; } .swal2-icon.swal2-question { border-color: var(--bzp-accent) !important; color: var(--bzp-accent) !important; } /* ============================================================ BZP Card (custom card layout used in account/admin pages) ============================================================ */ .bzp-card { background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 14px; box-shadow: var(--bzp-shadow-sm); color: var(--bzp-text); overflow: hidden; } .bzp-card-header { background-color: var(--bzp-surface-hover); border-bottom: 1px solid var(--bzp-border); padding: .85rem 1.25rem; font-weight: 600; color: var(--bzp-text); display: flex; align-items: center; gap: .5rem; } .bzp-card-body { padding: 1.5rem 1.25rem; } /* Btn-group gaps */ .btn-group > .btn { border-color: var(--bzp-border); } /* ============================================================ Drive Layout: sidebar-tree + main ============================================================ */ .bzp-drive-layout { display: flex; gap: 0; min-height: calc(100vh - 120px); } /* ── Tree Sidebar ─────────────────────────────────────────── */ .bzp-tree-sidebar { width: 230px; flex-shrink: 0; border-right: 1px solid var(--bzp-border); background-color: var(--bzp-sidebar-bg); transition: background-color .25s; } .bzp-tree-sidebar-inner { padding: 1rem .75rem; position: sticky; top: 0; max-height: calc(100vh - 70px); overflow-y: auto; } /* Quota chart */ .bzp-quota-chart-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto .5rem; } .bzp-quota-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .bzp-quota-used { font-size: .82rem; font-weight: 700; color: var(--bzp-text); line-height: 1.1; } .bzp-quota-label { font-size: .65rem; color: var(--bzp-text-muted); line-height: 1.1; } .bzp-quota-bar-label { text-align: center; margin-bottom: .25rem; } /* Tree root link */ .bzp-tree-root { display: flex; align-items: center; gap: .4rem; padding: .38rem .6rem; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--bzp-text); text-decoration: none; transition: background-color .15s, color .15s; } .bzp-tree-root:hover, .bzp-tree-root.active { background-color: var(--bzp-accent-soft); color: var(--bzp-accent); } /* Tree list */ .bzp-folder-tree .bzp-tree-list { list-style: none; margin: 0; padding: 0; padding-left: calc(var(--depth, 0) * 12px); } .bzp-folder-tree .bzp-tree-node { display: flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 7px; font-size: .83rem; color: var(--bzp-text-muted); text-decoration: none; white-space: nowrap; overflow: hidden; transition: background-color .12s, color .12s; } .bzp-folder-tree .bzp-tree-node:hover { background-color: var(--bzp-surface-hover); color: var(--bzp-text); } .bzp-folder-tree .bzp-tree-node.active { background-color: var(--bzp-accent-soft); color: var(--bzp-accent); font-weight: 600; } .bzp-folder-tree .bzp-tree-icon { font-size: .8rem; color: var(--bzp-folder-icon); flex-shrink: 0; } .bzp-folder-tree .bzp-tree-label { overflow: hidden; text-overflow: ellipsis; } /* ── Drive Main ───────────────────────────────────────────── */ .bzp-drive-main { flex: 1; padding: 1.25rem 1.5rem; min-width: 0; } /* ── FAB (Floating Action Button) ─────────────────────────── */ .bzp-fab-group { position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 0; z-index: 1050; } .bzp-fab-main { width: 56px; height: 56px; border-radius: 50%; background-color: var(--bzp-accent); color: var(--bzp-text-on-accent); border: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--bzp-accent) 45%, transparent); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s, transform .2s, box-shadow .15s; flex-shrink: 0; margin-top: .5rem; } .bzp-fab-main:hover { background-color: var(--bzp-accent-hover); box-shadow: 0 6px 16px color-mix(in srgb, var(--bzp-accent) 55%, transparent); transform: scale(1.05); } .bzp-fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; margin-bottom: .5rem; /* hidden by default */ opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; } .bzp-fab-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Each item row: label + button */ .bzp-fab-item-row { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; } .bzp-fab-item-label { background-color: var(--bzp-surface); color: var(--bzp-text); border: 1px solid var(--bzp-border); border-radius: 6px; padding: .22rem .65rem; font-size: .8rem; white-space: nowrap; box-shadow: var(--bzp-shadow-sm); pointer-events: none; } .bzp-fab-item { width: 46px; height: 46px; border-radius: 50%; background-color: var(--bzp-surface); color: var(--bzp-accent); border: 1px solid var(--bzp-border); box-shadow: var(--bzp-shadow-md); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s, transform .15s; flex-shrink: 0; } .bzp-fab-item:hover { background-color: var(--bzp-accent-soft); transform: scale(1.08); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 767px) { .bzp-tree-sidebar { display: none; } .bzp-drive-main { padding: 1rem .75rem; } } /* ── Navbar mobile ─────────────────────────────────────────── */ @media (max-width: 991px) { .bzp-search .form-control { width: 100%; } .bzp-search .form-control:focus { width: 100%; } .bzp-search { width: 100%; margin-bottom: .5rem; } /* Ajuste do container de ações do usuário no mobile */ .bzp-navbar .navbar-collapse .d-flex { flex-direction: column; width: 100%; align-items: stretch !important; padding: .5rem 0; } /* Botão de tema no mobile */ .bzp-navbar .bzp-theme-btn { width: 100%; border-radius: 8px; height: 42px; justify-content: flex-start; padding: 0 1rem; margin-bottom: .5rem; } .bzp-navbar .bzp-theme-btn i { margin-right: .5rem; } /* Botão do usuário no mobile */ .bzp-navbar .bzp-user-btn { width: 100%; border-radius: 8px; justify-content: flex-start; padding: .6rem 1rem; } /* Dropdown do usuário no mobile */ .bzp-navbar .dropdown { width: 100%; } .bzp-navbar .dropdown-menu { width: 100%; position: static !important; transform: none !important; margin-top: .5rem; box-shadow: none; border: none; background-color: transparent; padding: 0; } /* Itens do dropdown no mobile */ .bzp-navbar .dropdown-menu .dropdown-item { background-color: var(--bzp-surface-hover); border: 1px solid var(--bzp-border); margin-bottom: .35rem; border-radius: 8px; padding: .65rem 1rem; font-size: .92rem; } .bzp-navbar .dropdown-menu .dropdown-item:hover { background-color: var(--bzp-surface); transform: translateX(4px); } .bzp-navbar .dropdown-menu .dropdown-header { background-color: transparent; padding: .5rem 1rem; margin-bottom: .25rem; } .bzp-navbar .dropdown-menu .dropdown-divider { margin: .5rem 0; opacity: 0.3; } /* Menu de navegação principal no mobile */ .bzp-navbar .navbar-nav.me-auto { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--bzp-border); } .bzp-navbar .navbar-nav.me-auto .nav-link { padding: .65rem 1rem; margin-bottom: .25rem; border-radius: 8px; } } /* ============================================================ Share Cards — Mobile (Shared.cshtml) ============================================================ */ .bzp-share-cards { display: flex; flex-direction: column; gap: .5rem; } .bzp-share-card { display: flex; align-items: flex-start; gap: .75rem; background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 12px; padding: .75rem 1rem; box-shadow: var(--bzp-shadow-sm); transition: background-color .15s, box-shadow .15s; } .bzp-share-card:hover { background-color: var(--bzp-surface-hover); box-shadow: var(--bzp-shadow-md); } .bzp-share-card-icon { font-size: 1.5rem; width: 36px; text-align: center; flex-shrink: 0; color: var(--bzp-text-muted); padding-top: .1rem; } .bzp-share-card-info { flex: 1; min-width: 0; } .bzp-share-card-name { display: block; font-weight: 600; font-size: .9rem; color: var(--bzp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ Admin User Cards — Mobile (Admin/Index.cshtml) ============================================================ */ .bzp-admin-cards { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; } .bzp-admin-card { display: flex; align-items: flex-start; gap: .75rem; background-color: var(--bzp-surface); border: 1px solid var(--bzp-border); border-radius: 12px; padding: .75rem 1rem; box-shadow: var(--bzp-shadow-sm); transition: background-color .15s; } .bzp-admin-card--inactive { opacity: .7; } .bzp-admin-card-avatar { font-size: 2rem; color: var(--bzp-text-muted); flex-shrink: 0; line-height: 1; } .bzp-admin-card-info { flex: 1; min-width: 0; } .bzp-admin-card-name { font-weight: 600; font-size: .92rem; color: var(--bzp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bzp-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bzp-tabs-scroll::-webkit-scrollbar { display: none; } .bzp-tabs-scroll .nav-tabs { flex-wrap: nowrap; min-width: max-content; }