/*
 * FIKBELLA Jeans — operational theme.
 * Visual language adapted from the supplied reference system while preserving
 * the ERP's existing components, semantics and responsive behaviour.
 */

:root {
    --app-font: Inter, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fik-navy: #111d2f;
    --fik-navy-2: #192b44;
    --fik-gold: #d5a442;
    --fik-gold-soft: #fbf3df;
    --fik-paper: #f4f6f9;
    --fik-surface: #ffffff;
    --fik-surface-soft: #fafbfc;
    --fik-ink: #172033;
    --fik-muted: #718096;
    --fik-border: #e6e9ef;
    --fik-border-strong: #dfe3e9;
    --fik-shadow: 0 10px 35px rgba(26, 39, 68, .07);
    --fik-radius: 15px;
    --sidebar-width: 270px;
    --sidebar-collapsed: 76px;
    --page: var(--fik-paper);
    --surface: var(--fik-surface);
    --slate-900: var(--fik-ink);
    --slate-700: #4f5b6f;
    --slate-500: var(--fik-muted);
    --slate-200: var(--fik-border);
    --blue-700: var(--fik-navy);
    --blue-600: var(--fik-navy-2);
    --blue-500: #294565;
    --blue-100: var(--fik-gold-soft);
    --kwn-color-primary: var(--fik-navy-2);
    --kwn-color-primary-hover: var(--fik-navy);
    --kwn-color-bg: var(--fik-paper);
    --kwn-color-border: var(--fik-border);
    --kwn-color-border-strong: var(--fik-border-strong);
    --kwn-color-text: var(--fik-ink);
    --kwn-color-muted: var(--fik-muted);
    --kwn-color-heading: var(--fik-ink);
    --kwn-radius-md: 9px;
    --kwn-radius-lg: var(--fik-radius);
    --kwn-shadow-sm: var(--fik-shadow);
}

body.app-shell {
    --action-primary: var(--fik-navy-2);
    --action-primary-hover: var(--fik-navy);
    --action-primary-soft: var(--fik-gold-soft);
    --final-primary: var(--fik-navy-2);
    --final-primary-hover: var(--fik-navy);
    --final-primary-soft: var(--fik-gold-soft);
    --final-page: var(--fik-paper);
    --final-surface: var(--fik-surface);
    --final-surface-soft: var(--fik-surface-soft);
    --final-surface-muted: #f1f3f7;
    --final-border: var(--fik-border);
    --final-border-strong: var(--fik-border-strong);
    --final-text: var(--fik-ink);
    --final-muted: var(--fik-muted);
    --final-radius: 9px;
    --final-control: 43px;
    --final-shadow-raised: var(--fik-shadow);
    --ui-font-family: Inter, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--fik-ink);
    background: var(--fik-paper);
}

body.app-shell[data-module] .main-content {
    background: var(--fik-paper) !important;
}

body.app-shell .sidebar {
    width: var(--sidebar-width);
    padding: 24px 18px;
    background: linear-gradient(180deg, var(--fik-navy), #0d1726) !important;
    box-shadow: none;
}

body.app-shell .brand {
    min-height: 76px;
    margin-bottom: 14px;
    padding: 4px 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

body.app-shell .client-sidebar-logo {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .18));
}

body.app-shell .client-brand-caption,
body.app-shell .sidebar .nav-label {
    color: #8393a8 !important;
}

body.app-shell .sidebar-section + .sidebar-section {
    border-top-color: rgba(255, 255, 255, .07);
}

body.app-shell .sidebar .nav-link {
    min-height: 44px;
    gap: 13px;
    padding: 10px 13px;
    border-radius: 11px;
    color: #b8c3d2 !important;
    font-size: .84rem;
    font-weight: 500;
}

body.app-shell .sidebar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .065) !important;
}

body.app-shell .sidebar .nav-link.active {
    border-color: rgba(213, 164, 66, .2) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
    box-shadow: inset 3px 0 0 var(--fik-gold);
}

body.app-shell .sidebar .nav-link.active::before {
    display: none;
}

body.app-shell .sidebar .nav-link i {
    color: #8798ad !important;
}

body.app-shell .sidebar .nav-link:hover i,
body.app-shell .sidebar .nav-link.active i {
    color: var(--fik-gold) !important;
}

body.app-shell .sidebar .nav-link.active i {
    border-color: rgba(213, 164, 66, .22) !important;
    background: rgba(213, 164, 66, .12) !important;
    box-shadow: none !important;
}

/* Paleta FIKBELLA: marinho e dourado nos elementos estruturais. */
html body.app-shell[data-module] {
    --kwn-color-primary: var(--fik-navy-2);
    --kwn-color-primary-hover: var(--fik-navy);
    --final-primary: var(--fik-navy-2);
    --final-primary-hover: var(--fik-navy);
    --final-primary-soft: var(--fik-gold-soft);
    --action-primary: var(--fik-navy-2);
    --action-primary-hover: var(--fik-navy);
    --action-success: var(--fik-navy-2);
    --module-primary: var(--fik-navy-2);
    --module-primary-rgb: 25, 43, 68;
}

body.app-shell[data-module="store"] .store-shortcut::before {
    background: var(--fik-gold) !important;
    opacity: 1;
}

body.app-shell[data-module="store"] .store-shortcut-icon {
    color: var(--fik-navy-2) !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell[data-module="store"] .store-shortcut.is-primary {
    border-color: var(--fik-gold) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--fik-navy-2), var(--fik-navy)) !important;
    box-shadow: 0 15px 34px rgba(17, 29, 47, .2) !important;
}

body.app-shell[data-module="store"] .store-shortcut.is-primary .store-shortcut-icon {
    color: var(--fik-gold) !important;
    background: rgba(213, 164, 66, .14) !important;
}

body.app-shell[data-module="store"] .store-operation-summary strong.text-success,
body.app-shell :where(.text-success, .finance-value-column.is-income strong) {
    color: #9a6b12 !important;
}

body.app-shell :where(.badge.text-bg-success, .critical-access-item.is-granted > i, .critical-access-item .is-granted) {
    border-color: #e6cf9a !important;
    color: #72500e !important;
    background: var(--fik-gold-soft) !important;
}

/* O menu do usuário mantém largura própria mesmo no cabeçalho compacto. */
body.app-shell .topbar .dropdown-menu {
    width: max-content;
    min-width: 210px !important;
    max-width: calc(100vw - 24px);
    padding: 8px;
}

body.app-shell .topbar .dropdown-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    line-height: 1.25;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

