/* =========================================================
   ERP OFICINA — VISUAL V2
   Camada visual somente. Não altera regras de negócio/API.
   ========================================================= */

#app-view {
    --bg: #07101f;
    --surface: #0d192b;
    --surface-soft: #101f34;
    --sidebar: #081423;
    --sidebar-soft: #11233d;
    --text: #f3f7ff;
    --muted: #8fa2bd;
    --border: rgba(148, 163, 184, .16);
    --primary: #2f7df4;
    --primary-hover: #438df8;
    --success: #22c780;
    --warning: #f5a524;
    --danger: #ff5f67;
    --info: #40b5ff;
    --shadow: 0 18px 48px rgba(0, 0, 0, .22);
    --radius: 16px;
    --radius-sm: 11px;
    color: var(--text);
    background:
        radial-gradient(circle at 78% 8%, rgba(47, 125, 244, .10), transparent 25%),
        linear-gradient(180deg, #07101f 0%, #091526 52%, #07101f 100%);
}

#app-view .workspace {
    min-height: 100vh;
    background:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
        radial-gradient(circle at 85% 2%, rgba(33, 113, 222, .10), transparent 27%);
    background-size: 42px 42px, 42px 42px, auto;
}

/* Sidebar */
#app-view .sidebar {
    background:
        radial-gradient(circle at 20% 5%, rgba(47, 125, 244, .14), transparent 26%),
        linear-gradient(180deg, #081524 0%, #07111f 100%);
    border-right: 1px solid rgba(148, 163, 184, .13);
    box-shadow: 18px 0 40px rgba(0,0,0,.12);
}

#app-view .sidebar-brand {
    min-height: 84px;
    border-bottom-color: rgba(148, 163, 184, .12);
}

#app-view .brand-mark.compact {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #3989ff, #1c5bd5);
    box-shadow: 0 10px 24px rgba(47,125,244,.26), inset 0 1px rgba(255,255,255,.16);
}

#app-view .sidebar-brand strong {
    color: #fff;
    font-size: 15px;
    letter-spacing: -.01em;
}

#app-view .sidebar-brand span {
    color: #7f93af;
}

#app-view .main-menu {
    padding: 14px 9px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.28) transparent;
}

#app-view .menu-section-title {
    padding: 15px 13px 7px;
    color: #657995;
    font-size: 9px;
    letter-spacing: .15em;
}

#app-view .menu-item {
    min-height: 44px;
    gap: 12px;
    margin: 3px 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #b8c6d9;
    font-size: 12px;
    font-weight: 680;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

#app-view .menu-item:hover {
    color: #fff;
    background: rgba(255,255,255,.045);
    border-color: rgba(148,163,184,.08);
    transform: translateX(2px);
}

#app-view .menu-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(47,125,244,.32), rgba(47,125,244,.16));
    border-color: rgba(72,139,247,.20);
    box-shadow: inset 3px 0 #3d8cff, 0 10px 24px rgba(4, 37, 88, .14);
}

#app-view .menu-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #a9bbd2;
}

#app-view .menu-icon svg,
#app-view .metric-icon svg,
#app-view .alert-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#app-view .menu-item.active .menu-icon {
    color: #fff;
}

#app-view .sidebar-footer {
    margin: 0 8px 8px;
    padding: 12px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

#app-view .sidebar-user strong { color: #fff; }
#app-view .sidebar-user span { color: #7f93af; }
#app-view .sidebar .avatar {
    background: linear-gradient(145deg, #233652, #182940);
    border: 1px solid rgba(148,163,184,.12);
}

/* Topbar */
#app-view .topbar {
    min-height: 76px;
    padding: 12px 28px;
    border-bottom-color: rgba(148,163,184,.13);
    background: rgba(7, 16, 31, .88);
    box-shadow: 0 10px 36px rgba(0,0,0,.12);
    backdrop-filter: blur(18px);
}

#app-view .topbar h1 {
    color: #f8fbff;
    font-size: 22px;
    font-weight: 780;
}

#app-view .topbar .eyebrow {
    color: #5598ff;
    letter-spacing: .14em;
}

#app-view .session-chip,
#app-view .user-chip {
    border-color: rgba(148,163,184,.15);
    background: rgba(255,255,255,.035);
    color: #9eb0c8;
}

