:root { --azul-escuro: 10, 38, 71; --azul-claro: 166, 193, 224; --ui-text-primary: rgb(var(--azul-escuro)); --ui-text-muted: rgba(10, 38, 71, 0.78); --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-6: 24px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-input-height-md: 46px; --ui-button-height-sm: 38px; --ui-button-height-md: 44px; --ui-button-height-lg: 48px; /* Dashboard / sidebar theme */ --dashboard-primary-900: #071230; /* deep navy for top */ --dashboard-primary-800: #0b2036; /* slightly lighter */ --dashboard-neutral-100: #e6edf7; --dashboard-neutral-300: rgba(255, 255, 255, 0.1); --dashboard-neutral-bg: rgba(255, 255, 255, 0.03); --dashboard-accent-gold: #9a6f00; /* required highlight color */ } /*https://codepen.io/stephenpaton-tech/full/JjRvGmY*/ * { scrollbar-width: auto; scrollbar-color: rgb(var(--azul-escuro)) #ffffff; } *::-webkit-scrollbar { width: 16px; } *::-webkit-scrollbar-track { background: #ffffff; } *::-webkit-scrollbar-thumb { background-color: rgb(var(--azul-escuro)); border-radius: 10px; border: 3px solid #ffffff; } /*-----*/ /* Acessibilidade: classes aplicadas no */ body.accessibility-grayscale, html.accessibility-grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } body.accessibility-contrast, html.accessibility-contrast { filter: invert(100%); -webkit-filter: invert(100%); } /* legado para compatibilidade */ html.contraste { filter: invert(100%); -webkit-filter: invert(100%); } html.monotom { filter: grayscale(100%); -webkit-filter: grayscale(100%); } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { appearance: textfield; -moz-appearance: textfield; } .fa-solid, .fa-regular { min-width: 18px; text-align: center; } .bg-gradient-dark { background-color: rgb(var(--azul-escuro)); background-image: none; } .bg-image { background-image: none; } .bg-glass, .modal-backdrop { background: rgba(var(--azul-escuro), 0.6); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .topbar { height: 4rem; } .modal-backdrop.show { opacity: 1; } .card, .modal-content, .nav-tabs .nav-link { transition: all 0.2s ease; } .card-header.bg-gradient-dark { color: white; border-bottom-color: transparent; border-radius: 20px 20px 0 0; background-color: #0A2647; } .btn-lg, .btn-group-lg > .btn { padding: 0.763rem 1rem; font-size: inherit; border-radius: 999px; transition: all 0.2s ease; } .btn-primary { color: #ffffff; background-color: #9a6f00; border-color: #9a6f00; border-radius: 999px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .btn-link { color: #9a6f00; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #ffffff; background-color: #0f2d4a; border-color: #0f2d4a; } .btn-outline-primary { color: #0f2d4a; border-color: #0f2d4a; border-radius: 999px; transition: all 0.2s ease; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #ffffff; background-color: #0f2d4a; border-color: #0f2d4a; } /* Subtotal apenas nos cards de produto */ .card .h5.font-weight-bold .currency-symbol { color: var(--dashboard-accent-gold); font-weight: 600; } .card .h5.font-weight-bold .item-subtotal { color: var(--dashboard-accent-gold); font-weight: 800; font-size: 1.1rem; } .form-control:disabled, .form-control[readonly] { background-color: #f6f6f6; } .select2-container { width: 100% !important; } /* =============================== SELECT2 - CORRIGIR TEXTO CLARO =============================== */ /* Cor normal das opções */ .select2-container--default .select2-results__option { color: #1f2937 !important; /* texto escuro */ opacity: 1 !important; font-weight: 500; } /* Quando passa o mouse */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #3b82f6 !important; /* azul */ color: #ffffff !important; } /* Dropdown fundo branco */ .select2-container--default .select2-dropdown { background-color: #ffffff !important; border-radius: 12px; border: 1px solid #d1d3e2; } /* Remove qualquer opacidade herdada */ .select2-results__options { opacity: 1 !important; } /* ===== form-floating + select2: evita texto sobreposto ===== */ /* 1) garante altura correta e centraliza o texto renderizado */ .form-floating .select2-container--default .select2-selection--single { padding-top: 1.6rem; /* espaço pro label */ padding-bottom: 0.6rem; min-height: 58px; /* mesmo do floating */ height: 58px; } /* 2) o texto do select2 precisa descer (senão encosta no label) */ .form-floating .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0.75rem; padding-right: 2.2rem; /* espaço da seta */ line-height: 1.2; margin-top: 0.35rem; /* <<< empurra pra baixo */ } /* 3) seta centralizada */ .form-floating .select2-container--default .select2-selection--single .select2-selection__arrow { height: 58px; top: 0; right: 0.75rem; } /* 4) label do form-floating não pode ficar “dentro” do texto */ .form-floating > label { padding: 0.75rem 0.75rem; transform-origin: 0 0; z-index: 2; } /* 5) quando tem select2, força o label a ficar no estado “flutuando” */ .form-floating:has(.select2-container) > label { transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); opacity: 0.8; } select.form-control { height: 58px; border-radius: 12px; } .form-text { min-height: 24px; } .dropdown-item.active, .dropdown-item:active { background-color: #f6f7f9; color: #111827; } table.dataTable span.highlight { background-color: #ffff88; border-radius: 0.28571429rem; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(166, 193, 224, 0.0002); } .table thead th { vertical-align: top; background-color: #f8f9fa; border-bottom: 1px solid #e7ebf0; font-weight: 600; } .table-hover tbody tr:hover { background-color: #fcfcfd; } table.dataTable thead > tr > th.sorting::before { top: 7px; } body { background-color: #0b1628; /*color: #e6edf7;*/ } .app-shell { min-height: 100vh; background-color: #0b1628; } .app-sidebar { width: 96px; background-color: #0b1524; border-right: 1px solid rgba(255, 255, 255, 0.06); padding: 24px 18px; overflow-x: hidden; overflow-y: hidden; display: flex; flex-direction: column; height: 100vh; transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), flex-basis 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); flex: 0 0 96px; } .app-sidebar { --sidebar-accent-gold: #c6a54a; } .app-sidebar:hover { flex-basis: 260px; width: 260px; } .app-sidebar .sidebar-brand { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px 20px; color: #f5f7fb; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.75rem; flex-shrink: 0; } /* Botão cancelar específico do modal */ .btn-cancel-modal { color: #e74c3c; border-color: #e74c3c; background-color: transparent; font-weight: 500; transition: all 0.2s ease; } .btn-cancel-modal:hover { background-color: #e74c3c; border-color: #e74c3c; color: #ffffff; } .app-sidebar .sidebar-brand img { width: auto; height: 48px; /* aumentado de 34px */ max-width: 100%; /* remove limitação rígida de 168px */ object-fit: contain; border-radius: 0; background-color: transparent; padding: 0; transition: height 0.25s ease; /* animação suave */ } .sidebar-account-type { margin: 0 12px 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(154, 111, 0, 0.28); background: rgba(154, 111, 0, 0.12); color: #f5e5bf; font-size: 0.78rem; font-weight: 600; } .sidebar-section { color: #9a6f00; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 16px 12px 10px; align-self: center; flex-shrink: 0; } .sidebar-nav-home { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sidebar-section.sidebar-section-area { color: rgba(230, 237, 247, 0.45); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; margin: 14px 12px 8px; align-self: stretch; } .sidebar-area-card { margin: 14px 8px; padding: 10px 8px 12px; border-radius: 28px; border: 2px solid rgba(198, 165, 74, 0.35); background: rgba(255, 255, 255, 0.03); } .sidebar-section.sidebar-section-area.sidebar-section-area-gold { color: var(--sidebar-accent-gold); } /* Minha Área: centraliza no compacto, expande no hover */ .app-shell-compact-menu .sidebar-area-card { width: 72px; /* cabe dentro do sidebar 96px */ margin-left: auto; margin-right: auto; padding-left: 6px; padding-right: 6px; } .app-shell-compact-menu .sidebar-area-card .sidebar-nav { justify-items: center; } .app-shell-compact-menu .sidebar-area-card .sidebar-item { width: 100%; } .app-shell-compact-menu .app-sidebar:hover .sidebar-area-card { width: auto; margin-left: 8px; margin-right: 8px; padding-left: 8px; padding-right: 8px; } .app-shell-compact-menu .app-sidebar:hover .sidebar-area-card .sidebar-nav { justify-items: stretch; } .sidebar-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .app-sidebar nav { flex: 1 1 0; overflow-y: hidden; min-height: 0; overflow-x: hidden; } .app-sidebar:hover nav { overflow-y: auto; /* Firefox */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } /* Chrome / Edge / Safari */ .app-sidebar:hover nav::-webkit-scrollbar { width: 5px; } .app-sidebar:hover nav::-webkit-scrollbar-track { background: transparent; } .app-sidebar:hover nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .app-sidebar:hover nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 24px; color: rgba(230, 237, 247, 0.82); transition: width 0.35s ease, flex-basis 0.35s ease; font-weight: 600; min-height: 44px; } /* "Início" destacado: mantém 1º e com aparência diferente */ .sidebar-item.sidebar-item-home { border: 2px solid rgba(198, 165, 74, 0.9); background: rgba(0, 0, 0, 0.10); color: var(--sidebar-accent-gold); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); } .sidebar-home-arrow { margin-left: auto; font-size: 0.72rem; opacity: 0.6; color: rgba(230, 237, 247, 0.75); transition: transform 0.2s ease, opacity 0.2s ease; } .sidebar-item.sidebar-item-home:hover .sidebar-home-arrow { transform: translateX(2px); opacity: 0.9; } .sidebar-item-label { white-space: nowrap; opacity: 0; visibility: hidden; display: none; } /* aberto no hover: aparece */ .app-sidebar:hover .sidebar-item-label { opacity: 1; visibility: visible; display: inline-block; } /* fechado centraliza ícones, aberto alinha à esquerda */ .app-sidebar .sidebar-item { justify-content: center; } .app-sidebar:hover .sidebar-item { justify-content: flex-start; } .app-shell-compact-menu .app-sidebar .dashboard-v2-sidebar-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 6px; } /* esconde textos no compacto */ .app-shell-compact-menu .app-sidebar .dashboard-v2-sidebar-footer > div { display: none; } .app-shell-compact-menu .app-sidebar:hover .dashboard-v2-sidebar-footer { flex-direction: row; justify-content: flex-start; padding: 16px 10px; } .app-shell-compact-menu .app-sidebar:hover .dashboard-v2-sidebar-footer > div { display: block; } .app-shell-compact-menu .app-sidebar .sidebar-footer-logout { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.2rem; margin-right: 10px; } .sidebar-item i { width: 18px; text-align: center; color: rgba(230, 237, 247, 0.6); } .sidebar-item:hover { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; text-decoration: none; } .sidebar-item:hover i { color: rgba(255, 255, 255, 0.9); } .sidebar-item.active { background-color: rgba(198, 165, 74, 0.12); color: var(--sidebar-accent-gold); text-decoration: none; } .sidebar-item.active i { color: var(--sidebar-accent-gold); } .sidebar-item.sidebar-item-home i { color: var(--sidebar-accent-gold); } .app-shell-compact-menu .app-sidebar { width: 96px; padding: 16px 10px; } .app-shell-compact-menu .app-sidebar { flex: 0 0 96px; } .app-shell-compact-menu .app-sidebar:hover { flex-basis: 260px; width: 260px; } .app-shell-compact-menu .app-sidebar:hover { flex: 0 0 260px; } .app-shell-compact-menu .app-sidebar .sidebar-brand { justify-content: center; padding: 8px 0 14px; } .app-shell-compact-menu .app-sidebar .sidebar-brand img { width: 80px; height: 80px; } .app-shell-compact-menu .app-sidebar:hover .sidebar-brand img { width: 120px; height: 120px; } .app-shell-compact-menu .sidebar-account-type, .app-shell-compact-menu .sidebar-section, .app-shell-compact-menu .sidebar-item-label { display: none; } .app-shell-compact-menu .app-sidebar:hover .sidebar-account-type, .app-shell-compact-menu .app-sidebar:hover .sidebar-section, .app-shell-compact-menu .app-sidebar:hover .sidebar-item-label { display: block; } .app-shell-compact-menu .app-sidebar:hover .sidebar-item-label { display: inline-block; } .app-shell-compact-menu .app-sidebar:hover .sidebar-item { justify-content: flex-start; gap: 12px; padding: 10px 12px; } .app-shell-compact-menu .app-sidebar:hover .sidebar-home-arrow { display: inline-flex; } /* fechado: some */ .app-sidebar:hover .sidebar-item-label { opacity: 1; visibility: visible; display: inline-block; } .app-shell-compact-menu .sidebar-nav { gap: 8px; margin-bottom: 5px; } .app-shell-compact-menu .sidebar-item { justify-content: center; gap: 0; width: 100%; padding: 10px 0; border-radius: 12px; position: relative; } .app-shell-compact-menu .sidebar-home-arrow { display: none; } .app-shell-compact-menu .sidebar-item i { width: 22px; font-size: 1rem; } .app-shell-compact-menu .sidebar-item::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background-color: #101f36; color: #e6edf7; border: 1px solid rgba(154, 111, 0, 0.35); border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 30; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .app-shell-compact-menu .sidebar-item:hover::after, .app-shell-compact-menu .sidebar-item:focus-visible::after { opacity: 1; visibility: visible; } .app-content { flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background-color: #0b1628; position: sticky; top: 0; z-index: 5; } /* topbar vira referência */ .app-topbar { position: relative; display: flex; align-items: center; } /* BOTÃO MENU */ .mobile-menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #fff; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .topbar-search { display: flex; align-items: center; gap: 10px; background-color: #101f36; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 12px; min-width: 320px; color: rgba(230, 237, 247, 0.6); } .topbar-search input { background: transparent; border: none; color: #e6edf7; width: 100%; font-size: 0.9rem; } .topbar-search input:focus { outline: none; } .topbar-actions { display: flex; align-items: center; gap: 14px; } .accessibility-actions { display: flex; align-items: center; gap: 8px; } .icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #101f36; color: #d5deee; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: all 0.2s ease; } .icon-button:hover { border-color: rgba(154, 111, 0, 0.45); color: #9a6f00; transform: translateY(-1px); } .icon-button-font { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1; } .icon-button-font .fa-solid { line-height: 1; display: block; } .text-mini { font-size: 0.55rem; line-height: 1; } .profile-chip { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #101f36; color: #e6edf7; text-decoration: none; } .profile-chip i { color: #9a6f00; } .profile-chip .avatar { width: 36px; height: 36px; border-radius: 10px; background-color: #1a2a45; display: flex; align-items: center; justify-content: center; font-weight: 600; } .profile-chip .profile-meta { display: flex; flex-direction: column; line-height: 1.2; } .profile-chip .profile-name { font-weight: 600; font-size: 0.9rem; } .profile-chip .profile-role { font-size: 0.75rem; color: rgba(230, 237, 247, 0.6); } /* ----- Profile Edit Page ----- */ .profile-edit-page .profile-page-title { color: var(--dashboard-neutral-900, #111827); font-weight: 600; } .profile-edit-page .profile-tabs .nav-link { color: #4b5563; font-weight: 500; } .profile-edit-page .profile-tabs .nav-link.active { color: var(--dashboard-accent-gold); border-bottom-color: var(--dashboard-accent-gold); } .profile-edit-page .profile-card-body { padding: 1.5rem 1.75rem; } .profile-edit-page .profile-form-row { gap: 1.5rem 0; } .profile-edit-page .profile-photo-col { margin-bottom: 1rem; } @media (min-width: 992px) { .profile-edit-page .profile-photo-col { margin-bottom: 0; } } .profile-edit-page .profile-photo-card { background: rgba(246, 247, 249, 0.8); border-radius: 14px; padding: 1.25rem; border: 1px solid rgba(0, 0, 0, 0.06); } .profile-edit-page .profile-photo-label { font-weight: 600; color: #374151; margin-bottom: 0.75rem; font-size: 0.9rem; } .profile-edit-page .profile-photo-preview { width: 120px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #e5e7eb; } .profile-edit-page .profile-photo-preview .profile-photo-img, .profile-edit-page .profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .profile-edit-page .profile-photo-fallback { width: 100%; height: 100%; font-size: 2.5rem; font-weight: 700; color: #6b7280; } .profile-edit-page .profile-photo-hint { display: block; margin-top: 0.5rem; color: #6b7280; font-size: 0.8rem; } .profile-edit-page .profile-section { margin-bottom: 1.75rem; } .profile-edit-page .profile-section-readonly { padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .profile-edit-page .profile-section-title { font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0; } .profile-edit-page .profile-form-row .form-floating { margin-bottom: 8px; } .profile-edit-page .profile-form-row .form-control, .profile-edit-page .profile-form-row .form-select { min-height: 50px; } .profile-edit-page .profile-form-row .form-label, .profile-edit-page .profile-form-row label { color: #374151; } .profile-edit-page .profile-form-actions { margin-top: 1.5rem; padding-top: 1rem; } .profile-edit-page .btn-profile-save { min-width: 160px; font-weight: 600; } .dashboard-content { padding: 28px 32px 40px; color: #0b1628; } .dashboard-content .card, .dashboard-content .card-header, .dashboard-content .card-body, .dashboard-content .table, .dashboard-content .table th, .dashboard-content .table td { color: var(--ui-text-primary); border-radius: 10px; } .dashboard-content .text-muted, .dashboard-content p.text-muted, .dashboard-content small.text-muted { color: var(--ui-text-muted) !important; } .dashboard-content .form-control, .dashboard-content .form-select, .dashboard-content select.form-control, .dashboard-content .select2-container--default .select2-selection--single { min-height: var(--ui-input-height-md); border-radius: var(--ui-radius-md); } .dashboard-content .btn { min-height: var(--ui-button-height-md); } .dashboard-content .btn-sm { min-height: var(--ui-button-height-sm); } .dashboard-content .btn-lg { min-height: var(--ui-button-height-lg); } .dashboard-content .card-body { padding: var(--ui-space-4); } .dashboard-content > .container-fluid > .row + .row { margin-top: var(--ui-space-4); } .dashboard-header h1 { font-size: 1.6rem; font-weight: 600; color: #f2f5fb; } .dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .dashboard-header p { color: rgba(230, 237, 247, 0.65); margin-top: 6px; } .dashboard-filter { min-width: 260px; max-width: 340px; width: 100%; display: grid; gap: 8px; } .dashboard-filter label { margin: 0; color: rgba(230, 237, 247, 0.82); font-weight: 600; font-size: 0.82rem; } .dashboard-filter .form-control { background-color: #101f36; border: 1px solid rgba(154, 111, 0, 0.35); color: #e6edf7; border-radius: 12px; min-height: 46px; transition: all 0.2s ease; } .dashboard-filter .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(154, 111, 0, 0.2); border-color: rgba(154, 111, 0, 0.7); } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; } .metric-card { background-color: #101f36; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 18px; display: flex; justify-content: space-between; gap: 12px; } .metric-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(230, 237, 247, 0.6); } .metric-value { font-size: 1.5rem; font-weight: 600; color: #f4f7ff; } .metric-delta { font-size: 0.78rem; color: #7bdcb5; } .metric-icon { width: 42px; height: 42px; border-radius: 12px; background-color: rgba(154, 111, 0, 0.18); display: flex; align-items: center; justify-content: center; color: #9a6f00; } .section-title { font-size: 1.1rem; font-weight: 600; margin: 32px 0 16px; color: #1d9c34; } .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .event-card { background-color: #101f36; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .event-card-highlight { border-color: rgba(154, 111, 0, 0.34); box-shadow: 0 0 0 1px rgba(154, 111, 0, 0.1) inset; } .event-cover { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; } .event-content { display: grid; gap: 10px; } .event-card h3 { font-size: 1rem; font-weight: 600; margin: 0; } .event-meta { display: grid; gap: 6px; color: rgba(230, 237, 247, 0.7); font-size: 0.85rem; } .event-action { align-self: flex-start; padding: 8px 14px; background-color: rgba(154, 111, 0, 0.2); border-radius: 10px; color: #f6e7c2; font-size: 0.82rem; font-weight: 600; } .overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .panel-card { background-color: #101f36; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06); padding: 18px; } .status-chart { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(#6fd8a7 0 55%, #f2c96d 55% 80%, #ef6b6b 80% 100%); display: grid; place-items: center; margin: 8px auto 16px; } .status-chart span { width: 92px; height: 92px; border-radius: 50%; background-color: #101f36; display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; } .status-legend { display: grid; gap: 8px; font-size: 0.85rem; } .status-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; } .revenue-list { display: grid; gap: 12px; } .revenue-item { display: grid; gap: 6px; font-size: 0.85rem; } .revenue-item .bar { height: 8px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.08); overflow: hidden; } .revenue-item .bar span { display: block; height: 100%; background-color: #9a6f00; } .participants-table { background-color: #101f36; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); transition: all 0.2s ease; } .participants-table table { margin: 0; color: #e6edf7; } .participants-table thead { background-color: rgba(255, 255, 255, 0.03); color: #f6e7c2; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .participants-table td, .participants-table th { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 16px 18px; vertical-align: middle; } .sticky-footer { background-color: #0b1524 !important; border-top: 1px solid rgba(255, 255, 255, 0.06); color: rgba(230, 237, 247, 0.6); } .status-pill { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .status-pill.success { background-color: rgba(111, 216, 167, 0.18); color: #7bdcb5; } .status-pill.pending { background-color: rgba(242, 201, 109, 0.18); color: #f2c96d; } .status-pill.canceled { background-color: rgba(239, 107, 107, 0.18); color: #ef6b6b; } @media (max-width: 992px) { .app-shell { flex-direction: column; } .app-sidebar { width: 100%; padding: 16px 14px; } .topbar-search { min-width: 220px; } .app-topbar { padding: 12px 14px; } .topbar-actions { width: 100%; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .profile-chip { width: 100%; min-width: 0; justify-content: flex-start; } .profile-chip .profile-meta { min-width: 0; flex: 1; } .profile-chip .profile-name, .profile-chip .profile-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-shell-compact-menu .app-sidebar { width: 100%; padding: 12px 16px; } .app-shell-compact-menu .sidebar-account-type, .app-shell-compact-menu .sidebar-section, .app-shell-compact-menu .sidebar-item-label { display: initial; } .app-shell-compact-menu .sidebar-nav { gap: 6px; } .app-shell-compact-menu .sidebar-item { justify-content: flex-start; gap: 12px; padding: 10px 12px; } .app-shell-compact-menu .sidebar-item::after { display: none; } } @media (max-width: 576px) { .app-sidebar .sidebar-brand { padding: 4px 8px 14px; } .app-sidebar .sidebar-brand img { height: 30px; max-width: 150px; } .sidebar-item { padding: 10px; gap: 10px; } .sidebar-item-label { white-space: normal; word-break: break-word; } .app-topbar { position: static; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 0; } .accessibility-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } } table.dataTable thead > tr > th.sorting::after { top: 17px; } .page-item.active .page-link { background-color: rgb(var(--azul-escuro)); border-color: rgb(var(--azul-escuro)); } .permission-list { height: 450px !important; overflow-y: scroll; } #accordionSidebar { height: 100vh; } .sidebar hr.sidebar-divider { margin: 0; } .sidebar .nav-item .nav-link i { font-size: 1.3rem; } #wrapper #content-wrapper { height: 100vh; } .logo { max-width: 100%; } .image-preview { max-height: 300px; overflow-y: scroll; } .loader-container { position: absolute; width: 100%; height: 100%; text-align: center; z-index: 999999999; } .loader { width: 48px; height: 48px; border: 3px solid rgb(var(--azul-claro)); border-radius: 50%; margin-top: calc(50vh - 24px); display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; } .loader::after { content: ""; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: #ffffff; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .bg-gradient-dark .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } :root { --dashboard-primary-900: #0e2a47; --dashboard-primary-800: #163a63; --dashboard-primary-700: #1f4e84; --dashboard-accent-gold: #c6a54a; --ui-text-primary: rgb(var(--azul-escuro)); --ui-text-muted: rgba(10, 38, 71, 0.78); --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-6: 24px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-input-height-md: 46px; --ui-button-height-sm: 38px; --ui-button-height-md: 44px; --ui-button-height-lg: 48px; --dashboard-neutral-bg: #f4f6f8; --dashboard-neutral-100: #ffffff; --dashboard-neutral-300: #e6eaf0; --dashboard-neutral-500: #9aa6b2; --dashboard-neutral-900: #1e2a36; --dashboard-success-bg: #e6f4ea; --dashboard-success-text: #2e7d32; --dashboard-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } .dashboard-v2-shell { min-height: 100vh; height: 100vh; overflow: hidden; background: var(--dashboard-primary-900); } .dashboard-v2-sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 260px; min-width: 260px; background: linear-gradient( 180deg, var(--dashboard-primary-900), var(--dashboard-primary-800) ); color: var(--dashboard-neutral-100); display: flex; flex-direction: column; padding: 28px 18px 20px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); z-index: 50; } /* Non-admin: collapsed sidebar (icons only), labels on hover via tooltip */ .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar { width: 72px; min-width: 72px; padding: 18px 12px 16px; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link-label { display: none; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link { justify-content: center; gap: 0; padding: 12px; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background-color: #101f36; color: #e6edf7; border: 1px solid rgba(154, 111, 0, 0.35); border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 30; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link:hover::after, .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link:focus-visible::after { opacity: 1; visibility: visible; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-link { position: relative; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-footer-meta { display: none; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-footer-inner:hover .dashboard-v2-footer-meta { display: block; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-footer-inner { justify-content: center; flex-wrap: nowrap; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar:hover .dashboard-v2-footer-meta { display: block; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar:hover .dashboard-v2-sidebar-footer-inner { justify-content: flex-start; } .dashboard-v2-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 18px 10px 20px; /* generous vertical spacing */ border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 18px; } .dashboard-v2-sidebar-brand img { width: 36px; height: 36px; } .dashboard-v2-sidebar-brand { justify-content: center; } .dashboard-v2-sidebar-logo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)) drop-shadow(0 8px 18px rgba(154, 111, 0, 0.18)); } .dashboard-v2-sidebar-brand span { font-weight: 700; letter-spacing: 0.04em; } .dashboard-v2-sidebar-nav { flex: 1; overflow-y: auto; } .dashboard-v2-sidebar-home { padding: 0 2px 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dashboard-v2-sidebar-home-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .dashboard-v2-sidebar-section { margin-bottom: 14px; } .dashboard-v2-sidebar-section-title { margin: 0 0 6px; padding: 6px 10px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.42); } .dashboard-v2-sidebar-section-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .dashboard-v2-sidebar-homebtn { border: 2px solid rgba(154, 111, 0, 0.85); background: rgba(0, 0, 0, 0.06); border-left-width: 2px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); } .dashboard-v2-sidebar-homebtn:hover { background: rgba(154, 111, 0, 0.14); } .dashboard-v2-sidebar-homebtn i { color: var(--dashboard-accent-gold); } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-section-title { display: none; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-home { padding-bottom: 10px; } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-sidebar-homebtn { padding: 12px; } .dashboard-v2-sidebar-footer { position: sticky; bottom: 0; padding: 14px 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.06)); backdrop-filter: blur(4px); } .dashboard-v2-sidebar-footer-inner { display: flex; align-items: center; gap: 10px; } .dashboard-v2-footer-avatar img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; } .avatar-fallback { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.03); color: #e6edf7; font-weight: 700; } .dashboard-v2-footer-meta strong { display: block; } .dashboard-v2-footer-meta span { display: block; opacity: 0.9; } .dashboard-v2-footer-meta span.profile-type-gold, .dashboard-v2-sidebar-footer .profile-type-gold { color: var(--dashboard-accent-gold); font-weight: 700; font-size: 0.75rem; /* menor */ letter-spacing: 0.5px; /* melhora leitura em caixa alta */ line-height: 1.1; } .dashboard-v2-footer-meta .mustard, .dashboard-v2-footer-meta small.profile-company-white, .dashboard-v2-sidebar-footer .profile-company-white { color: #fff; font-weight: 400; } .dashboard-v2-footer-logout { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: #9a6f00; } /* legacy sidebar (non-new layout) footer adjustments */ .dashboard-v2-sidebar-footer img, .sidebar-footer-link img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; } .sidebar-footer-link { display: inline-flex; align-items: center; margin-right: 10px; } .sidebar-footer-logout { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: #9a6f00; transition: color 0.2s ease, background 0.2s ease; } .sidebar-footer-logout:hover { color: #ffffff; } .sidebar-footer-logout:hover i { color: #ffffff; } .dashboard-v2-sidebar-link { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 12px 16px; /* comfortable horizontal padding */ min-height: 48px; /* required minimum height */ border-radius: 12px; border-left: 3px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-weight: 600; align-items: center; } .dashboard-v2-sidebar-link i { width: 18px; text-align: center; color: rgba(255, 255, 255, 0.78); } .dashboard-v2-sidebar-link:hover { background: rgba(255, 255, 255, 0.04); color: #ffffff; } .dashboard-v2-sidebar-link.active { background: rgba(255, 255, 255, 0.06); color: var(--dashboard-neutral-100); border-left-color: var(--dashboard-accent-gold); } .dashboard-v2-sidebar-link.active i, .dashboard-v2-sidebar-link:hover i { color: var(--dashboard-accent-gold); } .dashboard-v2-sidebar-footer { display: flex; align-items: center; gap: 12px; padding: 16px 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .dashboard-v2-sidebar-footer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.1); } .dashboard-v2-sidebar-footer strong { display: block; color: #fff; font-size: 0.85rem; /* menor que 1rem */ line-height: 1.1; font-weight: 700; } .dashboard-v2-sidebar-footer span, .dashboard-v2-sidebar-footer small { display: block; color: rgba(255, 255, 255, 0.72); line-height: 1.1; } .dashboard-v2-content-wrapper { padding: 20px 20px 20px 0; margin-left: 260px; background: linear-gradient( 180deg, var(--dashboard-primary-900), var(--dashboard-primary-800) ); } .dashboard-v2-shell.dashboard-v2-sidebar-collapsed .dashboard-v2-content-wrapper { margin-left: 72px; } .dashboard-v2-content-wrapper .sticky-footer { display: none; } .dashboard-v2-topbar { height: 74px; background: var(--dashboard-neutral-100); border-radius: 24px 24px 0 0; border: 1px solid var(--dashboard-neutral-300); padding: 12px 24px; display: grid; grid-template-columns: minmax(220px, 420px) 1fr auto; align-items: center; gap: 20px; box-shadow: var(--dashboard-shadow); } .dashboard-v2-search { width: min(420px, 100%); height: 44px; border-radius: 999px; background: var(--dashboard-neutral-bg); border: 1px solid var(--dashboard-neutral-300); display: flex; align-items: center; gap: 8px; padding: 0 14px; } .dashboard-v2-search i { color: var(--dashboard-neutral-500); } .dashboard-v2-search input { width: 100%; border: none; background: transparent; color: var(--dashboard-neutral-900); } .dashboard-v2-search input:focus { outline: none; } .dashboard-v2-topbar-actions { display: flex; align-items: center; gap: 10px; justify-self: end; } .dashboard-v2-topbar-brand { justify-self: center; display: inline-flex; align-items: center; gap: 8px; color: var(--dashboard-primary-900); text-decoration: none; font-weight: 700; letter-spacing: 0.04em; } .dashboard-v2-topbar-brand img { width: 26px; height: 26px; } .dashboard-v2-icon-button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--dashboard-neutral-300); display: inline-flex; align-items: center; justify-content: center; color: var(--dashboard-primary-700); background: #fff; } .dashboard-v2-user-button { height: 44px; border-radius: 999px; border: 1px solid var(--dashboard-neutral-300); background: #fff; padding: 0 8px 0 4px; display: flex; align-items: center; gap: 8px; } .dashboard-v2-user-button img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .dashboard-v2-content { height: calc(100vh - 74px); overflow-y: auto; background: var(--dashboard-neutral-bg); border: 1px solid var(--dashboard-neutral-300); border-top: none; border-radius: 0 0 24px 24px; padding: 24px; box-shadow: var(--dashboard-shadow); } .dashboard-v2-panel { display: grid; gap: 20px; } .dashboard-v2-greeting h1 { margin: 0; font-size: 2rem; color: var(--dashboard-neutral-900); font-weight: 700; } .dashboard-v2-greeting p { color: #9a6f00; } .dashboard-v2-section { display: grid; gap: 16px; } .dashboard-v2-section + .dashboard-v2-section { margin-top: 28px; } .dashboard-v2-section-actions + .dashboard-v2-section-actions { margin-top: 16px; } .dashboard-v2-section-head h2 { margin: 0; color: var(--dashboard-neutral-900); font-size: 1.5rem; font-weight: 700; } .dashboard-v2-events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .dashboard-v2-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: -16px; } .dashboard-v2-action-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--dashboard-neutral-100); border-radius: 18px; border: 1px solid var(--dashboard-neutral-300); box-shadow: var(--dashboard-shadow); text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; } .dashboard-v2-action-card:hover { border-color: var(--dashboard-accent-gold); box-shadow: 0 4px 16px rgba(154, 111, 0, 0.12); } .dashboard-v2-action-card-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: linear-gradient( 130deg, rgba(var(--azul-escuro), 0.12), rgba(var(--azul-escuro), 0.06) ); color: rgb(var(--azul-escuro)); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } .dashboard-v2-action-card-content { flex: 1; min-width: 0; } .dashboard-v2-action-card-content h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; color: var(--dashboard-neutral-900); } .dashboard-v2-action-card-content p { margin: 0; font-size: 0.9rem; color: #637180; } .dashboard-v2-action-card-arrow { flex-shrink: 0; color: var(--dashboard-neutral-400); font-size: 0.85rem; } .dashboard-v2-event-card { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--dashboard-neutral-100); border-radius: 20px; border: 1px solid var(--dashboard-neutral-300); box-shadow: var(--dashboard-shadow); overflow: hidden; } .dashboard-v2-event-card > img { width: 100%; height: 200px; flex-shrink: 0; object-fit: cover; } .dashboard-v2-event-card-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px 16px 16px; } .dashboard-v2-event-card-body h3 { flex: 1 1 auto; margin: 0 0 8px; font-size: 2rem; color: var(--dashboard-neutral-900); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; } .dashboard-v2-event-meta { flex-shrink: 0; display: grid; gap: 6px; color: #5b6a77; font-size: 0.95rem; margin-bottom: 12px; } .dashboard-v2-event-card-body .dashboard-v2-pill-button { flex-shrink: 0; margin-top: auto; } .dashboard-v2-pill-button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgb(var(--azul-escuro)); color: #fff; text-decoration: none; font-weight: 600; transition: opacity 0.2s ease; } .dashboard-v2-pill-button:hover { opacity: 0.92; color: #fff; } .dashboard-v2-bottom-grid { grid-template-columns: 2fr 1fr; align-items: start; } .dashboard-v2-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dashboard-v2-service-card { background: var(--dashboard-neutral-100); border-radius: 18px; border: 1px solid var(--dashboard-neutral-300); box-shadow: var(--dashboard-shadow); padding: 12px; display: grid; gap: 8px; } .dashboard-v2-service-icon { width: 100%; height: 58px; border-radius: 14px; background: linear-gradient( 130deg, rgba(31, 78, 132, 0.15), rgba(14, 42, 71, 0.08) ); color: var(--dashboard-primary-700); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } .dashboard-v2-service-content h3 { margin: 0; font-size: 1.1rem; color: var(--dashboard-neutral-900); } .dashboard-v2-service-content p { margin: 0; color: #637180; } .dashboard-v2-service-action { justify-self: start; border-radius: 999px; border: 1px solid var(--dashboard-neutral-300); color: var(--dashboard-neutral-900); text-decoration: none; padding: 7px 16px; font-weight: 600; } .dashboard-v2-future-list { background: var(--dashboard-neutral-100); border-radius: 18px; border: 1px solid var(--dashboard-neutral-300); box-shadow: var(--dashboard-shadow); padding: 10px 14px; display: grid; } .dashboard-v2-future-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dashboard-neutral-300); } .dashboard-v2-future-item:last-child { border-bottom: none; } .dashboard-v2-future-item h3 { margin: 0 0 4px; color: var(--dashboard-neutral-900); font-size: 1rem; } .dashboard-v2-future-item p { margin: 0; color: #62717f; } .dashboard-v2-status-badge { border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 600; } .dashboard-v2-status-badge.available { background: var(--dashboard-success-bg); color: var(--dashboard-success-text); } .dashboard-v2-status-badge.unavailable { background: #eef1f5; color: #6b7785; } .dashboard-v2-empty-card { background: var(--dashboard-neutral-100); border: 1px dashed var(--dashboard-neutral-300); color: #5d6c7a; border-radius: 18px; padding: 20px; } @media (max-width: 1180px) { .dashboard-v2-topbar { grid-template-columns: 1fr auto; } .dashboard-v2-topbar-brand { display: none; } .dashboard-v2-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-v2-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-v2-bottom-grid { grid-template-columns: 1fr; } .dashboard-v2-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile bar (se você não usar, pode remover) */ .dashboard-v2-mobilebar { display: none; } .sidebar-close { display: none; } /* =============================== EVENTS STORE (marketplace) Design premium SaaS - SOMENTE quando guest (body.events-marketplace-guest) Usuário logado: usa layout padrão do dashboard, sem alterações =============================== */ body.events-marketplace-guest .events-store-page { --events-gold: #9a6f00; --events-gold-light: #b18409; --events-gold-gradient: linear-gradient(135deg, #b18409 0%, #9a6f00 100%); min-height: 100%; background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 40%, #e2e8f0 100%); color: #0f172a; padding: 2rem 1.5rem 3rem; } body.events-marketplace-guest .events-store-container { max-width: 1200px; margin: 0 auto; background: #ffffff; border-radius: var(--ui-radius-lg, 16px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 2rem; } body.events-marketplace-guest .events-store-header { margin-bottom: 2rem; } body.events-marketplace-guest .events-store-step { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9a6f00; margin: 0 0 0.5rem 0; } body.events-marketplace-guest .events-store-title { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem 0; letter-spacing: -0.02em; line-height: 1.2; } body.events-marketplace-guest .events-store-subtitle { font-size: 1rem; color: #475569; margin: 0; line-height: 1.5; } body.events-marketplace-guest .events-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; } body.events-marketplace-guest a.events-store-card { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } body.events-marketplace-guest a.events-store-card:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 22px 40px -12px rgba(15, 23, 42, 0.18), 0 10px 18px -8px rgba(0, 0, 0, 0.1); } body.events-marketplace-guest a.events-store-card:focus-visible { outline: 3px solid #9a6f00; outline-offset: 3px; } body.events-marketplace-guest .events-store-card-image-wrap { position: relative; width: 100%; height: 200px; overflow: hidden; background: #e2e8f0; } body.events-marketplace-guest .events-store-card-img-skeleton { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 42%, #e2e8f0 88%); background-size: 220% 100%; animation: eventsStoreShimmer 1.15s ease-in-out infinite; pointer-events: none; } body.events-marketplace-guest .events-store-card-img-skeleton.is-done { opacity: 0; visibility: hidden; animation: none; transition: opacity 0.4s ease, visibility 0.4s ease; } @keyframes eventsStoreShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } body.events-marketplace-guest .events-store-card-placeholder { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 1.25rem; text-align: center; background: linear-gradient( 145deg, hsl(var(--event-ph, 212), 52%, 44%) 0%, hsl(var(--event-ph, 212), 42%, 26%) 100% ); color: #ffffff; } body.events-marketplace-guest .events-store-card-placeholder-initials { font-size: 2.35rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.28); } body.events-marketplace-guest .events-store-card-placeholder-hint { font-size: 0.8rem; font-weight: 600; opacity: 0.9; } body.events-marketplace-guest .events-store-card-badge { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: #0f172a; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } body.events-marketplace-guest .events-store-card-image { position: relative; z-index: 2; width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity 0.4s ease; } body.events-marketplace-guest .events-store-card-image--loading { opacity: 0; } body.events-marketplace-guest .events-store-card-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } body.events-marketplace-guest .events-store-card-title { font-size: 1.125rem; font-weight: 700; color: #0b1628; margin: 0; line-height: 1.35; } body.events-marketplace-guest .events-store-card-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } body.events-marketplace-guest .events-store-card-meta-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: #475569; line-height: 1.45; } body.events-marketplace-guest .events-store-card-meta-icon { margin-top: 0.12rem; color: #9a6f00; flex-shrink: 0; width: 1em; text-align: center; } body.events-marketplace-guest .events-store-card-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.55rem; margin-top: auto; font-size: 0.95rem; font-weight: 600; color: #ffffff; background: var(--events-gold-gradient); border: none; border-radius: 10px; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 3px 12px rgba(154, 111, 0, 0.38); align-self: stretch; } body.events-marketplace-guest a.events-store-card:hover .events-store-card-cta { transform: scale(1.02); box-shadow: 0 5px 18px rgba(154, 111, 0, 0.48); filter: brightness(1.05); color: #ffffff; } body.events-marketplace-guest .events-store-card-cta-icon { margin-left: 0.55rem; font-size: 0.88em; transition: transform 0.22s ease; } body.events-marketplace-guest a.events-store-card:hover .events-store-card-cta-icon { transform: translateX(5px); } body.events-marketplace-guest a.events-store-card:active .events-store-card-cta { transform: scale(0.99); } body.events-marketplace-guest .events-store-empty { padding: 2.25rem 1.75rem; text-align: center; background: rgba(255, 255, 255, 0.75); border-radius: 16px; border: 1px dashed #cbd5e1; } body.events-marketplace-guest .events-store-empty-visual { margin-bottom: 0.75rem; } body.events-marketplace-guest .events-store-empty-icon { font-size: 2.75rem; color: #94a3b8; line-height: 1; } body.events-marketplace-guest .events-store-empty-text { margin: 0; color: #475569; font-size: 1.02rem; line-height: 1.55; max-width: 32rem; margin-left: auto; margin-right: auto; } body.events-marketplace-guest .events-store-empty-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.35rem; padding: 0.7rem 1.45rem; font-size: 0.95rem; font-weight: 600; border-radius: 10px; background: var(--events-gold-gradient); color: #ffffff !important; text-decoration: none; box-shadow: 0 2px 10px rgba(154, 111, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } body.events-marketplace-guest .events-store-empty-cta:hover { color: #ffffff !important; transform: scale(1.03); box-shadow: 0 4px 16px rgba(154, 111, 0, 0.45); filter: brightness(1.06); } @media (max-width: 640px) { body.events-marketplace-guest .events-store-page { padding: 1.25rem 1rem 2rem; } body.events-marketplace-guest .events-store-container { padding: 1.25rem; } body.events-marketplace-guest .events-store-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } body.events-marketplace-guest .events-store-title { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { body.events-marketplace-guest .events-store-card-img-skeleton, body:not(.events-marketplace-guest) .events-store-card-img-skeleton { animation: none !important; background-position: 50% 0; } body.events-marketplace-guest a.events-store-card, body:not(.events-marketplace-guest) a.events-store-card, body.events-marketplace-guest .events-store-card-cta, body:not(.events-marketplace-guest) .events-store-card-cta { transition: none !important; } body.events-marketplace-guest a.events-store-card:hover, body:not(.events-marketplace-guest) a.events-store-card:hover { transform: none; } } /* Marketplace usuário logado: layout completo no dashboard (sem design guest) */ body:not(.events-marketplace-guest) .events-store-page { color: inherit; padding: 1.5rem 0 2rem; } body:not(.events-marketplace-guest) .events-store-container { background: transparent; box-shadow: none; border-radius: 0; padding: 0; max-width: 1200px; margin: 0 auto; overflow: visible; } body:not(.events-marketplace-guest) .events-store-header { margin-bottom: 1.5rem; } body:not(.events-marketplace-guest) .events-store-step { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(154, 111, 0, 0.95); margin: 0 0 0.45rem 0; } body:not(.events-marketplace-guest) .events-store-title { font-size: 1.5rem; font-weight: 700; color: #101f36; margin: 0 0 0.5rem 0; line-height: 1.2; } body:not(.events-marketplace-guest) .events-store-subtitle { font-size: 0.95rem; color: rgba(5, 27, 57, 0.7); margin: 0; line-height: 1.5; } body:not(.events-marketplace-guest) .events-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } body:not(.events-marketplace-guest) a.events-store-card { background: #101f36; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; box-shadow: none; color: #e6edf7; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } body:not(.events-marketplace-guest) a.events-store-card:hover { transform: scale(1.025) translateY(-3px); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.12); } body:not(.events-marketplace-guest) a.events-store-card:focus-visible { outline: 3px solid rgba(246, 231, 194, 0.85); outline-offset: 3px; } body:not(.events-marketplace-guest) .events-store-card-image-wrap { position: relative; width: 100%; height: 200px; overflow: hidden; background: rgba(255, 255, 255, 0.04); flex-shrink: 0; } body:not(.events-marketplace-guest) .events-store-card-img-skeleton { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.04) 90%); background-size: 220% 100%; animation: eventsStoreShimmerDark 1.15s ease-in-out infinite; pointer-events: none; } body:not(.events-marketplace-guest) .events-store-card-img-skeleton.is-done { opacity: 0; visibility: hidden; animation: none; transition: opacity 0.4s ease, visibility 0.4s ease; } @keyframes eventsStoreShimmerDark { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } body:not(.events-marketplace-guest) .events-store-card-placeholder { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 1.25rem; text-align: center; background: linear-gradient( 145deg, hsl(var(--event-ph, 212), 48%, 38%) 0%, hsl(var(--event-ph, 212), 38%, 18%) 100% ); color: #ffffff; } body:not(.events-marketplace-guest) .events-store-card-placeholder-initials { font-size: 2.35rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.35); } body:not(.events-marketplace-guest) .events-store-card-placeholder-hint { font-size: 0.8rem; font-weight: 600; opacity: 0.88; } body:not(.events-marketplace-guest) .events-store-card-badge { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #101f36; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } body:not(.events-marketplace-guest) .events-store-card-image { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.4s ease; } body:not(.events-marketplace-guest) .events-store-card-image--loading { opacity: 0; } body:not(.events-marketplace-guest) .events-store-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } body:not(.events-marketplace-guest) .events-store-card-title { color: #e6edf7; font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body:not(.events-marketplace-guest) .events-store-card-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.32rem; } body:not(.events-marketplace-guest) .events-store-card-meta-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: rgba(230, 237, 247, 0.72); line-height: 1.45; } body:not(.events-marketplace-guest) .events-store-card-meta-icon { margin-top: 0.1rem; color: #c9a44a; flex-shrink: 0; width: 1em; text-align: center; } body:not(.events-marketplace-guest) .events-store-card-cta { background: rgba(154, 111, 0, 0.28); color: #f6e7c2; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; padding: 0.78rem 1.3rem; margin-top: auto; font-size: 0.94rem; font-weight: 600; border: none; border-radius: 10px; text-decoration: none; cursor: pointer; transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease; align-self: stretch; border: 1px solid rgba(246, 231, 194, 0.12); } body:not(.events-marketplace-guest) a.events-store-card:hover .events-store-card-cta { background: rgba(154, 111, 0, 0.48); color: #fff8e8; transform: scale(1.02); } body:not(.events-marketplace-guest) .events-store-card-cta-icon { margin-left: 0.55rem; font-size: 0.88em; transition: transform 0.22s ease; } body:not(.events-marketplace-guest) a.events-store-card:hover .events-store-card-cta-icon { transform: translateX(5px); } body:not(.events-marketplace-guest) .events-store-empty { background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 2.25rem 1.5rem; text-align: center; } body:not(.events-marketplace-guest) .events-store-empty-visual { margin-bottom: 0.75rem; } body:not(.events-marketplace-guest) .events-store-empty-icon { font-size: 2.75rem; color: rgba(230, 237, 247, 0.35); line-height: 1; } body:not(.events-marketplace-guest) .events-store-empty-text { color: rgba(230, 237, 247, 0.7); margin: 0 auto; font-size: 1rem; line-height: 1.55; max-width: 32rem; } body:not(.events-marketplace-guest) .events-store-empty-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.25rem; padding: 0.65rem 1.35rem; font-size: 0.94rem; font-weight: 600; border-radius: 10px; background: rgba(154, 111, 0, 0.35); color: #f6e7c2 !important; text-decoration: none; border: 1px solid rgba(246, 231, 194, 0.2); transition: background 0.2s ease, transform 0.2s ease; } body:not(.events-marketplace-guest) .events-store-empty-cta:hover { background: rgba(154, 111, 0, 0.5); color: #fff8e8 !important; transform: scale(1.03); } @media (max-width: 640px) { body:not(.events-marketplace-guest) .events-store-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } body:not(.events-marketplace-guest) .events-store-card-image-wrap { height: 180px; } } /* =============================== FLUXO DE COMPRA (cart products + precheckout) Layout padronizado: fundo azul escuro + card flutuante branco Ativo quando body.cart-flow-layout-active (guest em cart/event ou cart/precheckout) =============================== */ body.cart-flow-layout-active main#content.dashboard-content { padding: 0; min-height: 100vh; background: #0B1B2B; display: flex; align-items: center; justify-content: center; margin: 0; } body.cart-flow-layout-active .cart-flow-layout { width: 100%; max-width: 100%; padding: 1.5rem; display: flex; align-items: center; justify-content: center; } body.cart-flow-layout-active .cart-flow-card { width: 100%; max-width: 1200px; background: #ffffff; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 2rem; color: #0f172a; } @media (min-width: 992px) { body.cart-flow-layout-active .cart-flow-card { padding: 2.5rem; max-width: 1280px; } } /* Quando NÃO é guest: wrappers neutros, layout normal do dashboard (sem alterações) */ body:not(.cart-flow-layout-active) .cart-flow-layout, body:not(.cart-flow-layout-active) .cart-flow-card { background: none; box-shadow: none; padding: 0; margin: 0; max-width: none; border-radius: 0; } @media (max-width: 992px) { body.cart-flow-layout-active .cart-flow-layout { padding: 1rem; align-items: flex-start; padding-top: 1.5rem; } body.cart-flow-layout-active .cart-flow-card { padding: 1.5rem; } } .precheckout-page .precheckout-header { margin-bottom: 1.5rem; } .precheckout-page .precheckout-title { font-size: 1.5rem; font-weight: 700; color: rgb(var(--azul-escuro)); letter-spacing: -0.02em; margin-bottom: 0.35rem; } .precheckout-page .precheckout-subtitle { font-size: 0.9rem; color: rgba(10, 38, 71, 0.7); } .precheckout-page .precheckout-back { color: rgb(var(--azul-escuro)); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s; } .precheckout-page .precheckout-back:hover { color: var(--dashboard-accent-gold, #9a6f00); } .precheckout-page .precheckout-card { background: #fff; border-radius: var(--ui-radius-lg, 16px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border: 0; overflow: hidden; } .precheckout-page .participant-card { margin-bottom: 1.5rem; } .precheckout-page .participant-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .precheckout-page .participant-card-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1rem; color: rgb(var(--azul-escuro)); } .precheckout-page .participant-card-title i { color: var(--dashboard-accent-gold, #9a6f00); font-size: 1.1rem; } .precheckout-page .badge-responsavel { background: rgba(154, 111, 0, 0.15); color: #9a6f00; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; } .precheckout-page .segment-label { font-size: 0.875rem; font-weight: 600; color: rgb(var(--azul-escuro)); margin-bottom: 0.75rem; } .precheckout-page .segment-control { display: flex; gap: 0; background: #f0f4f8; border-radius: var(--ui-radius-sm, 8px); padding: 4px; } .precheckout-page .segment-option { flex: 1; padding: 0.6rem 1rem; font-size: 0.875rem; font-weight: 600; text-align: center; border: 0; background: transparent; color: rgba(10, 38, 71, 0.6); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .precheckout-page .segment-option:hover { color: rgb(var(--azul-escuro)); } .precheckout-page .segment-option.active { background: #fff; color: #9a6f00; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .precheckout-page .segment-option:focus-visible { outline: 2px solid #9a6f00; outline-offset: 2px; } .precheckout-page .conditional-section { display: none; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(10, 38, 71, 0.08); } .precheckout-page .conditional-section.visible { display: block; } .precheckout-page .existing-flow .form-control { border-radius: var(--ui-radius-sm, 8px); padding: 0.65rem 1rem; margin-bottom: 10px; } .precheckout-page .btn-buscar { background: var(--dashboard-accent-gold, #9a6f00); color: #fff; border: 0; border-radius: var(--ui-radius-sm, 8px); padding: 0.65rem 1.25rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .precheckout-page .btn-buscar:hover { background: #b18409; color: #fff; margin-top: 5px; } .precheckout-page .success-msg { display: none; padding: 0.75rem 1rem; background: rgba(111, 216, 167, 0.15); color: #0d7a4d; border-radius: var(--ui-radius-sm, 8px); font-size: 0.875rem; font-weight: 500; margin-top: 0.75rem; } .precheckout-page .success-msg.visible { display: block; } .precheckout-page .link-switch-create { font-size: 0.8125rem; color: #9a6f00; font-weight: 600; text-decoration: none; margin-top: 0.75rem; display: inline-block; } .precheckout-page .link-switch-create:hover { color: #7a5900; } .precheckout-page .responsavel-box { background: rgba(154, 111, 0, 0.08); border: 1px solid rgba(154, 111, 0, 0.2); border-radius: var(--ui-radius-sm, 8px); padding: 1rem 1.25rem; margin-top: 1.25rem; } .precheckout-page .responsavel-box .form-check-label { font-weight: 600; color: rgb(var(--azul-escuro)); } .precheckout-page .responsavel-box .helper-text { font-size: 0.8125rem; color: rgba(10, 38, 71, 0.6); margin-top: 0.35rem; } .precheckout-page .summary-sticky { position: sticky; top: 1.5rem; } .precheckout-page .summary-card .card-header { background: #fff; border-bottom: 1px solid rgba(10, 38, 71, 0.08); padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1rem; color: rgb(var(--azul-escuro)); } .precheckout-page .summary-row { margin-bottom: 0.75rem; } .precheckout-page .summary-total { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(10, 38, 71, 0.12); } .precheckout-page .summary-total .total-label { font-size: 1.1rem; font-weight: 700; } .precheckout-page .summary-total .total-value { font-size: 1.5rem; font-weight: 800; color: rgb(var(--azul-escuro)); } .precheckout-page .btn-cta { width: 100%; padding: 1rem 1.5rem; font-weight: 700; font-size: 1rem; border-radius: var(--ui-radius-md, 12px); background: var(--dashboard-accent-gold, #9a6f00); border: 0; color: #fff; margin-top: 1.5rem; transition: background 0.2s, box-shadow 0.2s; } .precheckout-page .btn-cta:hover { background: #b18409; color: #fff; box-shadow: 0 6px 20px rgba(154, 111, 0, 0.35); } .precheckout-page .form-control, .precheckout-page .form-select { border-radius: var(--ui-radius-sm, 8px); border-color: rgba(10, 38, 71, 0.15); margin-bottom: 10px; } .precheckout-page .form-control:focus { border-color: #9a6f00; box-shadow: 0 0 0 3px rgba(154, 111, 0, 0.15); } @media (max-width: 767px) { .precheckout-page .summary-sticky { position: static; } } /* =============================== FIM PRÉ-CHECKOUT =============================== */ @media (max-width: 860px) { /* =============================== TOPBAR =============================== */ .app-topbar { position: sticky; top: 0; z-index: 400; } .app-shell-compact-menu .app-sidebar .sidebar-brand { justify-content: left; } /* BOTÃO ☰ no canto direito */ .mobile-menu-btn { display: inline-flex; position: fixed; /* FIXO pra continuar acessível com a sidebar aberta */ top: 10px; right: 12px; z-index: 999; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #fff; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; } /* Evita que o botão cubra as ações */ .app-topbar .topbar-actions { padding-right: 58px; } /* =============================== LAYOUT GERAL =============================== */ .dashboard-v2-shell { display: block !important; height: auto; } .dashboard-v2-content-wrapper { padding: 0; } .dashboard-v2-content { height: auto; border-radius: 0; padding: 16px 14px; } .dashboard-v2-services-grid, .dashboard-v2-events-grid, .dashboard-v2-actions-grid { grid-template-columns: 1fr; } /* =============================== SIDEBAR REAL (APP-SIDEBAR) =============================== */ aside.app-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; width: min(86vw, 320px) !important; max-width: 320px !important; transform: translateX(-110%) !important; transition: transform 0.25s ease !important; z-index: 500 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overflow-x: hidden !important; } body.is-sidebar-open aside.app-sidebar { transform: translateX(0) !important; } /* =============================== OVERLAY =============================== */ body.is-sidebar-open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 350; } body.is-sidebar-open { overflow: hidden; touch-action: none; } /* =============================== FIX DEFINITIVO (MOBILE SEM HOVER): Quando a sidebar estiver aberta, força o "estado expandido" do bloco do usuário (nome/cargo) mesmo se o desktop usar modo compacto =============================== */ /* 1) Se o modo compacto estiver escondendo textos por classe/atributo */ body.is-sidebar-open aside.app-sidebar .d-none, body.is-sidebar-open aside.app-sidebar [hidden] { display: block !important; } /* 2) Se estiver escondendo via style inline */ body.is-sidebar-open aside.app-sidebar [style*="display: none"] { display: block !important; } /* 3) Força visibilidade/opacidade do conteúdo (quando aberto) */ body.is-sidebar-open aside.app-sidebar, body.is-sidebar-open aside.app-sidebar * { opacity: 1 !important; visibility: visible !important; } /* 4) Remove corte por ellipsis/nowrap (quando aberto) */ body.is-sidebar-open aside.app-sidebar * { max-width: 100% !important; } body.is-sidebar-open aside.app-sidebar .profile-name, body.is-sidebar-open aside.app-sidebar .profile-role, body.is-sidebar-open aside.app-sidebar .user-name, body.is-sidebar-open aside.app-sidebar .user-role, body.is-sidebar-open aside.app-sidebar .sidebar-user-name, body.is-sidebar-open aside.app-sidebar .sidebar-user-role { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } } /* ================================================================= DESIGN SYSTEM v2 — Refinamentos Globais Foco: hierarquia visual, elegância, bem-estar, telas de tabela ================================================================= */ /* ---- Tipografia e hierarquia de página ---- */ .dashboard-content .h4.text-gray-800, .dashboard-content h1.h4.text-gray-800 { font-size: 1.18rem; font-weight: 700; color: rgb(var(--azul-escuro)); letter-spacing: -0.015em; line-height: 1.25; margin: 0; } /* Faixa de cabeçalho de página (título + ações) */ .dashboard-content .d-sm-flex.align-items-center.justify-content-between { padding-bottom: 18px; border-bottom: 1px solid rgba(10, 38, 71, 0.06); margin-bottom: 18px !important; } /* ---- Cards ---- */ .dashboard-content .card { border: 1px solid rgba(10, 38, 71, 0.07); box-shadow: 0 2px 14px rgba(10, 38, 71, 0.05); border-radius: 14px; } .dashboard-content .card.shadow-sm { box-shadow: 0 4px 22px rgba(10, 38, 71, 0.07) !important; } .dashboard-content .card-header.bg-gradient-dark { border-radius: 14px 14px 0 0; } /* ---- Abas de status acima das tabelas ---- */ .dashboard-content .nav-tabs { border-bottom: 1px solid rgba(10, 38, 71, 0.08); padding: 0 8px; gap: 2px; display: flex; } .dashboard-content .nav-tabs .nav-link { font-size: 0.84rem; font-weight: 600; color: rgba(10, 38, 71, 0.48); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 11px 16px; transition: color 0.18s ease, border-color 0.18s ease; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 7px; background: transparent !important; } .dashboard-content .nav-tabs .nav-link i.fa-circle { font-size: 0.55em; min-width: unset; } .dashboard-content .nav-tabs .nav-link:hover { color: rgb(var(--azul-escuro)); border-bottom-color: rgba(10, 38, 71, 0.18); } .dashboard-content .nav-tabs .nav-link.active { color: rgb(var(--azul-escuro)); border-bottom-color: var(--dashboard-accent-gold); font-weight: 700; } /* ---- Cabeçalhos e células de tabela ---- */ .dashboard-content .table { margin: 0; } .dashboard-content .table thead th { padding: 12px 18px !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgba(10, 38, 71, 0.42); background-color: #fafbfc !important; border-bottom: 1px solid rgba(10, 38, 71, 0.07) !important; border-top: none !important; white-space: nowrap; vertical-align: middle !important; } .dashboard-content .table tbody td { padding: 13px 18px !important; font-size: 0.9rem; color: rgb(var(--azul-escuro)); vertical-align: middle; border-bottom: 1px solid rgba(10, 38, 71, 0.04) !important; border-top: none !important; } .dashboard-content .table tbody tr:last-child td { border-bottom: none !important; } .dashboard-content .table-hover tbody tr { transition: background 0.13s ease; } .dashboard-content .table-hover tbody tr:hover { background-color: rgba(10, 38, 71, 0.024) !important; } .dashboard-content .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; } /* Colunas sortable */ .dashboard-content .sortable { cursor: pointer; user-select: none; transition: color 0.14s ease, background 0.14s ease; } .dashboard-content .sortable:hover { color: rgb(var(--azul-escuro)) !important; background-color: rgba(10, 38, 71, 0.025); } .dashboard-content .sortable .fa-sort { opacity: 0.3; transition: opacity 0.14s ease; } .dashboard-content .sortable:hover .fa-sort { opacity: 0.65; } /* Ícone de status nas linhas */ .dashboard-content .fa-solid.fa-circle.text-success { color: #22c55e !important; font-size: 0.5em; } .dashboard-content .fa-solid.fa-circle.text-danger { color: #f43f5e !important; font-size: 0.5em; } /* ---- Botão de ação em linha (ellipsis) ---- */ .dashboard-content .btn-group .dropdown-toggle.no-arrow { border-radius: 8px !important; width: 30px; height: 30px; min-height: 30px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* ---- Dropdown de ações em linha ---- */ .dashboard-content .dropdown-menu { border-radius: 12px !important; border: 1px solid rgba(10, 38, 71, 0.08); box-shadow: 0 8px 28px rgba(10, 38, 71, 0.11); padding: 6px !important; min-width: 155px; } .dashboard-content .dropdown-item { border-radius: 7px; font-size: 0.875rem; padding: 8px 12px !important; font-weight: 500; color: rgb(var(--azul-escuro)); transition: background 0.12s ease; } .dashboard-content .dropdown-item:hover { background-color: rgba(10, 38, 71, 0.05) !important; color: rgb(var(--azul-escuro)); } .dashboard-content .dropdown-item.active, .dashboard-content .dropdown-item:active { background-color: rgba(10, 38, 71, 0.07) !important; color: rgb(var(--azul-escuro)); } /* ---- Badge de perfil / rótulo em linha ---- */ .dashboard-content .badge-light.border { background: rgba(10, 38, 71, 0.05) !important; color: rgb(var(--azul-escuro)); border-color: rgba(10, 38, 71, 0.1) !important; font-size: 0.73rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; } /* ---- Rodapé do card com contador ---- */ .dashboard-content .card-footer { background: #fafbfc !important; border-top: 1px solid rgba(10, 38, 71, 0.06) !important; border-radius: 0 0 14px 14px; } .dashboard-content .card-footer small.text-muted { font-size: 0.775rem !important; color: rgba(10, 38, 71, 0.42) !important; font-weight: 500; } /* ---- Spinner de carregamento ---- */ .dashboard-content .spinner-border.text-primary { color: var(--dashboard-accent-gold) !important; width: 1.2rem; height: 1.2rem; } /* ---- Estado vazio (nenhum registro) ---- */ .dashboard-content tbody td.text-center { color: rgba(10, 38, 71, 0.38) !important; font-size: 0.9rem; } /* ---- Botões de ação no cabeçalho de página ---- */ .dashboard-content .d-sm-flex .btn, .dashboard-content .d-sm-flex .btn-group .btn, .dashboard-content .d-flex .btn { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; margin-right: 8px; } /* Botão success (ex: Exportar CSV) */ .btn-success { background-color: #1a7a4a; border-color: #1a7a4a; border-radius: 999px; color: #fff; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-success:hover, .btn-success:focus { background-color: #145e38; border-color: #145e38; color: #fff; } /* ---- Sidebar de filtro (tema navy, integrado ao sistema) ---- */ .filter-sidebar-fixed { background: rgb(var(--azul-escuro)) !important; border-radius: 14px !important; border: none !important; box-shadow: 0 4px 22px rgba(10, 38, 71, 0.18) !important; color: #ffffff; position: sticky; top: 20px; } .filter-sidebar-fixed .card-body { padding: 20px !important; } .filter-sidebar-fixed h6 { color: rgba(230, 237, 247, 0.95) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-bottom: 12px !important; margin-bottom: 16px !important; } .filter-sidebar-fixed label, .filter-sidebar-fixed .small { color: rgba(230, 237, 247, 0.62) !important; font-size: 0.78rem !important; font-weight: 500 !important; } .filter-sidebar-fixed .form-control, .filter-sidebar-fixed .form-select { background-color: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; color: #e6edf7 !important; border-radius: 10px !important; min-height: 42px !important; font-size: 0.875rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .filter-sidebar-fixed .form-control::placeholder { color: rgba(230, 237, 247, 0.35); } .filter-sidebar-fixed .form-control:focus, .filter-sidebar-fixed .form-select:focus { border-color: rgba(154, 111, 0, 0.55) !important; box-shadow: 0 0 0 3px rgba(154, 111, 0, 0.14) !important; outline: none; color: #fff !important; } .filter-sidebar-fixed select option { background-color: rgb(var(--azul-escuro)) !important; color: #e6edf7 !important; } .filter-sidebar-fixed #btn-reset, .filter-sidebar-fixed .btn-sm { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: rgba(230, 237, 247, 0.72) !important; border-radius: 999px !important; font-size: 0.8rem !important; font-weight: 600 !important; transition: all 0.18s ease !important; width: 100%; padding: 8px 16px !important; } .filter-sidebar-fixed #btn-reset:hover, .filter-sidebar-fixed .btn-sm:hover { background: rgba(255, 255, 255, 0.09) !important; border-color: rgba(255, 255, 255, 0.36) !important; color: #fff !important; } /* form-floating dentro do filtro: label em branco */ .filter-sidebar-fixed .form-floating > label { color: rgba(230, 237, 247, 0.5) !important; font-size: 0.83rem; } .filter-sidebar-fixed .form-floating .form-control:focus ~ label, .filter-sidebar-fixed .form-floating .form-control:not(:placeholder-shown) ~ label { color: rgba(230, 237, 247, 0.8) !important; } /* ---- Formulários internos (add/edit views) ---- */ /* Título de seção acima dos cards de formulário */ .dashboard-content .card .card-body > .row:first-child .form-floating:first-child { margin-top: 4px; } /* label de grupo manual (não floating) */ .dashboard-content .form-group > .small.font-weight-bold { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(10, 38, 71, 0.45); font-weight: 700 !important; margin-bottom: 6px; } /* ---- Botão de voltar / breadcrumb ---- */ .dashboard-content a.btn.btn-secondary, .dashboard-content a.btn[href*="javascript:history"] { border-radius: 999px; font-size: 0.85rem; font-weight: 600; } /* ---- Scrollbar discreta nos contêineres internos ---- */ .dashboard-content [id$="-scroll-container"], .dashboard-content .table-scroll-container { scrollbar-width: thin; scrollbar-color: rgba(10, 38, 71, 0.18) transparent; } .dashboard-content [id$="-scroll-container"]::-webkit-scrollbar, .dashboard-content .table-scroll-container::-webkit-scrollbar { width: 6px; } .dashboard-content [id$="-scroll-container"]::-webkit-scrollbar-track, .dashboard-content .table-scroll-container::-webkit-scrollbar-track { background: transparent; } .dashboard-content [id$="-scroll-container"]::-webkit-scrollbar-thumb, .dashboard-content .table-scroll-container::-webkit-scrollbar-thumb { background-color: rgba(10, 38, 71, 0.14); border-radius: 999px; } /* ---- Formulário: inputs com borda mais suave ---- */ .dashboard-content .form-control, .dashboard-content .form-select { border-color: rgba(10, 38, 71, 0.13); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .dashboard-content .form-control:focus, .dashboard-content .form-select:focus { border-color: rgba(10, 38, 71, 0.35); box-shadow: 0 0 0 3px rgba(10, 38, 71, 0.07); } /* ---- DataTables: esconde controles padrão (já ocultos, reforça) ---- */ .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate { display: none !important; } /* ---- Tabela de produtos / telas sem sidebar de filtro ---- */ .dashboard-content .card-body .table-responsive { border-radius: 0 0 14px 14px; overflow: hidden; } /* ---- Hierarquia de texto nos detalhes (detail views) ---- */ .dashboard-content .card .h5, .dashboard-content .card h5 { font-size: 1rem; font-weight: 700; color: rgb(var(--azul-escuro)); letter-spacing: -0.01em; } .dashboard-content .card .h6, .dashboard-content .card h6 { font-size: 0.82rem; font-weight: 600; color: rgba(10, 38, 71, 0.52); text-transform: uppercase; letter-spacing: 0.07em; } /* ---- Seção de título de página para telas complexas ---- */ .page-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dashboard-accent-gold); margin: 0 0 6px; } .page-section-heading { font-size: 1.25rem; font-weight: 700; color: rgb(var(--azul-escuro)); letter-spacing: -0.015em; margin: 0; } /* ---- Loader da página: reduz intrusividade ---- */ .loader-container { background: rgba(var(--azul-escuro), 0.55) !important; backdrop-filter: blur(4px); } /* ---- Toastr: arredondamento suave ---- */ #toast-container .toast { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important; } /* ---- Modais: suavização ---- */ .dashboard-content ~ * .modal-content, .modal-content { border-radius: 18px; border: none; box-shadow: 0 20px 60px rgba(10, 38, 71, 0.18); } .modal-header { border-bottom: 1px solid rgba(10, 38, 71, 0.07); padding: 18px 24px 14px; } .modal-footer { border-top: 1px solid rgba(10, 38, 71, 0.07); padding: 14px 24px 18px; } /* ---- Responsive: sidebar de filtro em mobile vira linha ---- */ @media (max-width: 991.98px) { .filter-sidebar-fixed { position: static; margin-top: 16px; border-radius: 12px !important; } } /* ---- Edge-to-edge: tabela como único filho de card-body ---- */ /* Remove padding do card-body que contém apenas uma tabela, deixando as linhas encostarem nas bordas do card para uma aparência mais limpa e profissional. */ .dashboard-content .card > .card-body:has(> table:only-child), .dashboard-content .card > .card-body:has(> table:first-child:last-child) { padding: 0 !important; } /* Garante que a tabela preencha o card completamente */ .dashboard-content .card > .card-body:has(> table) > table { margin: 0; width: 100% !important; } /* Arredonda última linha da tabela para combinar com o card */ .dashboard-content .card > .card-body:has(> table) > table tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; } .dashboard-content .card > .card-body:has(> table) > table tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; } /* ---- Hierarquia de pesos nas linhas da tabela ---- */ /* Primeira coluna de texto (nome/título) em destaque */ .dashboard-content .table tbody td:nth-child(2) { font-weight: 600; } /* Valores monetários alinhados e com destaque sutil */ .dashboard-content .table tbody td .currency-brl, .dashboard-content .table tbody td .currency-usd { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* =============================== MANAGEMENT LISTING PAGES =============================== */ .management-page-header { border-bottom: 1px solid rgba(10, 38, 71, 0.08); padding-bottom: 24px; margin-bottom: 24px; } .management-page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .management-page-title { font-size: 1.5rem; font-weight: 600; color: rgb(var(--azul-escuro)); margin: 0 0 4px 0; } .management-page-subtitle { font-size: 0.9rem; color: var(--ui-text-muted); margin: 0; } .management-page-actions, .management-action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .management-action-bar { margin-bottom: 20px; } .management-search-input { width: 320px; max-width: 100%; height: 40px; padding: 0 14px; border: 1px solid rgba(10, 38, 71, 0.15); border-radius: var(--ui-radius-sm); font-size: 0.9rem; } .management-card { background: #fff; border-radius: var(--ui-radius-md); border: 1px solid rgba(10, 38, 71, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); overflow: hidden; } .management-card-body { padding: 20px; } .management-card .table-responsive { padding: 0 20px 20px; } .management-card .table-responsive:first-child { padding-top: 20px; } .management-status-tabs { display: flex; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid rgba(10, 38, 71, 0.08); } .management-status-tab { display: inline-flex; align-items: center; gap: 8px; padding: 16px 12px; margin-bottom: -1px; color: var(--ui-text-muted); text-decoration: none; border-bottom: 2px solid transparent; font-weight: 600; transition: all 0.2s ease; } .management-status-tab:hover { color: rgb(var(--azul-escuro)); } .management-status-tab.active { color: rgb(var(--azul-escuro)); border-bottom-color: #c08a00; } .management-table { width: 100% !important; margin: 0 !important; border-collapse: separate; border-spacing: 0; } .management-table thead th { text-align: left; padding: 14px 16px !important; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); background: rgba(10, 38, 71, 0.03); border-bottom: 1px solid rgba(10, 38, 71, 0.08) !important; vertical-align: middle; } .management-table tbody td { padding: 14px 16px !important; font-size: 0.94rem; color: rgb(var(--azul-escuro)); vertical-align: middle; border-top: 0 !important; border-bottom: 1px solid rgba(10, 38, 71, 0.06); background: #fff; } .management-table tbody tr:last-child td { border-bottom: 0; } .management-table.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(10, 38, 71, 0.015); } .management-table.table-hover > tbody > tr:hover > * { background: rgba(10, 38, 71, 0.03); } .management-table .management-name { font-weight: 600; } .management-table .management-muted, .management-card .dataTables_info { color: var(--ui-text-muted); } .management-table-actions { text-align: right; } .management-table-actions .btn-outline-primary, .management-table-actions .btn-outline-secondary { width: 42px; height: 42px; padding: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; border-color: rgba(10, 38, 71, 0.85); color: rgb(var(--azul-escuro)); background: #fff; } .management-table-actions .dropdown-toggle::after { display: none; } .management-table-actions .btn-outline-primary:hover, .management-table-actions .btn-outline-secondary:hover, .management-table-actions .btn-outline-primary:focus, .management-table-actions .btn-outline-secondary:focus { background: rgba(10, 38, 71, 0.05); border-color: rgb(var(--azul-escuro)); color: rgb(var(--azul-escuro)); } .management-export-buttons .btn, .management-page-actions .btn, .management-action-bar .btn { min-height: 40px; } .management-export-buttons .btn i { margin-right: 6px; } .management-datatable-wrapper .dt-buttons, .management-datatable-wrapper .dataTables_filter, .management-datatable-wrapper .dataTables_length { display: none !important; } .management-card .dataTables_wrapper .row { margin-left: 0; margin-right: 0; } .management-card .dataTables_info, .management-card .dataTables_paginate { padding: 16px 20px 18px; } .management-card .dataTables_paginate .paginate_button { margin-left: 6px !important; } .management-card .dataTables_paginate .paginate_button .page-link, .management-card .dataTables_paginate .page-link { border-radius: 10px !important; border: 1px solid rgba(10, 38, 71, 0.12); color: rgb(var(--azul-escuro)); min-width: 38px; text-align: center; } .management-card .dataTables_paginate .active .page-link { background: rgb(var(--azul-escuro)); border-color: rgb(var(--azul-escuro)); color: #fff; } .management-card .select { margin-top: 8px; } .management-card .select select { min-width: 140px; } .management-secondary-card { background: #fff; border-radius: var(--ui-radius-md); border: 1px solid rgba(10, 38, 71, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .management-secondary-card .card-body { padding: 20px; } .management-secondary-title { margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: rgb(var(--azul-escuro)); } @media (max-width: 768px) { .management-page-actions, .management-action-bar { width: 100%; } .management-page-actions .btn, .management-action-bar .btn, .management-page-actions a, .management-action-bar a { width: 100%; justify-content: center; } .management-search-input { width: 100%; } .management-status-tabs { overflow-x: auto; white-space: nowrap; } .management-card .table-responsive { padding-left: 12px; padding-right: 12px; } } /* =============================== DASHBOARD V2 — Enhanced Home Panel =============================== */ @keyframes dv2FadeSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes dv2Wave { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(10deg); } 50% { transform: rotate(-4deg); } 60% { transform: rotate(0deg); } } .dashboard-v2-panel-enhanced { gap: 24px; } /* ── Hero greeting ── */ .dv2-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px; border-radius: 20px; background: linear-gradient(135deg, #0e2a47 0%, #163a63 60%, #1a4570 100%); color: #fff; position: relative; overflow: hidden; animation: dv2FadeSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .dv2-hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 165, 74, 0.12) 0%, transparent 70%); pointer-events: none; } .dv2-hero::after { content: ''; position: absolute; bottom: -40%; left: -5%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(78, 115, 223, 0.08) 0%, transparent 70%); pointer-events: none; } .dv2-hero-left { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; } .dv2-hero-avatar { position: relative; flex-shrink: 0; } .dv2-hero-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(198, 165, 74, 0.45); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .dv2-hero-avatar-fallback { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(198, 165, 74, 0.15); border: 3px solid rgba(198, 165, 74, 0.45); color: #c6a54a; font-weight: 800; font-size: 1.6rem; } .dv2-hero-avatar-status { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2.5px solid #0e2a47; } .dv2-hero-text { min-width: 0; } .dv2-hero-time { margin: 0 0 2px; font-size: 0.85rem; color: rgba(230, 237, 247, 0.7); font-weight: 500; } .dv2-hero-wave { display: inline-block; animation: dv2Wave 2s ease-in-out 0.5s 1; transform-origin: 70% 70%; } .dv2-hero-name { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; } .dv2-hero-meta { margin: 4px 0 0; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dv2-hero-role { color: #c6a54a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; } .dv2-hero-sep { color: rgba(255, 255, 255, 0.3); } .dv2-hero-company { color: rgba(230, 237, 247, 0.65); font-weight: 400; } .dv2-hero-right { position: relative; z-index: 1; flex-shrink: 0; } .dv2-hero-date { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(230, 237, 247, 0.85); font-size: 0.85rem; font-weight: 500; backdrop-filter: blur(4px); } .dv2-hero-date i { color: #c6a54a; font-size: 0.9rem; } .dv2-subtitle { color: var(--dashboard-accent-gold); font-size: 0.88rem; font-weight: 500; margin: -8px 0 0; animation: dv2FadeSlideUp 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Section headers ── */ .dv2-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: -4px; } .dv2-section-accent { width: 4px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #c6a54a 0%, rgba(198, 165, 74, 0.3) 100%); flex-shrink: 0; } .dv2-section-header h2 { margin: 0; color: var(--dashboard-neutral-900); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; } /* ── Section entrance animation ── */ .dashboard-v2-panel-enhanced .dashboard-v2-section { animation: dv2FadeSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Enhanced action cards ── */ .dashboard-v2-panel-enhanced .dashboard-v2-action-card { position: relative; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .dashboard-v2-panel-enhanced .dashboard-v2-action-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--dashboard-accent-gold), rgba(198, 165, 74, 0.2)); border-radius: 4px 0 0 4px; opacity: 0; transition: opacity 0.25s ease; } .dashboard-v2-panel-enhanced .dashboard-v2-action-card:hover { transform: translateY(-2px); border-color: var(--dashboard-accent-gold); box-shadow: 0 8px 24px rgba(154, 111, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04); } .dashboard-v2-panel-enhanced .dashboard-v2-action-card:hover::before { opacity: 1; } .dashboard-v2-panel-enhanced .dashboard-v2-action-card:hover .dashboard-v2-action-card-icon { background: linear-gradient(130deg, rgba(154, 111, 0, 0.15), rgba(154, 111, 0, 0.06)); color: var(--dashboard-accent-gold); } .dashboard-v2-panel-enhanced .dashboard-v2-action-card:hover .dashboard-v2-action-card-arrow { color: var(--dashboard-accent-gold); transform: translateX(3px); } .dashboard-v2-panel-enhanced .dashboard-v2-action-card-arrow { transition: color 0.2s ease, transform 0.2s ease; } /* ── Enhanced event cards ── */ .dashboard-v2-panel-enhanced .dashboard-v2-event-card { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .dashboard-v2-panel-enhanced .dashboard-v2-event-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); border-color: rgba(198, 165, 74, 0.3); } .dashboard-v2-panel-enhanced .dashboard-v2-event-card > img { transition: transform 0.4s ease; } .dashboard-v2-panel-enhanced .dashboard-v2-event-card:hover > img { transform: scale(1.04); } /* ── Enhanced pill button ── */ .dashboard-v2-panel-enhanced .dashboard-v2-pill-button { transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-v2-panel-enhanced .dashboard-v2-pill-button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(10, 38, 71, 0.2); } /* ── Content blocks ── */ .dv2-block { animation: dv2FadeSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Nav section header ── */ .dv2-nav-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .dv2-nav-section-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgba(14, 42, 71, 0.10), rgba(14, 42, 71, 0.04)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv2-nav-section-icon i { font-size: 0.85rem; color: var(--dashboard-primary-700, #1f4e84); } .dv2-nav-section-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--dashboard-neutral-900, #1e2a36); letter-spacing: -0.01em; flex: 1; } .dv2-nav-section-count { font-size: 0.72rem; font-weight: 700; color: rgba(14, 42, 71, 0.4); background: rgba(14, 42, 71, 0.06); padding: 2px 9px; border-radius: 999px; flex-shrink: 0; } /* ── Nav grid ── */ .dv2-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } /* ── Nav card ── */ .dv2-nav-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--dashboard-neutral-100, #fff); border-radius: 14px; border: 1px solid var(--dashboard-neutral-300, #e6eaf0); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .dv2-nav-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--dashboard-accent-gold, #c6a54a); border-radius: 3px 0 0 3px; opacity: 0; transition: opacity 0.22s ease; } .dv2-nav-card:hover { border-color: rgba(198, 165, 74, 0.4); box-shadow: 0 6px 20px rgba(14, 42, 71, 0.07); transform: translateY(-2px); text-decoration: none; color: inherit; } .dv2-nav-card:hover::before { opacity: 1; } .dv2-nav-card-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(14, 42, 71, 0.09), rgba(14, 42, 71, 0.03)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.22s ease, color 0.22s ease; } .dv2-nav-card-icon i { font-size: 1rem; color: var(--dashboard-primary-700, #1f4e84); transition: color 0.22s ease; } .dv2-nav-card:hover .dv2-nav-card-icon { background: linear-gradient(135deg, rgba(198, 165, 74, 0.15), rgba(198, 165, 74, 0.05)); } .dv2-nav-card:hover .dv2-nav-card-icon i { color: var(--dashboard-accent-gold, #c6a54a); } .dv2-nav-card-label { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--dashboard-neutral-900, #1e2a36); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv2-nav-card-arrow { font-size: 0.7rem; color: rgba(14, 42, 71, 0.2); flex-shrink: 0; transition: color 0.2s ease, transform 0.2s ease; } .dv2-nav-card:hover .dv2-nav-card-arrow { color: var(--dashboard-accent-gold, #c6a54a); transform: translateX(3px); } /* ── Responsive ── */ @media (max-width: 860px) { .dv2-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 14px; } .dv2-hero-avatar img, .dv2-hero-avatar-fallback { width: 52px; height: 52px; } .dv2-hero-name { font-size: 1.4rem; } .dv2-hero-right { align-self: flex-start; } .dv2-nav-grid { grid-template-columns: 1fr; gap: 8px; } .dashboard-v2-panel-enhanced .dashboard-v2-events-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .dv2-hero-left { flex-direction: column; align-items: flex-start; gap: 10px; } .dv2-hero-name { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .dv2-hero, .dv2-block, .dashboard-v2-panel-enhanced .dashboard-v2-section, .dv2-subtitle { animation: none !important; } .dv2-hero-wave { animation: none !important; } .dv2-nav-card, .dashboard-v2-panel-enhanced .dashboard-v2-action-card, .dashboard-v2-panel-enhanced .dashboard-v2-event-card, .dashboard-v2-panel-enhanced .dashboard-v2-pill-button { transition: none !important; } }