body.app-shell .topbar .dropdown-item i {
    width: 18px;
    flex: 0 0 18px;
    margin-right: 0 !important;
    text-align: center;
}

@media (max-width: 359.98px) {
    body.app-shell .topbar .quick-command {
        display: none !important;
    }

    body.app-shell .topbar-actions {
        gap: 4px;
    }

    body.app-shell .topbar-title {
        max-width: calc(100vw - 132px);
    }
}

body.app-shell .sidebar .nav-counter {
    border-color: rgba(213, 164, 66, .28);
    color: #f6d894;
    background: rgba(213, 164, 66, .15);
}

body.app-shell .sidebar-user {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
}

body.app-shell .sidebar-avatar,
body.app-shell .topbar-avatar {
    background: var(--fik-navy-2);
}

body.app-shell .main-content {
    margin-left: var(--sidebar-width);
}

body.sidebar-collapsed.app-shell .main-content {
    margin-left: var(--sidebar-collapsed);
}

body.app-shell[data-module] .topbar {
    min-height: 78px;
    padding: 0 34px;
    border-bottom: 1px solid var(--fik-border);
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

body.app-shell .topbar-title {
    color: var(--fik-ink);
    font-size: 1.08rem;
    font-weight: 700 !important;
}

body.app-shell .topbar-kicker {
    color: var(--fik-muted);
    font-size: .72rem;
}

body.app-shell :where(.shell-toggle, .quick-command, .topbar-date) {
    min-height: 41px;
    border-color: var(--fik-border);
    border-radius: 9px;
    color: #526077;
    background: #fff;
}

body.app-shell :where(.shell-toggle, .quick-command):hover {
    border-color: #d4d9e1;
    color: var(--fik-navy-2);
    background: var(--fik-surface-soft);
}

body.app-shell .content-wrap {
    max-width: 1600px;
    margin-inline: auto;
    padding: 30px 34px 60px;
}

body.app-shell :where(.card, .data-card, .management-panel, .purchase-panel, .settings-panel, .finance-card, .stock-card) {
    border-color: var(--fik-border) !important;
    border-radius: var(--fik-radius) !important;
    background: #fff;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell :where(.card-header, .card-footer) {
    border-color: var(--fik-border) !important;
    background: #fff;
}

body.app-shell :where(.card-body, .table-toolbar, .responsive-toolbar, .finance-card-heading, .stock-transfer-head, .stock-grade-section-head) {
    padding: 20px;
}

body.app-shell :where(
    .filter-toolbar,
    .filter-bar,
    .management-toolbar,
    .stock-filter-panel,
    .purchase-filter-panel
) {
    border-color: var(--fik-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell :where(.table-toolbar, .responsive-toolbar) {
    box-shadow: none !important;
}

body.app-shell .product-catalog-card .compact-filter-bar {
    border: 1px solid var(--fik-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.app-shell :where(.btn, .kwn-btn) {
    min-height: 42px;
    border-radius: 9px !important;
    box-shadow: none !important;
}

body.app-shell :where(.btn-primary, .kwn-btn-primary, .primary-action) {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

body.app-shell :where(.btn-primary, .kwn-btn-primary, .primary-action):hover,
body.app-shell :where(.btn-primary, .kwn-btn-primary, .primary-action):focus {
    border-color: var(--fik-navy) !important;
    background: var(--fik-navy) !important;
}

body.app-shell[data-module] :where(.btn-primary, .kwn-btn-primary, .primary-action) {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

body.app-shell[data-module] :where(.btn-primary, .kwn-btn-primary, .primary-action):hover,
body.app-shell[data-module] :where(.btn-primary, .kwn-btn-primary, .primary-action):focus {
    border-color: var(--fik-navy) !important;
    background: var(--fik-navy) !important;
}

body.app-shell :where(.btn-outline-primary, .kwn-btn-secondary) {
    border-color: #cfd6df !important;
    color: var(--fik-navy-2) !important;
    background: #fff !important;
}

body.app-shell :where(.btn-outline-primary, .kwn-btn-secondary):hover {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

body.app-shell :where(.form-control, .form-select, .input-group-text) {
    min-height: 43px;
    border-color: var(--fik-border-strong);
    border-radius: 9px;
    background-color: #fff;
}

body.app-shell :where(.form-control:hover, .form-select:hover) {
    border-color: #cbd2dc;
}

body.app-shell :where(.form-control:focus, .form-select:focus) {
    border-color: var(--fik-gold);
    box-shadow: 0 0 0 .22rem rgba(213, 164, 66, .14);
}

body.app-shell :where(.form-label, .filter-label) {
    color: #4e596b !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
}

body.app-shell .table-responsive {
    border: 1px solid var(--fik-border);
    border-radius: 12px;
    background: #fff;
}

body.app-shell .table thead th {
    padding: 13px 12px;
    border-bottom-color: var(--fik-border);
    color: #8792a3;
    background: var(--fik-surface-soft);
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase;
}

body.app-shell .table tbody td {
    padding: 13px 12px;
    border-bottom-color: #edf0f4;
    color: #354055;
}

body.app-shell .table tbody tr:hover {
    background: #fafbfc;
}

body.app-shell :where(.badge, .status-badge, .kwn-badge, .record-count, .permission-chip) {
    min-height: 24px;
    padding: 5px 9px;
    border-radius: 999px !important;
}

body.app-shell :where(.nav-tabs, .operation-tabs, .inner-operation-tabs, .settings-tabs, .product-inner-tabs, .finance-inner-tabs, .pdv-panel-tabs) .nav-link.active {
    border-color: var(--fik-navy-2) !important;
    color: var(--fik-navy-2) !important;
}

body.app-shell :where(.eyebrow, .dashboard-brief-kicker, .module-kicker, .page-kicker) {
    color: #a6761d !important;
}

body.app-shell :where(.dashboard-metric, .dashboard-focus-panel, .dashboard-shortcuts-panel, .dashboard-activity-panel) {
    border-color: var(--fik-border);
    border-radius: var(--fik-radius);
    background: #fff;
    box-shadow: var(--fik-shadow);
}

body.app-shell .dashboard-brief {
    border-bottom-color: var(--fik-border);
}

body.app-shell .dashboard-metric-icon,
body.app-shell .dashboard-count {
    border-radius: 9px;
}

body.app-shell :where(.alert, .modal-content, .dropdown-menu, .offcanvas) {
    border-color: var(--fik-border);
    border-radius: 12px;
    box-shadow: var(--fik-shadow);
}

body.app-shell .dropdown-item:active,
body.app-shell .dropdown-item.active {
    color: #fff;
    background: var(--fik-navy-2);
}

body.app-shell a:not(.btn, .nav-link, .brand, .mobile-nav-link) {
    text-decoration-color: rgba(25, 43, 68, .28);
}

/* Complete module system -------------------------------------------------- */

html body.app-shell[data-module] .content-wrap :where(
    .data-card,
    .management-panel,
    .purchase-panel,
    .finance-list-card,
    .settings-panel,
    .role-profile-card,
    .category-form-card,
    .category-list-card,
    .stock-initial-card,
    .stock-initial-history-card,
    .stock-label-transfer-card,
    .stock-transfer-stock-details,
    .shipping-card,
    .shipping-scan-panel,
    .shipping-pick-item,
    .report-stock-size-dialog
) {
    border: 1px solid var(--fik-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module] :where(
    .stock-kpi,
    .management-strip > div,
    .report-summary-strip > div,
    .settings-usage-card,
    .deposit-usage-item,
    .category-insight-card,
    .shipping-kpi,
    .purchase-preview-grid > div,
    .purchase-receiving-summary > div,
    .finance-snapshot > div
) {
    border: 1px solid var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module] :where(
    .stock-grade-workbench,
    .stock-initial-workbench,
    .stock-transfer-workspace,
    .stock-grade-secondary,
    .stock-grade-management,
    .stock-grade-scan-panel,
    .stock-grade-camera-panel,
    .stock-transfer-scan-block,
    .stock-transfer-location-panel,
    .settings-terminal-card,
    .settings-cash-policy,
    .settings-wholesale-status,
    .settings-brand-grid,
    .user-permission-editor,
    .user-shortcut-editor,
    .permission-legend,
    .report-stock-distribution,
    .order-item,
    .shipping-stepper,
    .shipping-process-hero,
    .shipping-progress-ring
) {
    border-color: var(--fik-border) !important;
    border-radius: 12px !important;
}

body.app-shell[data-module] :where(
    .stock-grade-workbench,
    .stock-initial-workbench,
    .stock-grade-management,
    .stock-grade-secondary,
    .stock-grade-scan-panel,
    .stock-grade-camera-panel,
    .stock-transfer-scan-block,
    .stock-transfer-location-panel,
    .settings-terminal-card,
    .settings-cash-policy,
    .settings-wholesale-status,
    .settings-brand-grid,
    .user-permission-editor,
    .user-shortcut-editor,
    .permission-legend,
    .report-stock-distribution,
    .shipping-stepper
) {
    background: #fff !important;
}

body.app-shell[data-module] :where(
    .stock-grade-workbench-head,
    .stock-grade-management-head,
    .stock-initial-head,
    .stock-initial-history-head,
    .stock-transfer-head,
    .stock-transfer-queue-head,
    .settings-panel-head,
    .finance-card-heading,
    .panel-header
) {
    border-bottom-color: var(--fik-border) !important;
    background: #fff !important;
}

/* Compact filters become the same calm white filter bar used by the reference. */
body.app-shell[data-module] .compact-filter-bar,
body.app-shell[data-module] :where(.finance-filter-panel, .users-filter, .management-filter-grid) {
    border: 1px solid var(--fik-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module] .data-card .compact-filter-bar,
body.app-shell[data-module] .purchase-panel .compact-filter-bar {
    box-shadow: none !important;
}

body.app-shell[data-module] :where(.compact-filter-advanced, .finance-filter-disclosure) {
    border-color: var(--fik-border) !important;
    background: var(--fik-surface-soft) !important;
}

/* Tabs retain all workflows, but use the reference's restrained segmented control. */
body.app-shell[data-module] :where(
    .operation-tabs,
    .inner-operation-tabs,
    .settings-tabs,
    .users-tabs,
    .product-inner-tabs,
    .finance-inner-tabs,
    .pdv-panel-tabs,
    .category-tabs-nav
) {
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid var(--fik-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module] :where(
    .operation-tabs,
    .inner-operation-tabs,
    .settings-tabs,
    .users-tabs,
    .product-inner-tabs,
    .finance-inner-tabs,
    .pdv-panel-tabs,
    .category-tabs-nav
) :where(.nav-link, button) {
    min-height: 38px;
    border: 0 !important;
    border-radius: 9px !important;
    color: #667287 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell[data-module] :where(
    .operation-tabs,
    .inner-operation-tabs,
    .settings-tabs,
    .users-tabs,
    .product-inner-tabs,
    .finance-inner-tabs,
    .pdv-panel-tabs,
    .category-tabs-nav
) :where(.nav-link.active, button.active, button[aria-selected="true"]) {
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

/* Finance follows the reference: two light cards and one dark balance card. */
body.app-shell[data-module="finance"] .finance-summary-grid {
    gap: 14px;
}

body.app-shell[data-module="finance"] .finance-summary-card {
    min-height: 108px;
    padding: 20px !important;
    border: 1px solid var(--fik-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module="finance"] .finance-summary-card:is(.is-balance, .is-balance-positive, .is-balance-negative) {
    border-color: var(--fik-navy) !important;
    color: #fff !important;
    background: var(--fik-navy) !important;
}

body.app-shell[data-module="finance"] .finance-summary-card:is(.is-balance, .is-balance-positive, .is-balance-negative) :where(span, strong, small, i) {
    color: #fff !important;
}

body.app-shell[data-module="finance"] .finance-summary-card.is-income i {
    color: #2d9c72 !important;
}

body.app-shell[data-module="finance"] .finance-summary-card.is-expense i {
    color: #d65d79 !important;
}

body.app-shell[data-module="finance"] :where(.finance-overview-panel, .finance-summary-grid) {
    overflow: visible;
}

body.app-shell[data-module="finance"] .finance-source-tabs {
    border-top-color: var(--fik-border) !important;
}

body.app-shell[data-module="finance"] .finance-cash-strip {
    border-color: var(--fik-border) !important;
    border-radius: 12px;
    background: var(--fik-surface-soft) !important;
}

/* Stock and receiving */
body.app-shell[data-module="stock"] .stock-kpi {
    min-height: 96px;
    padding: 16px !important;
}

body.app-shell[data-module="stock"] .stock-kpi strong {
    color: var(--fik-ink) !important;
    font-size: 1.25rem;
}

body.app-shell[data-module="stock"] :where(.stock-grade-pill, .stock-transfer-status, .stock-grade-code) {
    border-color: #ead9ad !important;
    color: #8a651c !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell[data-module="stock"] :where(.stock-grade-summary-item, .stock-transfer-summary > div, .stock-initial-meta > div) {
    border-color: var(--fik-border) !important;
    border-radius: 11px !important;
    background: var(--fik-surface-soft) !important;
}

body.app-shell[data-module="stock"] .stock-transfer-step.is-current {
    border-color: var(--fik-navy-2) !important;
    color: var(--fik-navy-2) !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell[data-module="purchases"] :where(.purchase-product-main, .purchase-preview-grid > div, .purchase-receiving-summary > div) {
    border-color: var(--fik-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
}

/* Product catalog, partners, users, settings and reports. */
body.app-shell[data-module="catalog"] .product-list-header {
    color: #8792a3 !important;
    background: var(--fik-surface-soft) !important;
}

body.app-shell[data-module="catalog"] .product-catalog-item {
    border-bottom-color: #edf0f4 !important;
    background: #fff !important;
}

body.app-shell[data-module="catalog"] .product-catalog-item:hover {
    background: var(--fik-surface-soft) !important;
}

body.app-shell[data-module="catalog"] :where(.product-form-section, .product-catalog-settings, .product-gallery-editor) {
    border-color: var(--fik-border) !important;
}

body.app-shell[data-module="partners"] :where(.management-strip > div, .deposit-usage-item, .supplier-summary-card) {
    border-color: var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module="system"] :where(.settings-terminal-card, .settings-usage-card, .role-profile-card) {
    border-color: var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module="system"] :where(.permission-chip, .settings-wholesale-status, .settings-cash-policy) {
    border-color: #e8d6aa !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell[data-module="reports"] :where(.report-summary-strip > div, .report-stock-distribution > button, .report-stock-size-dialog__content section) {
    border-color: var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module="reports"] :where(.progress-bar, .bg-gold) {
    background: var(--fik-gold) !important;
}

/* Orders and shipping keep semantic states but lose the old teal gradients. */
body.app-shell[data-module="orders"] :where(.shipping-hero, .shipping-process-hero, .shipping-progress-ring) {
    color: #fff !important;
    background: linear-gradient(145deg, var(--fik-navy), #0d1726) !important;
}

body.app-shell[data-module="orders"] .shipping-kpi.is-active {
    border-color: var(--fik-gold) !important;
    background: var(--fik-gold-soft) !important;
    box-shadow: 0 0 0 3px rgba(213, 164, 66, .14), var(--fik-shadow) !important;
}

body.app-shell[data-module="orders"] .shipping-kpi.is-active::after {
    background: var(--fik-gold) !important;
}

body.app-shell[data-module="orders"] :where(.shipping-timeline .done, .shipping-stepper .is-done) {
    color: #17694f !important;
    background: #edf8f3 !important;
}

/* Modal and form language is shared by every module. */
body.app-shell .modal-content {
    overflow: hidden;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(10, 20, 35, .22) !important;
}

body.app-shell :where(.modal-header, .modal-footer) {
    padding: 18px 22px;
    border-color: var(--fik-border) !important;
    background: #fff !important;
}

body.app-shell .modal-body {
    padding: 22px;
    background: #fff;
}

body.app-shell .modal-title {
    color: var(--fik-ink);
    font-weight: 700 !important;
}

body.app-shell :where(.info-callout, .form-section-note, .cash-close-blind-note, .sale-receipt-next-step) {
    border-color: #ead9ad !important;
    border-radius: 12px !important;
    color: #6f5623 !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell :where(.empty-state, .empty-action, .table-empty-filter, .stock-transfer-empty, .pdv-cash-modal-empty, .pos-empty) {
    border-color: var(--fik-border) !important;
    border-radius: 14px !important;
    color: var(--fik-muted) !important;
    background: var(--fik-surface-soft) !important;
}

body.app-shell :where(.pagination .page-link, .page-size-control) {
    border-color: var(--fik-border) !important;
    color: var(--fik-navy-2) !important;
    background: #fff !important;
}

body.app-shell .pagination .active .page-link {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

/* Point of sale: same visual system, with touch dimensions preserved. */
body.app-shell[data-module="store"] :where(.pdv-workstation-hero, .pdv-app-topbar) {
    color: #fff !important;
    background: linear-gradient(145deg, var(--fik-navy), #0d1726) !important;
}

body.app-shell[data-module="store"] .pdv-terminal-badge {
    border-color: rgba(213, 164, 66, .3) !important;
    color: #f2cf82 !important;
    background: rgba(213, 164, 66, .12) !important;
}

body.app-shell[data-module="store"] .pdv-app-body {
    background: var(--fik-paper) !important;
}

body.app-shell[data-module="store"] :where(
    .pdv-cart-inner,
    .pdv-payment-inner,
    .pdv-scan-panel,
    .pdv-client-section,
    .pdv-payment-panel,
    .cash-action-card,
    .sale-receipt-status,
    .sale-loose-labels-step
) {
    border-color: var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell[data-module="store"] .pos-cart-item {
    border-color: var(--fik-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
}

body.app-shell[data-module="store"] .pos-cart-item.is-selected {
    border-color: var(--fik-gold) !important;
    background: #fffdf7 !important;
    box-shadow: 0 0 0 3px rgba(213, 164, 66, .12) !important;
}

body.app-shell[data-module="store"] .pdv-payment-choice {
    border-color: var(--fik-border) !important;
    border-radius: 11px !important;
    color: var(--fik-navy-2) !important;
    background: #fff !important;
}

body.app-shell[data-module="store"] .pdv-payment-choice:hover,
body.app-shell[data-module="store"] .pdv-payment-choice.is-active {
    border-color: var(--fik-gold) !important;
    color: var(--fik-navy) !important;
    background: var(--fik-gold-soft) !important;
}

body.app-shell[data-module="store"] :where(.pdv-finish-button, .pdv-open-button) {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background: var(--fik-navy-2) !important;
    box-shadow: none !important;
}

body.app-shell[data-module="store"] .pdv-grand-total {
    border-color: #ead9ad !important;
    border-radius: 12px !important;
    color: var(--fik-navy) !important;
    background: var(--fik-gold-soft) !important;
}

/* Final cascade authority for legacy module rules that deliberately used
   high-specificity flat styling. This keeps the reference language uniform. */
html body.app-shell[data-module] main.main-content .content-wrap .stock-kpi,
html body.app-shell[data-module] main.main-content .content-wrap .data-card,
html body.app-shell[data-module] main.main-content .content-wrap .management-panel,
html body.app-shell[data-module] main.main-content .content-wrap .purchase-panel,
html body.app-shell[data-module] main.main-content .content-wrap .finance-list-card,
html body.app-shell[data-module] main.main-content .content-wrap .finance-filter-panel,
html body.app-shell[data-module] main.main-content .content-wrap .settings-panel,
html body.app-shell[data-module] main.main-content .content-wrap .role-profile-card,
html body.app-shell[data-module] main.main-content .content-wrap .category-list-card,
html body.app-shell[data-module] main.main-content .content-wrap .category-form-card,
html body.app-shell[data-module] main.main-content .content-wrap .stock-grade-workbench,
html body.app-shell[data-module] main.main-content .content-wrap .stock-initial-workbench,
html body.app-shell[data-module] main.main-content .content-wrap .stock-label-transfer-card,
html body.app-shell[data-module] main.main-content .content-wrap .stock-transfer-stock-details {
    border-color: var(--fik-border) !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module] main.main-content .content-wrap :where(
    .operation-tabs,
    .inner-operation-tabs,
    .settings-tabs,
    .users-tabs,
    .product-inner-tabs,
    .finance-inner-tabs,
    .pdv-panel-tabs
) {
    border-color: var(--fik-border) !important;
    border-radius: 13px !important;
    background-color: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module] main.main-content .content-wrap .operation-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .operation-tabs button.active,
html body.app-shell[data-module] main.main-content .content-wrap .inner-operation-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .settings-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .users-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .product-inner-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .finance-inner-tabs .nav-link.active,
html body.app-shell[data-module] main.main-content .content-wrap .pdv-panel-tabs .nav-link.active {
    border-color: var(--fik-navy-2) !important;
    color: #fff !important;
    background-color: var(--fik-navy-2) !important;
}

html body.app-shell[data-module="finance"] main.main-content .finance-workspace > .finance-overview-panel .finance-summary-grid .finance-summary-card {
    border: 1px solid var(--fik-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module="finance"] main.main-content .finance-workspace > .finance-overview-panel .finance-summary-grid .finance-summary-card:is(.is-balance, .is-balance-positive, .is-balance-negative) {
    border-color: var(--fik-navy) !important;
    color: #fff !important;
    background: var(--fik-navy) !important;
}

html body.app-shell[data-module="finance"] main.main-content .finance-movement-state {
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid var(--fik-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module="finance"] main.main-content .finance-movement-state a {
    min-height: 38px;
    padding: 9px 14px;
    border: 0 !important;
    border-radius: 9px !important;
    color: #667287 !important;
    background: transparent !important;
}

html body.app-shell[data-module="finance"] main.main-content .finance-movement-state a.active {
    color: #fff !important;
    background: var(--fik-navy-2) !important;
}

body.app-shell .content-wrap:has(#stockTabs) :where(
    .card,
    .stock-lot-label-panel,
    .stock-transfer-workbench,
    .stock-label-transfer-card,
    .stock-grade-piece-panel,
    .stock-grade-scan-panel,
    .stock-grade-camera-panel,
    .stock-lot-label-group,
    .pdv-modal-section
) {
    border-color: var(--fik-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell .content-wrap:has(#stockTabs) :where(
    .stock-kpi,
    .stock-grade-dashboard > div,
    .stock-transfer-dashboard > div,
    .stock-lot-label-kpi
) {
    border-color: var(--fik-border) !important;
    border-left-color: var(--fik-gold) !important;
    border-radius: 15px !important;
    box-shadow: var(--fik-shadow) !important;
}

body.app-shell .content-wrap:has(#stockTabs) #stockTabs.operation-tabs {
    border-color: var(--fik-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module="store"] .pdv-workstation-hero,
html body.app-shell[data-module="store"] .pdv-app .pdv-app-topbar {
    border-color: var(--fik-navy) !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--fik-navy), #0d1726) !important;
}

html body.app-shell[data-module="store"] .pdv-app :where(
    .pdv-cart-inner,
    .pdv-payment-inner,
    .pdv-scan-panel,
    .pdv-client-section,
    .pdv-payment-panel
) {
    border: 1px solid var(--fik-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: var(--fik-shadow) !important;
}

html body.app-shell[data-module="store"] .pdv-app .pdv-grand-total {
    border: 1px solid #ead9ad !important;
    border-radius: 12px !important;
    color: var(--fik-navy) !important;
    background: var(--fik-gold-soft) !important;
}

/* Tenant authentication */
.login-page {
    min-height: 100vh;
    padding: 24px;
    color: var(--fik-ink);
    background: var(--fik-paper);
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.login-page :where(button, input, select, textarea) {
    font-family: inherit;
}

.login-shell {
    width: min(1120px, 100%);
    min-height: 650px;
    border: 1px solid var(--fik-border);
    border-radius: 26px;
    box-shadow: 0 28px 75px rgba(26, 39, 68, .15);
    grid-template-columns: 1.08fr .92fr;
}

.login-showcase {
    padding: 50px;
    background: linear-gradient(145deg, var(--fik-navy), #0d1726);
}

.login-showcase::before {
    border-color: rgba(213, 164, 66, .13);
}

.login-showcase::after {
    border-color: rgba(213, 164, 66, .08);
}

.login-brand-logo {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18));
}

.client-login-copy small {
    color: rgba(255, 255, 255, .58);
}

.login-pitch h1 {
    max-width: 470px;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.045em;
}

.login-pitch p {
    color: #bac6d5;
}

.login-feature {
    color: #dbe3ed;
}

.login-feature i {
    color: #f0c76f;
    background: rgba(213, 164, 66, .12);
}

.login-form-panel {
    padding: 58px;
}

.login-form-wrap h2 {
    color: var(--fik-ink);
    font-size: 1.65rem;
    font-weight: 800;
}

.login-form-wrap > p {
    color: var(--fik-muted);
}

.login-page .form-label {
    color: #4e596b;
    font-size: .72rem;
    font-weight: 700;
}

.login-input .form-control {
    height: 49px;
    border-color: var(--fik-border-strong);
    border-radius: 9px;
    font-size: .84rem;
}

.login-input .form-control:focus {
    border-color: var(--fik-gold);
    box-shadow: 0 0 0 .22rem rgba(213, 164, 66, .14);
}

.login-submit {
    min-height: 49px;
    border-color: var(--fik-navy-2) !important;
    border-radius: 9px;
    background: var(--fik-navy-2) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.login-submit:hover,
.login-submit:focus {
    border-color: var(--fik-navy) !important;
    background: var(--fik-navy) !important;
}

.login-security a:hover {
    color: var(--fik-navy-2);
}

/* Interface concisa: preserva funções e remove explicações repetidas. */
body.app-shell .quick-command span,
body.app-shell :where(
    .table-toolbar .toolbar-copy h2,
    .table-toolbar .toolbar-copy p,
    .responsive-toolbar .toolbar-copy p,
    .card-titlebar p,
    .settings-panel-head p,
    .finance-card-heading p,
    .stock-grade-workbench-head p,
    .stock-grade-management-head p,
    .stock-transfer-head p
) {
    display: none !important;
}

body.app-shell :where(.eyebrow, .module-kicker, .page-kicker, .stock-grade-eyebrow) {
    display: none !important;
}

body.app-shell .dashboard-primary-grid.dashboard-primary-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

body.app-shell .dashboard-metric {
    min-height: 88px;
}

.login-shell {
    min-height: 560px;
}

@media (max-width: 991.98px) {
    body.app-shell .main-content,
    body.sidebar-collapsed.app-shell .main-content {
        margin-left: 0;
    }

    body.app-shell[data-module] .topbar {
        min-height: 72px;
        padding: 10px 18px;
    }

    body.app-shell .content-wrap {
        padding: 20px 18px 86px;
    }
}

@media (max-width: 767.98px) {
    .login-page {
        padding: 0;
        background: #fff;
    }

    .login-shell {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: 1fr;
    }

    .login-showcase {
        min-height: 285px;
        padding: 30px;
    }

    .login-form-panel {
        padding: 38px 28px;
    }

    body.app-shell .content-wrap {
        padding: 16px 12px 88px;
    }

    body.app-shell :where(.card-body, .table-toolbar, .responsive-toolbar, .finance-card-heading, .stock-transfer-head, .stock-grade-section-head) {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    .login-page * {
        scroll-behavior: auto !important;
    }
}

/* FIKBELLA Jeans: login da loja */
body.client-login-page {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(20px, 3vw, 38px);
    overflow-x: hidden;
    place-items: center;
    background:
        radial-gradient(circle at 8% 10%, rgba(213, 164, 66, .13), transparent 29%),
        radial-gradient(circle at 92% 88%, rgba(17, 28, 49, .08), transparent 28%),
        #f3f1ec;
}

.client-login-page .login-shell {
    width: min(1180px, 100%);
    min-height: min(700px, calc(100svh - 48px));
    overflow: hidden;
    border: 1px solid rgba(17, 28, 49, .09);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(17, 28, 49, .17);
    grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr);
}

.client-login-page .login-showcase {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: clamp(42px, 5vw, 64px);
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(7, 21, 40, .6), rgba(6, 18, 34, .82)),
        url('../img/login-denim-bg.webp') center / cover no-repeat,
        linear-gradient(150deg, #14233d 0%, #0e192c 57%, #0a1322 100%);
}

.client-login-page .login-showcase::before {
    top: -180px;
    right: -150px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(213, 164, 66, .15);
}

.client-login-page .login-showcase::after {
    right: -95px;
    bottom: -170px;
    width: 390px;
    height: 390px;
    border: 72px solid rgba(213, 164, 66, .055);
}

.client-login-page .login-showcase-glow {
    position: absolute;
    top: 38%;
    left: -120px;
    z-index: -1;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(213, 164, 66, .08);
    filter: blur(2px);
}

.client-login-page .login-brand.client-login-brand {
    position: relative;
    z-index: 1;
    gap: 17px;
}

.client-login-page .login-brand-logo.client-login-logo {
    width: 88px;
    height: 85px;
    flex: 0 0 88px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 19px;
    object-fit: cover;
    background: #aaa;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}

.client-login-page .client-login-copy {
    gap: 5px;
}

.client-login-page .client-login-copy strong {
    font-size: 1.05rem;
    letter-spacing: .075em;
}

.client-login-page .client-login-copy strong span:last-child {
    color: #d5a442;
}

.client-login-page .client-login-copy small {
    color: rgba(255, 255, 255, .56);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-login-page .login-pitch {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding: clamp(52px, 8vh, 86px) 0 0;
}

.client-login-page .login-kicker,
.client-login-page .login-form-kicker {
    display: block;
    margin-bottom: 14px;
    color: #e3b95f;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.client-login-page .login-pitch h1 {
    max-width: none;
    margin: 0 0 17px;
    color: #fff;
    font-size: clamp(3rem, 5.4vw, 4.65rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
}

.client-login-page .login-pitch h1 > span {
    display: block;
}

.client-login-page .login-title-dot {
    display: inline;
    color: #d5a442;
}

.client-login-page .login-pitch > p {
    max-width: 380px;
    margin: 0 0 45px;
    color: rgba(233, 239, 247, .72);
    font-size: .96rem;
    line-height: 1.72;
}

.client-login-page .login-features {
    display: grid;
    gap: 11px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-login-page .login-feature {
    min-width: 0;
    min-height: 54px;
    align-items: center;
    flex-direction: row;
    gap: 11px;
    padding: 0 10px 0 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    color: #fff;
    background: transparent;
    backdrop-filter: none;
}

.client-login-page .login-feature:last-child {
    border-right: 0;
}

.client-login-page .login-feature i {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid rgba(213, 164, 66, .6);
    border-radius: 13px;
    color: #e7c372;
    background: rgba(7, 21, 40, .52);
    font-size: 1rem;
}

.client-login-page .login-feature > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.client-login-page .login-feature strong {
    color: #fff;
    font-size: .8rem;
    font-weight: 750;
}

.client-login-page .login-feature small {
    overflow: hidden;
    color: rgba(227, 234, 243, .58);
    font-size: .64rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.client-login-page .login-showcase-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(231, 238, 246, .57);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .025em;
}

.client-login-page .login-showcase-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e1b557;
    box-shadow: 0 0 0 5px rgba(225, 181, 87, .1);
}

.client-login-page .login-form-panel {
    min-width: 0;
    padding: clamp(44px, 5vw, 68px);
    background: #fff;
}

.client-login-page .login-form-wrap {
    width: min(100%, 420px);
    margin: auto;
}

.client-login-page .login-form-heading {
    margin-bottom: 31px;
}

.client-login-page .login-form-kicker {
    margin-bottom: 10px;
    color: #a8781d;
}

.client-login-page .login-form-heading h2 {
    margin: 0 0 9px;
    color: #111c31;
    font-size: clamp(1.75rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.client-login-page .login-form-heading p {
    margin: 0;
    color: #7b8492;
    font-size: .84rem;
    line-height: 1.55;
}

.client-login-page .login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-color: #f1c9c5;
    border-radius: 11px;
    font-size: .78rem;
    line-height: 1.45;
}

.client-login-page .login-alert i {
    margin-top: 1px;
    flex: 0 0 auto;
}

.client-login-page .login-field {
    margin-bottom: 19px;
}

.client-login-page .login-field + .login-field {
    margin-bottom: 17px;
}

.client-login-page .form-label {
    margin-bottom: 8px;
    color: #404a5b;
    font-size: .74rem;
    font-weight: 750;
}

.client-login-page .login-input > i {
    left: 16px;
    color: #8993a3;
    font-size: .92rem;
}

.client-login-page .login-input .form-control {
    height: 53px;
    padding-right: 46px;
    padding-left: 45px;
    border-color: #d8dde5;
    border-radius: 11px;
    color: #18243a;
    background: #fbfcfd;
    font-size: .84rem;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.client-login-page .login-input .form-control::placeholder {
    color: #a5acb7;
}

.client-login-page .login-input .form-control:focus {
    border-color: #b98a2f;
    background: #fff;
    box-shadow: 0 0 0 .22rem rgba(185, 138, 47, .13);
}

.client-login-page .login-input .password-toggle {
    right: 9px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.client-login-page .login-input .password-toggle:hover,
.client-login-page .login-input .password-toggle:focus-visible {
    color: #111c31;
    background: #eef1f5;
}

.client-login-page .login-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 25px;
    color: #626d7c;
    font-size: .76rem;
}

.client-login-page .login-form-options .form-check {
    display: flex;
    align-items: center;
    min-height: auto;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.client-login-page .login-form-options .form-check-input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    border-color: #bac1cc;
    border-radius: 4px;
    box-shadow: none;
}

.client-login-page .login-form-options .form-check-input:checked {
    border-color: #14233d;
    background-color: #14233d;
}

.client-login-page .login-form-options a,
.client-login-page .login-terms a {
    color: #243b60;
    font-weight: 750;
    text-decoration: none;
}

.client-login-page .login-form-options a:hover,
.client-login-page .login-terms a:hover {
    color: #a8781d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.client-login-page .login-submit {
    display: flex;
    min-height: 53px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-color: #14233d !important;
    border-radius: 11px;
    background: #14233d !important;
    box-shadow: 0 13px 25px rgba(20, 35, 61, .18) !important;
    font-size: .84rem;
    font-weight: 750;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.client-login-page .login-submit i {
    font-size: .9rem;
    transition: transform .18s ease;
}

.client-login-page .login-submit:hover,
.client-login-page .login-submit:focus-visible {
    border-color: #0d182a !important;
    background: #0d182a !important;
    box-shadow: 0 16px 31px rgba(20, 35, 61, .24) !important;
    transform: translateY(-1px);
}

.client-login-page .login-submit:hover i {
    transform: translateX(3px);
}

.client-login-page .login-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #5f6978;
    background: transparent;
}

.client-login-page .login-trust > i {
    display: block;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    color: #6f7b8e;
    background: transparent;
    font-size: .78rem;
}

.client-login-page .login-trust > span {
    display: grid;
    gap: 2px;
}

.client-login-page .login-trust strong {
    color: #263249;
    color: #667185;
    font-size: .74rem;
    font-weight: 650;
}

.client-login-page .login-trust small {
    display: none;
}

.client-login-page .login-terms {
    margin: 20px 0 0;
    color: #979eaa;
    font-size: .66rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 991.98px) and (min-width: 768px) {
    body.client-login-page {
        padding: 18px;
    }

    .client-login-page .login-shell {
        min-height: calc(100svh - 36px);
        grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
    }

    .client-login-page .login-showcase {
        min-height: 0;
        padding: 34px 30px;
    }

    .client-login-page .login-brand-logo.client-login-logo {
        width: 70px;
        height: 68px;
        flex-basis: 70px;
        border-radius: 16px;
    }

    .client-login-page .client-login-copy strong {
        font-size: .88rem;
    }

    .client-login-page .client-login-copy small {
        font-size: .58rem;
    }

    .client-login-page .login-pitch {
        padding: 40px 0 28px;
    }

    .client-login-page .login-pitch h1 {
        margin-top: 0;
        font-size: clamp(2.25rem, 5.2vw, 3rem);
    }

    .client-login-page .login-pitch > p {
        margin-bottom: 25px;
        font-size: .82rem;
        line-height: 1.6;
    }

    .client-login-page .login-features {
        display: grid;
        gap: 8px;
    }

    .client-login-page .login-feature {
        min-height: 91px;
        gap: 11px;
        padding: 12px 10px;
    }

    .client-login-page .login-feature small {
        display: none;
    }

    .client-login-page .login-feature strong {
        font-size: .66rem;
    }

    .client-login-page .login-showcase-status {
        font-size: .61rem;
    }

    .client-login-page .login-form-panel {
        padding: 40px 36px;
    }
}

@media (max-width: 767.98px) {
    body.client-login-page {
        display: block;
        padding: 0;
        background: #fff;
    }

    .client-login-page .login-shell {
        width: 100%;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: minmax(0, 1fr);
    }

    .client-login-page .login-showcase {
        min-height: 365px;
        padding: 27px clamp(22px, 7vw, 34px) 30px;
    }

    .client-login-page .login-brand.client-login-brand {
        flex-direction: row;
        align-items: center;
    }

    .client-login-page .login-brand-logo.client-login-logo {
        width: 66px;
        height: 64px;
        flex-basis: 66px;
        border-radius: 14px;
    }

    .client-login-page .client-login-copy strong {
        font-size: .86rem;
    }

    .client-login-page .client-login-copy small {
        font-size: .57rem;
    }

    .client-login-page .login-pitch {
        padding: 34px 0 0;
    }

    .client-login-page .login-kicker {
        margin-bottom: 10px;
        font-size: .6rem;
    }

    .client-login-page .login-pitch h1 {
        margin: 0 0 12px;
        font-size: clamp(2.1rem, 11vw, 3rem);
    }

    .client-login-page .login-pitch > p {
        margin-bottom: 24px;
        font-size: .8rem;
        line-height: 1.58;
    }

    .client-login-page .login-features {
        display: grid;
        gap: 8px;
    }

    .client-login-page .login-feature {
        min-height: 82px;
        gap: 9px;
        padding: 10px;
        border-radius: 12px;
    }

    .client-login-page .login-feature i {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        border-radius: 8px;
        font-size: .78rem;
    }

    .client-login-page .login-feature strong {
        font-size: .65rem;
    }

    .client-login-page .login-feature small,
    .client-login-page .login-showcase-status {
        display: none;
    }

    .client-login-page .login-form-panel {
        padding: 38px clamp(22px, 7vw, 34px) 30px;
    }

    .client-login-page .login-form-wrap {
        width: min(100%, 460px);
    }
}

@media (max-width: 420px) {
    .client-login-page .login-showcase {
        min-height: 350px;
    }

    .client-login-page .login-pitch h1 {
        font-size: 2.15rem;
    }

    .client-login-page .login-form-heading {
        margin-bottom: 26px;
    }

    .client-login-page .login-form-options {
        gap: 10px;
        font-size: .7rem;
    }

    .client-login-page .login-trust {
        padding: 12px;
    }
}

@media (max-height: 740px) and (min-width: 768px) {
    .client-login-page .login-shell {
        min-height: calc(100svh - 30px);
    }

    .client-login-page .login-pitch {
        padding-top: 32px;
        padding-bottom: 26px;
    }

    .client-login-page .login-form-heading {
        margin-bottom: 23px;
    }

    .client-login-page .login-trust {
        margin-top: 20px;
    }
}

/* FIKBELLA Jeans: identidade e acabamento da barra lateral */
body.app-shell .brand.client-tenant-brand {
    min-height: 96px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    margin-bottom: 8px;
    padding: 8px 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.app-shell .brand.client-tenant-brand .client-sidebar-logo {
    width: 62px;
    height: 60px;
    flex: 0 0 62px;
    border: 1px solid rgba(213, 164, 66, .26);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.client-sidebar-brand-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.client-sidebar-brand-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-sidebar-brand-copy strong span:last-child {
    color: var(--fik-gold);
}

.client-sidebar-brand-copy small {
    overflow: hidden;
    color: #8393a8;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-shell .sidebar nav.sidebar-nav {
    padding: 4px 3px 10px 0;
    scrollbar-color: rgba(213, 164, 66, .2) transparent;
}

body.app-shell .sidebar nav.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

body.app-shell .sidebar nav.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(213, 164, 66, .2);
}

body.app-shell .sidebar-section {
    gap: 3px;
    padding: 5px 0 9px;
}

body.app-shell .sidebar-section + .sidebar-section {
    margin-top: 5px;
    padding-top: 8px;
    border-top-color: rgba(255, 255, 255, .07);
}

body.app-shell .sidebar .nav-label {
    padding: 9px 10px 6px;
    color: #7f90a6 !important;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .105em;
}

body.app-shell .sidebar .nav-link {
    min-height: 44px;
    gap: 11px;
    margin: 1px 0;
    padding: 7px 10px;
    border: 1px solid transparent !important;
    border-radius: 11px;
    color: #b7c3d2 !important;
    font-size: .8rem;
    font-weight: 600;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body.app-shell .sidebar .nav-link i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 8px;
    color: #8fa0b5 !important;
    background: rgba(255, 255, 255, .035);
    font-size: .92rem;
}

body.app-shell .sidebar .nav-link:hover {
    border-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .055) !important;
}

body.app-shell .sidebar .nav-link:hover i {
    border-color: rgba(213, 164, 66, .16);
    color: #f0c76f !important;
    background: rgba(213, 164, 66, .08);
}

body.app-shell .sidebar .nav-link.active {
    border-color: rgba(213, 164, 66, .3) !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(213, 164, 66, .16), rgba(255, 255, 255, .07)) !important;
    box-shadow: inset 3px 0 0 var(--fik-gold), 0 7px 18px rgba(0, 0, 0, .1) !important;
}

body.app-shell .sidebar .nav-link.active::before {
    display: none !important;
}

body.app-shell .sidebar .nav-link.active i {
    border-color: rgba(213, 164, 66, .22);
    color: var(--fik-gold) !important;
    background: rgba(213, 164, 66, .13) !important;
}

body.app-shell .sidebar .nav-counter {
    min-width: 25px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-color: rgba(213, 164, 66, .3);
    border-radius: 999px;
    color: #f4d38a;
    background: rgba(213, 164, 66, .13);
    font-size: .59rem;
    line-height: 18px;
}

body.app-shell .sidebar-group-toggle > i:first-child {
    color: #8495aa;
}

body.app-shell .sidebar-section.is-open .sidebar-group-toggle > i:first-child,
body.app-shell .sidebar-section.is-open .sidebar-group-chevron {
    color: var(--fik-gold);
}

body.app-shell .sidebar-group-line {
    background: rgba(255, 255, 255, .08);
}

body.app-shell .sidebar-user {
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

body.app-shell .sidebar-avatar {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(213, 164, 66, .28);
    color: #fff;
    background: rgba(213, 164, 66, .13);
    font-size: .7rem;
}

body.app-shell .sidebar-user-copy strong {
    color: #f4f7fb;
    font-size: .76rem;
    font-weight: 750;
}

body.app-shell .sidebar-user-copy small {
    color: #8999ae;
    font-size: .62rem;
}

body.app-shell .logout-link {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #8fa0b5;
}

body.app-shell .logout-link:hover,
body.app-shell .logout-link:focus-visible {
    color: var(--fik-gold);
    background: rgba(213, 164, 66, .1);
}

body.sidebar-collapsed.app-shell .brand.client-tenant-brand {
    min-height: 70px;
    justify-content: center;
    padding: 6px 0 13px;
}

body.sidebar-collapsed.app-shell .client-tenant-brand .client-sidebar-symbol {
    width: 45px;
    height: 44px;
    border-color: rgba(213, 164, 66, .26);
    border-radius: 12px;
}

body.sidebar-collapsed.app-shell .sidebar-user {
    padding: 7px 4px;
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    body.app-shell .brand.client-tenant-brand,
    body.sidebar-collapsed.app-shell .brand.client-tenant-brand {
        min-height: 92px;
        justify-content: flex-start;
        padding: 7px 8px 16px;
    }

    body.app-shell .client-tenant-brand .client-sidebar-logo,
    body.sidebar-collapsed.app-shell .client-tenant-brand .client-sidebar-logo {
        width: 60px;
        height: 58px;
        flex-basis: 60px;
    }

    body.sidebar-collapsed.app-shell .client-sidebar-brand-copy {
        display: grid;
    }
}