#app-view .user-chip strong { color: #f4f7fb; }
#app-view .user-chip span { color: #7f93af; }
#app-view .user-chip .avatar {
    background: #111f34;
    border: 1px solid rgba(148,163,184,.16);
    color: #c8d6e8;
}

#app-view .topbar .secondary-button {
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(255,255,255,.035);
    color: #d8e2ef;
}

#app-view .topbar .secondary-button:hover {
    background: rgba(255,255,255,.075);
}

#app-view .mobile-menu-button {
    border-color: rgba(148,163,184,.15);
    background: #0f1c2f;
    color: #d9e6f5;
}

/* Conteúdo geral */
#app-view .page-content {
    padding: 28px 30px 38px;
}

#app-view .hero-row {
    margin-bottom: 22px;
    padding: 2px 1px;
}

#app-view .hero-row h2 {
    color: #f9fbff;
    font-size: 30px;
    font-weight: 800;
}

#app-view .hero-row p,
#app-view .reference-date {
    color: #93a6c0;
}

#app-view .reference-date {
    border-color: rgba(148,163,184,.14);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

#app-view .metric-card,
#app-view .panel,
#app-view .data-panel,
#app-view .quick-card,
#app-view .finance-kpi,
#app-view .finance-card,
#app-view .finance-caixa-filter,
#app-view .finance-period-kpis > div,
#app-view .report-kpis article,
#app-view .report-card,
#app-view .report-table-wrap,
#app-view .reports-filter,
#app-view .audit-info-card,
#app-view .profile-card,
#app-view .office-config-intro,
#app-view .office-config-card,
#app-view .office-logo-card,
#app-view .office-document-card {
    border-color: rgba(148,163,184,.14) !important;
    background: linear-gradient(145deg, rgba(17,32,52,.96), rgba(11,24,42,.98)) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.018) !important;
}

/* Dashboard */
#app-view .metrics-grid { gap: 14px; }

#app-view .metric-card {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    padding: 17px 18px;
}

#app-view .metric-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -38px;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(47,125,244,.07);
    pointer-events: none;
}

#app-view .metric-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

#app-view .metric-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 7px;
    border-radius: 10px;
    color: #72a9ff;
    background: rgba(47,125,244,.14);
    border: 1px solid rgba(79,145,255,.15);
}

#app-view .metric-card.positive .metric-icon {
    color: #5fe2a4;
    background: rgba(34,199,128,.10);
    border-color: rgba(34,199,128,.16);
}

#app-view .metric-card.warning .metric-icon {
    color: #ffc05a;
    background: rgba(245,165,36,.11);
    border-color: rgba(245,165,36,.18);
}

#app-view .metric-card.danger .metric-icon {
    color: #ff858b;
    background: rgba(255,95,103,.10);
    border-color: rgba(255,95,103,.18);
}

#app-view .metric-card .metric-label {
    color: #9db0ca;
    font-size: 11px;
}

#app-view .metric-card .metric-value {
    margin: 10px 0 5px;
    color: #f7fbff;
    font-size: 27px;
}

#app-view .metric-card.positive .metric-value { color: #66dca9; }
#app-view .metric-card.warning .metric-value { color: #ffc35f; }
#app-view .metric-card.danger .metric-value { color: #ff858b; }
#app-view .metric-card .metric-detail { color: #7187a5; }

#app-view .panel { padding: 20px; }
#app-view .panel-header h3 { color: #f5f8fc; font-size: 15px; }
#app-view .panel-header span { color: #7286a3; }

#app-view .progress { background: #17263b; }
#app-view .progress > i {
    background: linear-gradient(90deg, #2474ed, #4b9bff);
    box-shadow: 0 0 14px rgba(47,125,244,.22);
}

#app-view .status-row span { color: #96a9c2; }
#app-view .status-row strong { color: #eef4fb; }

#app-view .alert-item {
    border: 1px solid rgba(148,163,184,.10);
    background: rgba(255,255,255,.025);
}

#app-view .alert-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    color: #72a9ff;
    background: rgba(47,125,244,.11);
}

#app-view .alert-item strong { color: #edf3fa; }
#app-view .alert-item span { color: #758aa7; }

