/* ====================================================================== TRADER SKINS BRIDGE — OFFICIAL COMPONENT CONTRACT (PHASE 2) Freeze intent: - Comment-only organization - Preserve selector order + cascade behavior (no functional CSS changes) - Components are defined by existing selector families already used here Contract groups (labels used below): - APP SHELL - MODULE SHELL - TOOLBAR - TOOLBAR CARD - FORM CARD - TABLE CARD - TABLE WRAP - DATA TABLE - TABLE HEADER - TABLE ROW - PRIMARY BUTTON - SECONDARY / SOFT BUTTON - CLEAR BUTTON - TEXT INPUT - SELECT INPUT - TEXTAREA - ALERT - EMPTY STATE - TITLE / TEXT SEMANTICS - COMPATIBILITY SELECTORS - NAV EXCEPTION (text coverage only; nav surfaces excluded) - SKINS ADMIN FAMILY ====================================================================== */ /* CONTRACT: TOKEN FALLBACKS + BRIDGE-ONLY DERIVED VARS (not JSON tokens) — COMPATIBILITY ONLY */ :root { --skin-app-bg: #eef2f6; --skin-canvas-bg: rgba(255, 255, 255, 0.92); --skin-panel-bg: rgba(255, 255, 255, 0.84); --skin-panel-bg-strong: rgba(255, 255, 255, 0.94); --skin-panel-border: rgba(15, 23, 42, 0.10); --skin-title-color: #1f2937; --skin-text-color: #111827; --skin-muted-color: #6b7280; --skin-list-text-color: #111827; --skin-link-color: #1d4ed8; --skin-link-hover-color: #1e40af; --skin-primary-btn-bg: #2563eb; --skin-primary-btn-text: #ffffff; --skin-soft-btn-bg: rgba(255, 255, 255, 0.88); --skin-soft-btn-text: #1f2937; --skin-input-bg: #ffffff; --skin-input-border: #cfd7e3; --skin-focus-color: #3b82f6; --skin-table-head-bg: #1f2937; --skin-table-head-text: #ffffff; --skin-table-row-hover: #eef4ff; --skin-table-row-even: rgba(255, 255, 255, 0.54); --skin-table-cell-border: rgba(15, 23, 42, 0.08); --skin-accent-soft-bg: #eef4ff; --skin-accent-soft-text: #2643a2; --skin-positive-color: #0f766e; --skin-negative-color: #b42318; --skin-neutral-color: #6b7280; /* new alert / badge defaults (bridge-level fallbacks) */ --skin-alert-bg: #fef9c3; --skin-alert-text: #78350f; --skin-alert-border: #facc15; --skin-badge-bg: #e5e7eb; --skin-badge-text: #111827; /* shadow color + derived shadows */ --skin-shadow-color: rgba(15, 23, 42, 0.15); --skin-shell-shadow: 0 14px 30px var(--skin-shadow-color); --skin-card-shadow: 0 10px 24px var(--skin-shadow-color); --skin-shell-radius: 18px; --skin-card-radius: 16px; --skin-field-radius: 12px; --skin-pill-radius: 999px; /* nav defaults */ --skin-nav-bg: #1f2937; --skin-nav-text: #ffffff; --skin-nav-hover: #3b82f6; } /* ========================= GLOBAL APP CONTRACT: APP SHELL — STABLE CONTRACT ========================= */ html[data-trader-skin] body, body[data-trader-skin] { background-color: var(--skin-app-bg) !important; color: var(--skin-text-color) !important; } body .BackGroundimage, #MainCanvas.BackGroundimage, #MainCanvas.main-canvas, .main-canvas, body[data-trader-skin] .BackGroundimage, html[data-trader-skin] #MainCanvas { background-color: var(--skin-app-bg) !important; background-image: none !important; } #MainCanvas, .main-canvas { background: var(--skin-canvas-bg) !important; color: var(--skin-text-color) !important; } body, #MainCanvas, #MainCanvas .edit-module, #MainCanvas .price-lists-module, #MainCanvas .suppliers-module, #MainCanvas .purchase-docs-module, #MainCanvas .sales-docs-module, #MainCanvas .retail-clients-module, #MainCanvas .payments-module, #MainCanvas .receipts-module, #MainCanvas .products-module, #MainCanvas .product-categories-module, #MainCanvas .catalog-module, #MainCanvas [class*="-module"] { color: var(--skin-text-color) !important; } /* ========================= GENERIC TEXT CONTRACT: TITLE / TEXT SEMANTICS (base text inheritance) — PARTIAL CONTRACT ========================= */ #MainCanvas, #MainCanvas p, #MainCanvas li, #MainCanvas ul, #MainCanvas ol, #MainCanvas dl, #MainCanvas dt, #MainCanvas dd, #MainCanvas td, #MainCanvas tbody, #MainCanvas tbody tr, #MainCanvas tbody td, #MainCanvas tbody th, #MainCanvas strong, #MainCanvas em, #MainCanvas b, #MainCanvas i, #MainCanvas span, #MainCanvas div:not(.fa):not(.glyphicon) { color: inherit; } #MainCanvas, #MainCanvas p, #MainCanvas li, #MainCanvas td, #MainCanvas .price-lists-row-link, #MainCanvas .suppliers-row-link, #MainCanvas .purchase-docs-row-link, #MainCanvas .sales-docs-row-link, #MainCanvas .retail-clients-row-link, #MainCanvas .payments-row-link, #MainCanvas .receipts-row-link, #MainCanvas .products-row-link, #MainCanvas .product-categories-row-link, #MainCanvas .catalog-row-link, #MainCanvas .price-lists-action-cell, #MainCanvas .suppliers-action-cell, #MainCanvas .purchase-docs-action-cell, #MainCanvas .sales-docs-action-cell, #MainCanvas .retail-clients-action-cell, #MainCanvas .payments-action-cell, #MainCanvas .receipts-action-cell, #MainCanvas .products-action-cell, #MainCanvas .product-categories-action-cell, #MainCanvas .catalog-action-cell { color: var(--skin-text-color) !important; } /* ========================= TITLES CONTRACT: TITLE / TEXT SEMANTICS (titles/labels/headings) — PARTIAL CONTRACT ========================= */ #MainCanvas h1, #MainCanvas h2, #MainCanvas h3, #MainCanvas h4, #MainCanvas h5, #MainCanvas h6, #MainCanvas legend, #MainCanvas .edit-section-title, #MainCanvas .edit-label, #MainCanvas .field-label, #MainCanvas label, #MainCanvas .price-lists-title, #MainCanvas .price-lists-count, #MainCanvas .suppliers-count, #MainCanvas .purchase-docs-count, #MainCanvas .purchase-docs-type, #MainCanvas .purchase-docs-supplier, #MainCanvas .sales-docs-count, #MainCanvas .retail-clients-count, #MainCanvas .retail-clients-name, #MainCanvas .payments-count, #MainCanvas .payments-supplier, #MainCanvas .payments-doc, #MainCanvas .receipts-count, #MainCanvas .receipts-supplier, #MainCanvas .receipts-doc, #MainCanvas .products-title, #MainCanvas .products-count, #MainCanvas .products-filters-title, #MainCanvas [class*="-title"], #MainCanvas [class*="-count"] { color: var(--skin-title-color) !important; } /* LIST NORMALIZATION (canonical list screens): title spacing/alignment consistency */ #MainCanvas .price-lists-title, #MainCanvas .products-title { margin: 0 !important; } /* ========================= MUTED TEXT CONTRACT: TITLE / TEXT SEMANTICS (muted/secondary text) — PARTIAL CONTRACT ========================= */ #MainCanvas small, #MainCanvas .text-muted, #MainCanvas .muted, #MainCanvas .note, #MainCanvas .subtitle, #MainCanvas .subtext, #MainCanvas .help-block, #MainCanvas .edit-field-note, #MainCanvas .edit-loading, #MainCanvas .price-lists-search-hint, #MainCanvas .price-lists-search-state, #MainCanvas .price-lists-subhint, #MainCanvas .price-lists-empty-text, #MainCanvas .suppliers-search-hint, #MainCanvas .suppliers-subhint, #MainCanvas .suppliers-loadmore-info, #MainCanvas .suppliers-empty-text, #MainCanvas .purchase-docs-search-hint, #MainCanvas .purchase-docs-search-state, #MainCanvas .purchase-docs-subhint, #MainCanvas .purchase-docs-date, #MainCanvas .purchase-docs-series, #MainCanvas .purchase-docs-empty-text, #MainCanvas .purchase-docs-loadmore-info, #MainCanvas .sales-docs-search-hint, #MainCanvas .sales-docs-search-state, #MainCanvas .sales-docs-subhint, #MainCanvas .sales-docs-main-text, #MainCanvas .sales-docs-empty-text, #MainCanvas .sales-docs-loadmore-info, #MainCanvas .retail-clients-search-hint, #MainCanvas .retail-clients-search-state, #MainCanvas .retail-clients-subhint, #MainCanvas .retail-clients-price-list, #MainCanvas .retail-clients-empty-text, #MainCanvas .payments-search-hint, #MainCanvas .payments-search-state, #MainCanvas .payments-subhint, #MainCanvas .payments-date, #MainCanvas .payments-empty-text, #MainCanvas .payments-loadmore-info, #MainCanvas .receipts-search-hint, #MainCanvas .receipts-search-state, #MainCanvas .receipts-subhint, #MainCanvas .receipts-date, #MainCanvas .receipts-empty-text, #MainCanvas .products-search-hint, #MainCanvas .products-search-state, #MainCanvas .products-subhint, #MainCanvas .products-empty-text, #MainCanvas [class*="-hint"], #MainCanvas [class*="-state"], #MainCanvas [class*="-subhint"], #MainCanvas [class*="-meta"], #MainCanvas [class*="-loadmore-info"] { color: var(--skin-muted-color) !important; } /* LIST NORMALIZATION (canonical list screens): subhint rhythm */ #MainCanvas .price-lists-subhint, #MainCanvas .suppliers-subhint, #MainCanvas .purchase-docs-subhint, #MainCanvas .sales-docs-subhint, #MainCanvas .retail-clients-subhint, #MainCanvas .payments-subhint, #MainCanvas .receipts-subhint, #MainCanvas .products-subhint { margin: 0 !important; } /* ========================= SHELLS AND CARDS CONTRACT: MODULE SHELL (shell surfaces) — PARTIAL CONTRACT CONTRACT: TOOLBAR CARD / FORM CARD (card surfaces) — PARTIAL CONTRACT CONTRACT: TABLE CARD (card surfaces) — STABLE CONTRACT ========================= */ #MainCanvas .edit-shell, #MainCanvas .price-lists-shell, #MainCanvas .suppliers-shell, #MainCanvas .purchase-docs-shell, #MainCanvas .sales-docs-shell, #MainCanvas .retail-clients-shell, #MainCanvas .payments-shell, #MainCanvas .receipts-shell, #MainCanvas .products-shell, #MainCanvas .product-categories-shell, #MainCanvas .catalog-shell, #MainCanvas [class*="-shell"], #MainCanvas .shell { background: var(--skin-panel-bg) !important; border: 1px solid var(--skin-panel-border) !important; border-radius: var(--skin-shell-radius) !important; box-shadow: var(--skin-shell-shadow) !important; color: var(--skin-text-color) !important; } /* Bridge refinement (QC): canonical-safe shell structural baseline */ #MainCanvas [class*="-shell"] { box-sizing: border-box !important; } /* LIST NORMALIZATION (canonical list screens): shell containment + spacing rhythm */ #MainCanvas .price-lists-shell, #MainCanvas .suppliers-shell, #MainCanvas .purchase-docs-shell, #MainCanvas .sales-docs-shell, #MainCanvas .retail-clients-shell, #MainCanvas .payments-shell, #MainCanvas .receipts-shell, #MainCanvas .products-shell, #MainCanvas .product-categories-shell, #MainCanvas .catalog-shell { box-sizing: border-box !important; padding: 16px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0 !important; } #MainCanvas .edit-form-card, #MainCanvas .edit-preview-card, #MainCanvas .edit-toolbar-card, #MainCanvas .edit-actions-card, #MainCanvas .price-lists-search-card, #MainCanvas .price-lists-table-card, #MainCanvas .suppliers-search-card, #MainCanvas .suppliers-table-card, #MainCanvas .purchase-docs-search-card, #MainCanvas .purchase-docs-table-card, #MainCanvas .sales-docs-search-card, #MainCanvas .sales-docs-table-card, #MainCanvas .retail-clients-search-card, #MainCanvas .retail-clients-table-card, #MainCanvas .payments-search-card, #MainCanvas .payments-table-card, #MainCanvas .receipts-search-card, #MainCanvas .receipts-table-card, #MainCanvas .products-search-card, #MainCanvas .products-table-card, #MainCanvas .products-filters-card, #MainCanvas .product-categories-search-card, #MainCanvas .product-categories-table-card, #MainCanvas .catalog-search-card, #MainCanvas .catalog-table-card, #MainCanvas [class*="-search-card"], #MainCanvas [class*="-table-card"], #MainCanvas [class*="-filters-card"], #MainCanvas .card, #MainCanvas .table-card { background: var(--skin-panel-bg-strong) !important; border: 1px solid var(--skin-panel-border) !important; border-radius: var(--skin-card-radius) !important; box-shadow: var(--skin-card-shadow) !important; color: var(--skin-text-color) !important; } /* Bridge refinement (QC): canonical search/table card structural baseline */ #MainCanvas [class*="-search-card"], #MainCanvas [class*="-table-card"] { box-sizing: border-box !important; } /* ========================= TOOLBARS AND SUMMARY ROWS CONTRACT: TOOLBAR — PARTIAL CONTRACT ========================= */ #MainCanvas [class*="-toolbar"] { box-sizing: border-box !important; } #MainCanvas .edit-toolbar, #MainCanvas .edit-toolbar-left, #MainCanvas .edit-toolbar-right, #MainCanvas .edit-actions, #MainCanvas .edit-actions-left, #MainCanvas .edit-actions-right, #MainCanvas .price-lists-toolbar, #MainCanvas .price-lists-toolbar-left, #MainCanvas .price-lists-toolbar-right, #MainCanvas .price-lists-summary-row, #MainCanvas .suppliers-toolbar, #MainCanvas .suppliers-toolbar-left, #MainCanvas .suppliers-toolbar-right, #MainCanvas .suppliers-summary-row, #MainCanvas .suppliers-totals-row, #MainCanvas .purchase-docs-toolbar, #MainCanvas .purchase-docs-toolbar-left, #MainCanvas .purchase-docs-toolbar-right, #MainCanvas .purchase-docs-summary-row, #MainCanvas .sales-docs-toolbar, #MainCanvas .sales-docs-toolbar-left, #MainCanvas .sales-docs-toolbar-right, #MainCanvas .sales-docs-summary-row, #MainCanvas .sales-docs-totals-row, #MainCanvas .retail-clients-toolbar, #MainCanvas .retail-clients-toolbar-left, #MainCanvas .retail-clients-toolbar-right, #MainCanvas .retail-clients-summary-row, #MainCanvas .retail-clients-totals-row, #MainCanvas .payments-toolbar, #MainCanvas .payments-toolbar-left, #MainCanvas .payments-toolbar-right, #MainCanvas .payments-summary-row, #MainCanvas .payments-totals-row, #MainCanvas .receipts-toolbar, #MainCanvas .receipts-toolbar-left, #MainCanvas .receipts-toolbar-right, #MainCanvas .receipts-summary-row, #MainCanvas .receipts-totals-row, #MainCanvas .products-toolbar, #MainCanvas .products-toolbar-left, #MainCanvas .products-toolbar-right, #MainCanvas .products-summary-row, #MainCanvas .products-filters-row, #MainCanvas [class*="-toolbar"], #MainCanvas [class*="-summary-row"], #MainCanvas [class*="-totals-row"], #MainCanvas .toolbar, #MainCanvas .totals-row { color: var(--skin-text-color) !important; } /* LIST NORMALIZATION (canonical list screens): toolbar spacing + alignment rhythm */ #MainCanvas .price-lists-toolbar, #MainCanvas .suppliers-toolbar, #MainCanvas .purchase-docs-toolbar, #MainCanvas .sales-docs-toolbar, #MainCanvas .retail-clients-toolbar, #MainCanvas .payments-toolbar, #MainCanvas .receipts-toolbar, #MainCanvas .products-toolbar, #MainCanvas .product-categories-toolbar, #MainCanvas .catalog-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 0 !important; margin-top: 0 !important; } /* LIST NORMALIZATION (canonical list screens): toolbar clusters (left/right) */ #MainCanvas .price-lists-toolbar-left, #MainCanvas .suppliers-toolbar-left, #MainCanvas .purchase-docs-toolbar-left, #MainCanvas .sales-docs-toolbar-left, #MainCanvas .retail-clients-toolbar-left, #MainCanvas .payments-toolbar-left, #MainCanvas .receipts-toolbar-left, #MainCanvas .products-toolbar-left, #MainCanvas .price-lists-toolbar-right, #MainCanvas .suppliers-toolbar-right, #MainCanvas .purchase-docs-toolbar-right, #MainCanvas .sales-docs-toolbar-right, #MainCanvas .retail-clients-toolbar-right, #MainCanvas .payments-toolbar-right, #MainCanvas .receipts-toolbar-right, #MainCanvas .products-toolbar-right { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } #MainCanvas .price-lists-toolbar-right, #MainCanvas .suppliers-toolbar-right, #MainCanvas .purchase-docs-toolbar-right, #MainCanvas .sales-docs-toolbar-right, #MainCanvas .retail-clients-toolbar-right, #MainCanvas .payments-toolbar-right, #MainCanvas .receipts-toolbar-right, #MainCanvas .products-toolbar-right { justify-content: flex-end !important; } /* ========================= INPUTS CONTRACT: TEXT INPUT — STABLE CONTRACT CONTRACT: SELECT INPUT — STABLE CONTRACT CONTRACT: TEXTAREA — STABLE CONTRACT ========================= */ #MainCanvas input, #MainCanvas select, #MainCanvas textarea, #MainCanvas .form-control, #MainCanvas .edit-input, #MainCanvas .edit-select, #MainCanvas .edit-input-number, #MainCanvas .edit-input-date, #MainCanvas .edit-readonly-input, #MainCanvas .price-lists-search-input, #MainCanvas .suppliers-search-input, #MainCanvas .purchase-docs-search-input, #MainCanvas .sales-docs-search-input, #MainCanvas .retail-clients-search-input, #MainCanvas .payments-search-input, #MainCanvas .receipts-search-input, #MainCanvas .products-search-input, #MainCanvas .product-categories-search-input, #MainCanvas .catalog-search-input, #MainCanvas [class*="-search-input"], #MainCanvas .input { background: var(--skin-input-bg) !important; border: 1px solid var(--skin-input-border) !important; border-radius: var(--skin-field-radius) !important; color: var(--skin-text-color) !important; box-shadow: none !important; } #MainCanvas input::placeholder, #MainCanvas textarea::placeholder, #MainCanvas .price-lists-search-input::placeholder, #MainCanvas .suppliers-search-input::placeholder, #MainCanvas .purchase-docs-search-input::placeholder, #MainCanvas .sales-docs-search-input::placeholder, #MainCanvas .retail-clients-search-input::placeholder, #MainCanvas .payments-search-input::placeholder, #MainCanvas .receipts-search-input::placeholder, #MainCanvas .products-search-input::placeholder, #MainCanvas .product-categories-search-input::placeholder, #MainCanvas .catalog-search-input::placeholder, #MainCanvas [class*="-search-input"]::placeholder { color: var(--skin-muted-color) !important; opacity: 1 !important; } #MainCanvas input:focus, #MainCanvas select:focus, #MainCanvas textarea:focus, #MainCanvas .form-control:focus, #MainCanvas .edit-input:focus, #MainCanvas .edit-select:focus, #MainCanvas .edit-input-number:focus, #MainCanvas .edit-input-date:focus, #MainCanvas .price-lists-search-input:focus, #MainCanvas .suppliers-search-input:focus, #MainCanvas .purchase-docs-search-input:focus, #MainCanvas .sales-docs-search-input:focus, #MainCanvas .retail-clients-search-input:focus, #MainCanvas .payments-search-input:focus, #MainCanvas .receipts-search-input:focus, #MainCanvas .products-search-input:focus, #MainCanvas .product-categories-search-input:focus, #MainCanvas .catalog-search-input:focus, #MainCanvas [class*="-search-input"]:focus { border-color: var(--skin-focus-color) !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16) !important; outline: none !important; } #MainCanvas .edit-readonly-input, #MainCanvas [readonly], #MainCanvas [disabled] { color: var(--skin-title-color) !important; } /* ========================= BUTTONS CONTRACT: PRIMARY BUTTON (within #MainCanvas) — STABLE CONTRACT CONTRACT: SECONDARY / SOFT BUTTON (within #MainCanvas) — STABLE CONTRACT CONTRACT: CLEAR BUTTON (within #MainCanvas) — STABLE CONTRACT NOTE: excludes nav surface expectations (see NAV section) ========================= */ #MainCanvas button, #MainCanvas .btn, #MainCanvas [type="button"], #MainCanvas [type="submit"], #MainCanvas .edit-btn, #MainCanvas .price-lists-btn, #MainCanvas .suppliers-btn, #MainCanvas .purchase-docs-btn, #MainCanvas .sales-docs-btn, #MainCanvas .retail-clients-btn, #MainCanvas .payments-btn, #MainCanvas .receipts-btn, #MainCanvas .products-btn, #MainCanvas .products-filter-btn, #MainCanvas [class*="-btn"] { border-radius: var(--skin-field-radius) !important; border-color: var(--skin-panel-border) !important; } #MainCanvas .btn-primary, #MainCanvas .edit-btn-primary, #MainCanvas .btn.btn-primary, #MainCanvas [type="submit"], #MainCanvas .price-lists-btn.btn-primary, #MainCanvas .suppliers-btn.btn-primary, #MainCanvas .purchase-docs-btn.btn-primary, #MainCanvas .sales-docs-btn.btn-primary, #MainCanvas .retail-clients-btn.btn-primary, #MainCanvas .payments-btn.btn-primary, #MainCanvas .receipts-btn.btn-primary, #MainCanvas .products-btn.btn-primary, #MainCanvas .products-filter-btn.is-active, #MainCanvas [class*="-btn"].btn-primary, #MainCanvas .btn-primary.btn-primary, body[data-trader-skin] .nav-tool-item > a.tooliconbtn.btn-primary { background: var(--skin-primary-btn-bg) !important; border-color: var(--skin-primary-btn-bg) !important; color: var(--skin-primary-btn-text) !important; } #MainCanvas .btn-default, #MainCanvas .btn-success, #MainCanvas .edit-btn, #MainCanvas .price-lists-btn, #MainCanvas .suppliers-btn, #MainCanvas .purchase-docs-btn, #MainCanvas .sales-docs-btn, #MainCanvas .retail-clients-btn, #MainCanvas .payments-btn, #MainCanvas .receipts-btn, #MainCanvas .products-btn, #MainCanvas .products-filter-btn, #MainCanvas [class*="-btn"]:not(.btn-primary):not(.is-active), #MainCanvas .btn-soft { background: var(--skin-soft-btn-bg) !important; color: var(--skin-soft-btn-text) !important; border-color: var(--skin-panel-border) !important; } #MainCanvas .price-lists-clear-btn, #MainCanvas .suppliers-clear-btn, #MainCanvas .purchase-docs-clear-btn, #MainCanvas .sales-docs-clear-btn, #MainCanvas .retail-clients-clear-btn, #MainCanvas .payments-clear-btn, #MainCanvas .receipts-clear-btn, #MainCanvas .products-clear-btn, #MainCanvas [class*="-clear-btn"] { background: var(--skin-soft-btn-bg) !important; color: var(--skin-title-color) !important; border-color: var(--skin-input-border) !important; } /* ========================= TABLES CONTRACT: DATA TABLE — STABLE CONTRACT CONTRACT: TABLE HEADER — STABLE CONTRACT CONTRACT: TABLE ROW — STABLE CONTRACT ========================= */ #MainCanvas table, #MainCanvas .table, #MainCanvas .price-lists-table, #MainCanvas .suppliers-table, #MainCanvas .purchase-docs-table, #MainCanvas .sales-docs-table, #MainCanvas .retail-clients-table, #MainCanvas .payments-table, #MainCanvas .receipts-table, #MainCanvas .products-table, #MainCanvas .product-categories-table, #MainCanvas .catalog-table, #MainCanvas [class*="-table"] { color: var(--skin-list-text-color) !important; background: var(--skin-panel-bg-strong) !important; } /* LIST NORMALIZATION (canonical list screens): data table structural consistency */ #MainCanvas .price-lists-table, #MainCanvas .suppliers-table, #MainCanvas .purchase-docs-table, #MainCanvas .sales-docs-table, #MainCanvas .retail-clients-table, #MainCanvas .payments-table, #MainCanvas .receipts-table, #MainCanvas .products-table, #MainCanvas .product-categories-table, #MainCanvas .catalog-table { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; background: transparent !important; } #MainCanvas table thead th, #MainCanvas .table thead th, #MainCanvas .price-lists-table thead th, #MainCanvas .suppliers-table thead th, #MainCanvas .purchase-docs-table thead th, #MainCanvas .sales-docs-table thead th, #MainCanvas .retail-clients-table thead th, #MainCanvas .payments-table thead th, #MainCanvas .receipts-table thead th, #MainCanvas .products-table thead th, #MainCanvas .product-categories-table thead th, #MainCanvas .catalog-table thead th, #MainCanvas [class*="-table"] thead th { background: var(--skin-table-head-bg) !important; color: var(--skin-table-head-text) !important; border-color: var(--skin-table-head-bg) !important; } /* LIST NORMALIZATION (canonical list screens): table header spacing + alignment */ #MainCanvas .price-lists-table thead th, #MainCanvas .suppliers-table thead th, #MainCanvas .purchase-docs-table thead th, #MainCanvas .sales-docs-table thead th, #MainCanvas .retail-clients-table thead th, #MainCanvas .payments-table thead th, #MainCanvas .receipts-table thead th, #MainCanvas .products-table thead th, #MainCanvas .product-categories-table thead th, #MainCanvas .catalog-table thead th { padding: 10px 12px !important; vertical-align: middle !important; } #MainCanvas table tbody td, #MainCanvas table tbody th, #MainCanvas .table tbody td, #MainCanvas .table tbody th, #MainCanvas .price-lists-table tbody td, #MainCanvas .suppliers-table tbody td, #MainCanvas .purchase-docs-table tbody td, #MainCanvas .sales-docs-table tbody td, #MainCanvas .retail-clients-table tbody td, #MainCanvas .payments-table tbody td, #MainCanvas .receipts-table tbody td, #MainCanvas .products-table tbody td, #MainCanvas .product-categories-table tbody td, #MainCanvas .catalog-table tbody td, #MainCanvas [class*="-table"] tbody td, #MainCanvas [class*="-table"] tbody th { color: var(--skin-list-text-color) !important; border-bottom-color: var(--skin-table-cell-border) !important; } /* LIST NORMALIZATION (canonical list screens): body cell padding + vertical alignment */ #MainCanvas .price-lists-table tbody td, #MainCanvas .price-lists-table tbody th, #MainCanvas .suppliers-table tbody td, #MainCanvas .suppliers-table tbody th, #MainCanvas .purchase-docs-table tbody td, #MainCanvas .purchase-docs-table tbody th, #MainCanvas .sales-docs-table tbody td, #MainCanvas .sales-docs-table tbody th, #MainCanvas .retail-clients-table tbody td, #MainCanvas .retail-clients-table tbody th, #MainCanvas .payments-table tbody td, #MainCanvas .payments-table tbody th, #MainCanvas .receipts-table tbody td, #MainCanvas .receipts-table tbody th, #MainCanvas .products-table tbody td, #MainCanvas .products-table tbody th, #MainCanvas .product-categories-table tbody td, #MainCanvas .product-categories-table tbody th, #MainCanvas .catalog-table tbody td, #MainCanvas .catalog-table tbody th { padding: 10px 12px !important; vertical-align: middle !important; border-bottom: 1px solid var(--skin-table-cell-border) !important; } /* LIST NORMALIZATION (canonical list screens): action cell alignment */ #MainCanvas .price-lists-action-cell, #MainCanvas .suppliers-action-cell, #MainCanvas .purchase-docs-action-cell, #MainCanvas .sales-docs-action-cell, #MainCanvas .retail-clients-action-cell, #MainCanvas .payments-action-cell, #MainCanvas .receipts-action-cell, #MainCanvas .products-action-cell, #MainCanvas .product-categories-action-cell, #MainCanvas .catalog-action-cell { text-align: right !important; vertical-align: middle !important; white-space: nowrap !important; word-spacing: 6px !important; line-height: 1.2 !important; } #MainCanvas table tbody tr:nth-child(even), #MainCanvas .table tbody tr:nth-child(even), #MainCanvas .price-lists-table tbody tr:nth-child(even), #MainCanvas .suppliers-table tbody tr:nth-child(even), #MainCanvas .purchase-docs-table tbody tr:nth-child(even), #MainCanvas .sales-docs-table tbody tr:nth-child(even), #MainCanvas .retail-clients-table tbody tr:nth-child(even), #MainCanvas .payments-table tbody tr:nth-child(even), #MainCanvas .receipts-table tbody tr:nth-child(even), #MainCanvas .products-table tbody tr:nth-child(even), #MainCanvas .product-categories-table tbody tr:nth-child(even), #MainCanvas .catalog-table tbody tr:nth-child(even), #MainCanvas [class*="-table"] tbody tr:nth-child(even) { background: var(--skin-table-row-even) !important; } #MainCanvas table tbody tr:hover, #MainCanvas .table tbody tr:hover, #MainCanvas .price-lists-table tbody tr:hover, #MainCanvas .suppliers-table tbody tr:hover, #MainCanvas .purchase-docs-table tbody tr:hover, #MainCanvas .sales-docs-table tbody tr:hover, #MainCanvas .retail-clients-table tbody tr:hover, #MainCanvas .payments-table tbody tr:hover, #MainCanvas .receipts-table tbody tr:hover, #MainCanvas .products-table tbody tr:hover, #MainCanvas .product-categories-table tbody tr:hover, #MainCanvas .catalog-table tbody tr:hover, #MainCanvas [class*="-table"] tbody tr:hover { background: var(--skin-table-row-hover) !important; } /* ========================= MAIN TEXT INSIDE TABLE CELLS CONTRACT: TITLE / TEXT SEMANTICS (table cell/link semantics) — PARTIAL CONTRACT ========================= */ #MainCanvas .price-lists-row-link, #MainCanvas .suppliers-row-link, #MainCanvas .purchase-docs-row-link, #MainCanvas .sales-docs-row-link, #MainCanvas .retail-clients-row-link, #MainCanvas .payments-row-link, #MainCanvas .receipts-row-link, #MainCanvas .products-row-link, #MainCanvas .product-categories-row-link, #MainCanvas .catalog-row-link, #MainCanvas .price-lists-table td, #MainCanvas .suppliers-table td, #MainCanvas .purchase-docs-table td, #MainCanvas .sales-docs-table td, #MainCanvas .retail-clients-table td, #MainCanvas .payments-table td, #MainCanvas .receipts-table td, #MainCanvas .products-table td, #MainCanvas .product-categories-table td, #MainCanvas .catalog-table td { color: var(--skin-list-text-color) !important; } #MainCanvas .price-lists-row-link, #MainCanvas .suppliers-row-link, #MainCanvas .purchase-docs-row-link, #MainCanvas .sales-docs-row-link, #MainCanvas .retail-clients-row-link, #MainCanvas .payments-row-link, #MainCanvas .receipts-row-link, #MainCanvas .products-row-link, #MainCanvas .product-categories-row-link, #MainCanvas .catalog-row-link { color: var(--skin-link-color) !important; text-decoration: none !important; font-weight: inherit !important; } #MainCanvas .price-lists-row-link:hover, #MainCanvas .price-lists-row-link:focus, #MainCanvas .suppliers-row-link:hover, #MainCanvas .suppliers-row-link:focus, #MainCanvas .purchase-docs-row-link:hover, #MainCanvas .purchase-docs-row-link:focus, #MainCanvas .sales-docs-row-link:hover, #MainCanvas .sales-docs-row-link:focus, #MainCanvas .retail-clients-row-link:hover, #MainCanvas .retail-clients-row-link:focus, #MainCanvas .payments-row-link:hover, #MainCanvas .payments-row-link:focus, #MainCanvas .receipts-row-link:hover, #MainCanvas .receipts-row-link:focus, #MainCanvas .products-row-link:hover, #MainCanvas .products-row-link:focus, #MainCanvas .product-categories-row-link:hover, #MainCanvas .product-categories-row-link:focus, #MainCanvas .catalog-row-link:hover, #MainCanvas .catalog-row-link:focus { color: var(--skin-link-hover-color) !important; } #MainCanvas .suppliers-name, #MainCanvas .retail-clients-name, #MainCanvas .purchase-docs-type, #MainCanvas .purchase-docs-supplier, #MainCanvas .payments-supplier, #MainCanvas .payments-doc, #MainCanvas .receipts-supplier, #MainCanvas .receipts-doc, #MainCanvas .products-title { color: var(--skin-title-color) !important; } /* ========================= ACTION ICONS AND LINKS CONTRACT: TITLE / TEXT SEMANTICS (links + action glyphs) — PARTIAL CONTRACT ========================= */ #MainCanvas .price-lists-action-icon, #MainCanvas .suppliers-action-icon, #MainCanvas .purchase-docs-action-icon, #MainCanvas .sales-docs-action-icon, #MainCanvas .retail-clients-action-icon, #MainCanvas .payments-action-icon, #MainCanvas .receipts-action-icon, #MainCanvas .products-action-icon, #MainCanvas .product-categories-action-icon, #MainCanvas .catalog-action-icon { color: var(--skin-title-color) !important; display: inline-block !important; vertical-align: middle !important; line-height: 1 !important; } #MainCanvas a, #MainCanvas a:visited { color: var(--skin-link-color) !important; } #MainCanvas a:hover, #MainCanvas a:focus { color: var(--skin-link-hover-color) !important; } /* ========================= BADGES AND SOFT HIGHLIGHTS CONTRACT: COMPATIBILITY SELECTORS (legacy badges; not an official baseline component) — COMPATIBILITY ONLY ========================= */ #MainCanvas .suppliers-badge, #MainCanvas .badge { background: var(--skin-badge-bg) !important; color: var(--skin-badge-text) !important; border-color: var(--skin-panel-border) !important; } /* ========================= ALERTS CONTRACT: ALERT — STABLE CONTRACT ========================= */ #MainCanvas .alert { background: var(--skin-alert-bg) !important; color: var(--skin-alert-text) !important; border-color: var(--skin-alert-border) !important; } /* ========================= AMOUNTS AND STATUS COLORS CONTRACT: COMPATIBILITY SELECTORS (status colors; not a core component group) — COMPATIBILITY ONLY ========================= */ #MainCanvas .price-lists-profit, #MainCanvas .purchase-docs-amount, #MainCanvas .sales-docs-amount, #MainCanvas .retail-clients-amount, #MainCanvas .payments-amount, #MainCanvas .receipts-amount, #MainCanvas .products-amount, #MainCanvas .suppliers-amount { color: var(--skin-positive-color) !important; } #MainCanvas .suppliers-amount-positive, #MainCanvas .retail-clients-amount-positive { color: var(--skin-positive-color) !important; } #MainCanvas .suppliers-amount-neutral, #MainCanvas .purchase-docs-amount-neutral, #MainCanvas .sales-docs-amount-neutral, #MainCanvas .retail-clients-amount-neutral, #MainCanvas .products-amount-neutral, #MainCanvas .payments-amount-neutral, #MainCanvas .receipts-amount-neutral { color: var(--skin-neutral-color) !important; } #MainCanvas .products-amount-zero { color: var(--skin-neutral-color) !important; } /* ========================= EMPTY STATES CONTRACT: EMPTY STATE — STABLE CONTRACT ========================= */ #MainCanvas .price-lists-empty, #MainCanvas .suppliers-empty, #MainCanvas .purchase-docs-empty, #MainCanvas .sales-docs-empty, #MainCanvas .retail-clients-empty, #MainCanvas .payments-empty, #MainCanvas .receipts-empty, #MainCanvas .products-empty, #MainCanvas .product-categories-empty, #MainCanvas .catalog-empty { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; border-style: solid !important; border-width: 1px !important; border-radius: var(--skin-card-radius) !important; padding: 16px !important; box-sizing: border-box !important; margin: 0 !important; } #MainCanvas .price-lists-empty-title, #MainCanvas .suppliers-empty-title, #MainCanvas .purchase-docs-empty-title, #MainCanvas .sales-docs-empty-title, #MainCanvas .retail-clients-empty-title, #MainCanvas .payments-empty-title, #MainCanvas .receipts-empty-title, #MainCanvas .products-empty-title, #MainCanvas .product-categories-empty-title, #MainCanvas .catalog-empty-title { color: var(--skin-title-color) !important; } #MainCanvas .price-lists-empty-text, #MainCanvas .suppliers-empty-text, #MainCanvas .purchase-docs-empty-text, #MainCanvas .sales-docs-empty-text, #MainCanvas .retail-clients-empty-text, #MainCanvas .payments-empty-text, #MainCanvas .receipts-empty-text, #MainCanvas .products-empty-text, #MainCanvas .product-categories-empty-text, #MainCanvas .catalog-empty-text { color: var(--skin-muted-color) !important; } /* ========================= PRODUCTS SPECIALS CONTRACT: COMPATIBILITY SELECTORS (module-specific exception) — COMPATIBILITY ONLY ========================= */ #MainCanvas .products-filter-btn.is-active { background: var(--skin-primary-btn-bg) !important; border-color: var(--skin-primary-btn-bg) !important; color: var(--skin-primary-btn-text) !important; } /* ========================= SAFETY OVERRIDES CONTRACT: COMPATIBILITY SELECTORS (coverage hardening) — COMPATIBILITY ONLY ========================= */ #MainCanvas .price-lists-title, #MainCanvas .price-lists-search-label, #MainCanvas .suppliers-search-label, #MainCanvas .purchase-docs-search-label, #MainCanvas .sales-docs-search-label, #MainCanvas .retail-clients-search-label, #MainCanvas .payments-search-label, #MainCanvas .receipts-search-label, #MainCanvas .products-search-label { color: var(--skin-title-color) !important; } #MainCanvas .price-lists-search-top, #MainCanvas .suppliers-search-top, #MainCanvas .purchase-docs-search-top, #MainCanvas .sales-docs-search-top, #MainCanvas .retail-clients-search-top, #MainCanvas .payments-search-top, #MainCanvas .receipts-search-top, #MainCanvas .products-search-wrap { color: var(--skin-text-color) !important; } /* CONTRACT: TABLE WRAP (module table container text semantics) — STABLE CONTRACT */ #MainCanvas .price-lists-table-wrap, #MainCanvas .suppliers-table-wrap, #MainCanvas .purchase-docs-table-wrap, #MainCanvas .sales-docs-table-wrap, #MainCanvas .retail-clients-table-wrap, #MainCanvas .payments-table-wrap, #MainCanvas .receipts-table-wrap, #MainCanvas .products-table-wrap, #MainCanvas .product-categories-table-wrap, #MainCanvas .catalog-table-wrap { color: var(--skin-list-text-color) !important; background: var(--skin-panel-bg-strong) !important; border: 1px solid var(--skin-panel-border) !important; border-radius: var(--skin-card-radius) !important; padding: 12px !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 !important; } /* LIST NORMALIZATION (canonical list screens): ensure table sits inside wrap consistently */ #MainCanvas .price-lists-table-wrap table, #MainCanvas .suppliers-table-wrap table, #MainCanvas .purchase-docs-table-wrap table, #MainCanvas .sales-docs-table-wrap table, #MainCanvas .retail-clients-table-wrap table, #MainCanvas .payments-table-wrap table, #MainCanvas .receipts-table-wrap table, #MainCanvas .products-table-wrap table, #MainCanvas .product-categories-table-wrap table, #MainCanvas .catalog-table-wrap table, #MainCanvas .price-lists-table-wrap .table, #MainCanvas .suppliers-table-wrap .table, #MainCanvas .purchase-docs-table-wrap .table, #MainCanvas .sales-docs-table-wrap .table, #MainCanvas .retail-clients-table-wrap .table, #MainCanvas .payments-table-wrap .table, #MainCanvas .receipts-table-wrap .table, #MainCanvas .products-table-wrap .table, #MainCanvas .product-categories-table-wrap .table, #MainCanvas .catalog-table-wrap .table { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; background: transparent !important; } /* ========================= SHARED LEGACY-SAFE UI PATTERNS CONTRACT: COMPATIBILITY SELECTORS (Bootstrap-like legacy surfaces) — COMPATIBILITY ONLY ========================= */ /* Generic panels / cards using Bootstrap-like patterns inside MainCanvas */ #MainCanvas .panel, #MainCanvas .panel-default, #MainCanvas .panel-body { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-text-color) !important; } #MainCanvas .panel-heading { background: var(--skin-panel-bg) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-title-color) !important; } /* Lightweight info / helper containers */ #MainCanvas .well, #MainCanvas .info-box, #MainCanvas .callout { background: var(--skin-panel-bg) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-text-color) !important; } /* Common list-style containers */ #MainCanvas .list-group { background: transparent !important; } #MainCanvas .list-group-item { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-list-text-color) !important; } #MainCanvas .list-group-item:hover, #MainCanvas .list-group-item:focus { background: var(--skin-table-row-hover) !important; color: var(--skin-list-text-color) !important; } /* Pagination controls */ #MainCanvas .pagination > li > a, #MainCanvas .pagination > li > span { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-text-color) !important; } #MainCanvas .pagination > li > a:hover, #MainCanvas .pagination > li > a:focus, #MainCanvas .pagination > li > span:hover, #MainCanvas .pagination > li > span:focus { background: var(--skin-table-row-hover) !important; color: var(--skin-text-color) !important; } /* Tabs (Bootstrap nav-tabs) */ #MainCanvas .nav-tabs > li > a { background: var(--skin-panel-bg) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-text-color) !important; } #MainCanvas .nav-tabs > li.active > a, #MainCanvas .nav-tabs > li.active > a:focus, #MainCanvas .nav-tabs > li.active > a:hover { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-title-color) !important; } /* ========================= NAVIGATION CONTRACT: NAV EXCEPTION — EXCLUDED / NAV EXCEPTION - Bridge provides nav TEXT coverage only. - Nav surface backgrounds are excluded from component contract baseline. ========================= */ /* Main nav bar surfaces (Bootstrap + legacy nav containers) */ body[data-trader-skin] .navbar, body[data-trader-skin] .navbar-default, body[data-trader-skin] .navbar-inverse, body[data-trader-skin] .navbar-main, body[data-trader-skin] #MainNav, body[data-trader-skin] .main-nav, body[data-trader-skin] .nav-tool-bar { background-color: var(--skin-nav-bg) !important; border-color: var(--skin-nav-bg) !important; color: var(--skin-nav-text) !important; } /* Nav link text */ body[data-trader-skin] .navbar a, body[data-trader-skin] .navbar-nav > li > a, body[data-trader-skin] .navbar-main a, body[data-trader-skin] .nav-bar a, body[data-trader-skin] #MainNav a, body[data-trader-skin] .main-nav a, body[data-trader-skin] .nav-tool-item > a.tooliconbtn { color: var(--skin-nav-text) !important; } /* Nav hover / focus state */ body[data-trader-skin] .navbar-nav > li > a:hover, body[data-trader-skin] .navbar-nav > li > a:focus, body[data-trader-skin] .nav-bar a:hover, body[data-trader-skin] .nav-bar a:focus, body[data-trader-skin] #MainNav a:hover, body[data-trader-skin] #MainNav a:focus, body[data-trader-skin] .main-nav a:hover, body[data-trader-skin] .main-nav a:focus, body[data-trader-skin] .nav-tool-item > a.tooliconbtn:hover, body[data-trader-skin] .nav-tool-item > a.tooliconbtn:focus { color: var(--skin-nav-hover) !important; } /* ========================= SKINS MANAGEMENT PAGE (settings/skins.php) CONTRACT: SKINS ADMIN FAMILY — STABLE CONTRACT ========================= */ /* Page shell + canvas */ .skins-page { background: var(--skin-app-bg) !important; color: var(--skin-text-color) !important; } .skins-shell { background: var(--skin-canvas-bg) !important; border: 1px solid var(--skin-panel-border) !important; border-radius: var(--skin-shell-radius) !important; box-shadow: var(--skin-shell-shadow) !important; } /* Titles / descriptive text */ .skins-title-wrap h1 { color: var(--skin-title-color) !important; } .skins-title-wrap p, .skins-status-bar, .skins-status-bar strong { color: var(--skin-muted-color) !important; } /* Status bar + pills */ .skins-status-bar { background: var(--skin-panel-bg) !important; border-color: var(--skin-panel-border) !important; border-radius: var(--skin-card-radius) !important; } .skins-status-pill { background: var(--skin-badge-bg) !important; color: var(--skin-badge-text) !important; border-radius: var(--skin-pill-radius) !important; } /* Cards / panels */ .skins-grid { color: var(--skin-text-color) !important; } .skin-card { background: var(--skin-panel-bg-strong) !important; border: 1px solid var(--skin-panel-border) !important; border-radius: var(--skin-card-radius) !important; box-shadow: var(--skin-card-shadow) !important; } .skin-card.is-active { box-shadow: var(--skin-shell-shadow) !important; } .skin-name { color: var(--skin-title-color) !important; } .skin-id, .skin-token-inline { color: var(--skin-muted-color) !important; } /* Active / inactive badges */ .skin-active-badge { background: var(--skin-badge-bg) !important; color: var(--skin-badge-text) !important; border-radius: var(--skin-pill-radius) !important; border: 1px solid var(--skin-panel-border) !important; } .skin-inactive-badge { opacity: 0.86; } /* Swatches + detail surfaces */ .skin-swatch { border-color: var(--skin-panel-border) !important; background: var(--skin-panel-bg-strong) !important; } .skin-swatch-label { color: var(--skin-muted-color) !important; } .skin-details { background: var(--skin-panel-bg) !important; border-color: var(--skin-panel-border) !important; border-radius: var(--skin-card-radius) !important; } .skin-details summary { color: var(--skin-title-color) !important; } .skin-token-item { background: var(--skin-panel-bg-strong) !important; border-color: var(--skin-panel-border) !important; } .skin-token-key { color: var(--skin-muted-color) !important; } .skin-token-value { color: var(--skin-text-color) !important; } .skin-token-chip { border-color: var(--skin-panel-border) !important; } /* Messages use alert tokens */ .skins-message { border-radius: var(--skin-card-radius) !important; } .skins-message-success { background: var(--skin-alert-bg) !important; color: var(--skin-alert-text) !important; border-color: var(--skin-alert-border) !important; } .skins-message-error { background: var(--skin-alert-bg) !important; color: var(--skin-alert-text) !important; border-color: var(--skin-alert-border) !important; } /* Buttons */ .skins-btn { border-radius: var(--skin-field-radius) !important; border-color: var(--skin-panel-border) !important; color: var(--skin-text-color) !important; } .skins-btn-primary { background: var(--skin-primary-btn-bg) !important; border-color: var(--skin-primary-btn-bg) !important; color: var(--skin-primary-btn-text) !important; } .skins-btn-secondary { background: var(--skin-soft-btn-bg) !important; color: var(--skin-soft-btn-text) !important; border-color: var(--skin-panel-border) !important; } .skin-card-actions .skins-btn-primary[disabled] { opacity: 0.9; } /* Field labels / helpers / inputs inside editor */ .skin-field-label { color: var(--skin-title-color) !important; } .skin-field-help { color: var(--skin-muted-color) !important; } .skin-color-input, .skin-text-input { background: var(--skin-input-bg) !important; border-color: var(--skin-input-border) !important; border-radius: var(--skin-field-radius) !important; color: var(--skin-text-color) !important; } .skin-text-input::placeholder { color: var(--skin-muted-color) !important; } .skin-color-input:focus, .skin-text-input:focus { border-color: var(--skin-focus-color) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important; outline: none !important; }