#app-view .quick-card {
    border-color: rgba(148,163,184,.12);
    background: rgba(255,255,255,.024) !important;
}
#app-view .quick-card strong { color: #f5f8fd; }
#app-view .quick-card span { color: #7f93af; }

/* Toolbars e formulários */
#app-view .module-toolbar,
#app-view .finance-toolbar,
#app-view .audit-toolbar { color: var(--text); }

#app-view .search-box input,
#app-view .field input,
#app-view .field select,
#app-view .field textarea,
#app-view input:not([type="checkbox"]):not([type="radio"]),
#app-view select,
#app-view textarea,
#app-view .toolbar-select {
    border-color: rgba(148,163,184,.16) !important;
    background: #0a1728 !important;
    color: #edf4fc !important;
    box-shadow: none !important;
}

#app-view input::placeholder,
#app-view textarea::placeholder { color: #526781; }

#app-view input:focus,
#app-view select:focus,
#app-view textarea:focus {
    border-color: #377ff0 !important;
    box-shadow: 0 0 0 3px rgba(47,125,244,.13) !important;
    outline: none;
}

#app-view .field > span,
#app-view .field label { color: #b8c7da; }

#app-view .search-box::before { color: #6f84a0; }

#app-view .action-button,
#app-view .primary-button {
    background: linear-gradient(135deg, #2f7df4, #2168d8);
    color: #fff;
    box-shadow: 0 9px 22px rgba(28,89,190,.20);
}

#app-view .action-button:hover,
#app-view .primary-button:hover {
    background: linear-gradient(135deg, #438df8, #2b74e7);
}

#app-view .action-button.secondary,
#app-view .secondary-button,
#app-view .row-action,
#app-view .modal-close {
    border-color: rgba(148,163,184,.16) !important;
    background: rgba(255,255,255,.035) !important;
    color: #c7d4e5 !important;
}

#app-view .action-button.secondary:hover,
#app-view .secondary-button:hover,
#app-view .row-action:hover,
#app-view .modal-close:hover {
    background: rgba(255,255,255,.075) !important;
}

#app-view .action-button.danger {
    border-color: rgba(255,95,103,.25) !important;
    background: rgba(255,95,103,.08) !important;
    color: #ff9196 !important;
    box-shadow: none;
}

/* Tabelas */
#app-view .data-panel,
#app-view .report-table-wrap { overflow: hidden; }

#app-view .data-table th {
    border-bottom-color: rgba(148,163,184,.12);
    background: #0a1728;
    color: #7187a5;
}

#app-view .data-table td {
    border-bottom-color: rgba(148,163,184,.08);
    color: #cbd7e7;
}

#app-view .data-table tr:hover td { background: rgba(47,125,244,.035); }
#app-view .table-main { color: #eef4fb; }
#app-view .table-sub { color: #6f84a0; }
#app-view .table-footer {
    border-top-color: rgba(148,163,184,.10);
    color: #7085a1;
    background: rgba(255,255,255,.015);
}

#app-view .status-badge {
    border: 1px solid rgba(34,199,128,.20);
    background: rgba(34,199,128,.10);
    color: #66dda9;
}
#app-view .status-badge.inactive {
    border-color: rgba(148,163,184,.14);
    background: rgba(148,163,184,.08);
    color: #93a6bf;
}

/* Financeiro */
#app-view .finance-kpi strong,
#app-view .finance-card-head h3,
#app-view .finance-card-head > strong,
#app-view .finance-balance-strip strong,
#app-view .finance-period-kpis strong { color: #f1f6fc; }

#app-view .finance-tabs,
#app-view .reports-tabs {
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(255,255,255,.025);
}

#app-view .finance-tab,
#app-view .reports-tab { color: #8095b0; }

#app-view .finance-tab.active,
#app-view .reports-tab.active {
    background: rgba(47,125,244,.15);
    color: #7bb0ff;
    box-shadow: inset 0 0 0 1px rgba(70,139,247,.16);
}

#app-view .finance-list-row,
#app-view .finance-daily-row,
#app-view .finance-extrato-row,
#app-view .office-document-card dl > div {
    border-color: rgba(148,163,184,.09);
}

#app-view .finance-balance-strip,
#app-view .finance-bar-line {
    border-color: rgba(148,163,184,.12);
    background: rgba(255,255,255,.025);
}

#app-view .finance-bar-line small { color: #94a7c0; }
#app-view .finance-overdue-row td,
#app-view .finance-overdue-row:hover td { background: rgba(255,95,103,.035) !important; }

/* Relatórios */
#app-view .report-section-head h3,
#app-view .report-card-head h4,
#app-view .report-kpis article > strong { color: #f3f7fc; }
#app-view .report-bar-track { background: #17263b; }
#app-view .report-bar-track i { background: linear-gradient(90deg, #2574eb, #4b9cff); }

/* Gestão / Auditoria */
#app-view .management-note {
    border-color: rgba(47,125,244,.18);
    background: rgba(47,125,244,.07);
    color: #9db0c9;
}

#app-view .permission-list > span,
#app-view .permission-pill {
    background: rgba(148,163,184,.09);
    color: #a9bad0;
}

#app-view .audit-module,
#app-view .self-badge {
    background: rgba(47,125,244,.11);
    color: #73aaff;
}
#app-view .audit-description { color: #9aacbf; }

/* Configurações */
#app-view .office-config-state,
#app-view .office-readonly-note,
#app-view .office-document-hint,
#app-view .office-switch-card {
    border-color: rgba(148,163,184,.12);
    background: rgba(255,255,255,.025);
    color: #9badc4;
}

#app-view .office-section-heading.divided,
#app-view .office-form-actions { border-color: rgba(148,163,184,.10); }
#app-view .office-logo-preview {
    border-color: rgba(148,163,184,.22);
    background: #0a1728;
}
#app-view .office-logo-preview.has-image { background: #fff; }
#app-view .office-logo-placeholder strong {
    background: #17263b;
    color: #9fb2cb;
}
#app-view .office-file-button {
    background: linear-gradient(135deg, #2f7df4, #2168d8);
}
#app-view .office-document-card dd,
#app-view .office-switch-card strong { color: #d9e4f1; }
#app-view .office-switch-card span { color: #8296b1; }

/* Modais */
#app-view .modal-backdrop {
    background: rgba(1, 7, 17, .72);
    backdrop-filter: blur(8px);
}

#app-view .modal {
    border: 1px solid rgba(148,163,184,.15);
    background: #0d192b;
    color: #edf4fc;
    box-shadow: 0 30px 90px rgba(0,0,0,.46);
}

#app-view .modal-header {
    border-bottom-color: rgba(148,163,184,.12);
    background: rgba(13,25,43,.97);
}
#app-view .modal-header h3 { color: #f4f8fd; }
#app-view .modal-header p { color: #8296b1; }
#app-view .modal-actions,
#app-view .modal-footer { border-color: rgba(148,163,184,.10) !important; }

/* Estados e feedback */
#app-view .empty-state-icon {
    background: rgba(47,125,244,.12);
    color: #72a9ff;
}
#app-view .empty-state h2 { color: #f4f8fd; }
#app-view .empty-state p,
#app-view .table-empty { color: #7f93af; }

#app-view .page-loading { color: #8094af; }
#app-view .spinner {
    border-color: rgba(47,125,244,.18);
    border-top-color: #4b94ff;
}

#app-view .toast {
    border-color: rgba(148,163,184,.16);
    background: #101e31;
    color: #dbe6f3;
    box-shadow: 0 18px 42px rgba(0,0,0,.30);
}

/* Scrollbars */
#app-view *::-webkit-scrollbar { width: 9px; height: 9px; }
#app-view *::-webkit-scrollbar-track { background: transparent; }
#app-view *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(148,163,184,.24);
    background-clip: padding-box;
}
#app-view *::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.36); background-clip: padding-box; }

@media (max-width: 900px) {
    #app-view .sidebar { box-shadow: 26px 0 70px rgba(0,0,0,.45); }
    #app-view .topbar { padding-inline: 16px; }
    #app-view .page-content { padding: 22px 18px 32px; }
}

@media (max-width: 640px) {
    #app-view .hero-row h2 { font-size: 25px; }
    #app-view .metric-card { min-height: 136px; }
}