/* ============================================ Summit ERP - Global Button Styles Standardized button styles to replace inline Tailwind ============================================ */ /* One radius for all Summit buttons (matches .btn-summit-success / rounded-lg). */ :root { --summit-btn-radius: 0.5rem; /* Full-page shell (Ascent): change these once to retune every screen using body.summit-app-body */ --summit-app-body-bg: #f5f5f5; --summit-app-body-color: #f3f4f6; --summit-app-body-selection-bg: #dbeafe; --summit-app-body-selection-color: #1e3a8a; /* Space below fixed menu chrome before scrollable body content (#page-wrapper) */ --summit-page-wrapper-padding-top: 1rem; } /* Ascent staff / Tailwind pages — add class "summit-app-body" on ; page-specific classes (e.g. top-navigation, page-reinit-localdb) stay alongside. */ body.summit-app-body { min-height: 100vh; background-color: var(--summit-app-body-bg); color: var(--summit-app-body-color); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.summit-app-body::selection, body.summit-app-body *::selection { background-color: var(--summit-app-body-selection-bg); color: var(--summit-app-body-selection-color); } /* Staff full-page shell (#wrapper > #page-wrapper): breathing room beneath fixed navbar row */ body.summit-app-body #page-wrapper { padding-top: var(--summit-page-wrapper-padding-top); } /* Legacy Inspinia body font: Open Sans. Overrides minified summit-tailwind-built .font-sans (quotes required for multi-word names). */ .font-sans { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Base Button Structure — shared by .btn-summit and every btn-summit-* variant. Each variant class includes this base; you can use a single class (e.g. btn-summit-primary) without btn-summit. */ .btn-summit, .btn-summit-primary, .btn-summit-secondary, .btn-summit-danger, .btn-summit-danger-outline, .btn-summit-info, .btn-summit-purple, .btn-summit-success, .btn-summit-print, .btn-summit-primary-solid, .btn-summit-amber, .btn-summit-summary, .btn-summit-reports, .btn-summit-purple-solid, .btn-summit-cyan, .btn-summit-export, .btn-summit-view, .btn-summit-warning, .btn-summit-audit, .btn-summit-manage, .btn-summit-actions, .btn-summit-view-dropdown, .btn-summit-reports-alt, .btn-summit-icon, .btn-summit-icon-label, .btn-summit-icon-primary, .btn-summit-icon-success, .btn-summit-icon-view, .btn-summit-icon-warning, .btn-summit-icon-danger, .btn-summit-icon-secondary, .btn-summit-icon-info, .btn-summit-icon-info-solid, .btn-summit-icon-orange, .btn-summit-icon-run { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; /* gap-2 */ border-radius: var(--summit-btn-radius); /* rounded-lg — same as .btn-summit-success */ font-size: 0.875rem; /* text-sm */ font-weight: 700; /* font-bold */ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; cursor: pointer; border: 1px solid transparent; text-decoration: none !important; line-height: 1; white-space: nowrap; } .btn-summit i, .btn-summit-primary i, .btn-summit-secondary i, .btn-summit-danger i, .btn-summit-danger-outline i, .btn-summit-info i, .btn-summit-purple i, .btn-summit-success i, .btn-summit-print i, .btn-summit-primary-solid i, .btn-summit-amber i, .btn-summit-summary i, .btn-summit-reports i, .btn-summit-purple-solid i, .btn-summit-cyan i, .btn-summit-export i, .btn-summit-view i, .btn-summit-warning i, .btn-summit-audit i, .btn-summit-manage i, .btn-summit-actions i, .btn-summit-view-dropdown i, .btn-summit-reports-alt i, .btn-summit-icon i, .btn-summit-icon-label i, .btn-summit-icon-primary i, .btn-summit-icon-success i, .btn-summit-icon-view i, .btn-summit-icon-warning i, .btn-summit-icon-danger i, .btn-summit-icon-secondary i, .btn-summit-icon-info i, .btn-summit-icon-info-solid i, .btn-summit-icon-orange i, .btn-summit-icon-run i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-summit:focus, .btn-summit-primary:focus, .btn-summit-secondary:focus, .btn-summit-danger:focus, .btn-summit-danger-outline:focus, .btn-summit-info:focus, .btn-summit-purple:focus, .btn-summit-success:focus, .btn-summit-print:focus, .btn-summit-primary-solid:focus, .btn-summit-amber:focus, .btn-summit-summary:focus, .btn-summit-reports:focus, .btn-summit-purple-solid:focus, .btn-summit-cyan:focus, .btn-summit-export:focus, .btn-summit-view:focus, .btn-summit-warning:focus, .btn-summit-audit:focus, .btn-summit-manage:focus, .btn-summit-actions:focus, .btn-summit-view-dropdown:focus, .btn-summit-reports-alt:focus, .btn-summit-icon:focus, .btn-summit-icon-label:focus, .btn-summit-icon-primary:focus, .btn-summit-icon-success:focus, .btn-summit-icon-view:focus, .btn-summit-icon-warning:focus, .btn-summit-icon-danger:focus, .btn-summit-icon-secondary:focus, .btn-summit-icon-info:focus, .btn-summit-icon-info-solid:focus, .btn-summit-icon-orange:focus, .btn-summit-icon-run:focus { outline: 2px solid transparent; outline-offset: 2px; } /* Base-only markup (class contains btn-summit but no btn-summit-* variant): layout from the shared block above has no visible fill. Add a neutral outline so bare btn-summit is still visibly a control (legacy or dev samples). Any class like btn-summit-primary excludes this. */ .btn-summit:not([class*="btn-summit-"]) { background-color: #f9fafb; border-color: #e5e7eb; color: #374151 !important; padding: 0.5rem 1rem; min-height: 38px; font-weight: 500; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-summit:not([class*="btn-summit-"]):hover { background-color: #f3f4f6; color: #111827 !important; } /* Primary Action Button (Blue Gradient) Used for: Edit, Update, Save Changes, Primary actions Color: Blue (xanh dương) */ .btn-summit-primary { background-image: linear-gradient(to right, #2563eb, #1d4ed8); /* blue-600 -> blue-700 */ color: white !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */ padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; border-radius: var(--summit-btn-radius); overflow: hidden; /* clip gradient to the same curve as .btn-summit-success */ } .btn-summit-primary:hover { background-image: linear-gradient(to right, #1d4ed8, #1e40af); /* blue-700 -> blue-800 */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */ color: white !important; } .btn-summit-primary:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; /* ring-blue-500 */ } /* Secondary Button (White/Gray) Used for: Cancel, Back, Exit */ .btn-summit-secondary { background-color: white; border-color: #d1d5db; /* gray-300 */ color: #374151 !important; /* gray-700 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ font-weight: 500; /* font-medium */ padding: 0.5rem 1rem; /* py-2 px-4 */ border-radius: var(--summit-btn-radius); /* rounded-lg */ height: 38px; /* Fixed height for consistency */ display: inline-flex; align-items: center; justify-content: center; } .btn-summit-secondary:hover { background-color: #f9fafb; /* gray-50 */ color: #111827 !important; /* gray-900 */ } .btn-summit-secondary:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5; /* ring-indigo-600 */ border-color: #6366f1; } /* Danger Button High Emphasis (Red Fill) Used for: Delete, Remove, Primary Destructive actions Color: Red (đỏ) */ .btn-summit-danger { background-color: #dc2626; /* red-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; border-radius: var(--summit-btn-radius); } .btn-summit-danger:hover { background-color: #b91c1c; /* red-700 */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */ color: white !important; } .btn-summit-danger:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ef4444; /* ring-red-500 */ } /* Danger Outline Button (Red Outline) Used for: Delete actions (secondary visual weight) */ .btn-summit-danger-outline { background-color: white; border: 1px solid #fee2e2; /* red-100 */ color: #dc2626 !important; /* red-600 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--summit-btn-radius); font-size: 0.875rem; font-weight: 700; text-decoration: none !important; transition: all 0.2s ease; } .btn-summit-danger-outline:hover { background-color: #fef2f2; /* red-50 */ border-color: #fecaca; /* red-200 */ color: #b91c1c !important; /* red-700 */ } .btn-summit-danger-outline:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ef4444; /* ring-red-500 */ } /* Info Button (Cyan) Used for: Email actions, 2FA */ .btn-summit-info { background-color: #0891b2; /* cyan-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--summit-btn-radius); font-size: 0.875rem; font-weight: 700; text-decoration: none !important; transition: all 0.2s ease; } .btn-summit-info:hover { background-color: #0e7490; /* cyan-700 */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); color: white !important; } .btn-summit-info:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #06b6d4; /* ring-cyan-500 */ } /* Purple Button (Royal/Special) Used for: Journals, Uploads, Special Features */ .btn-summit-purple { background-color: #9333ea; /* purple-600 */ color: white !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--summit-btn-radius); font-size: 0.875rem; font-weight: 700; text-decoration: none !important; transition: all 0.2s ease; } .btn-summit-purple:hover { background-color: #7e22ce; /* purple-700 */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); color: white !important; } .btn-summit-purple:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a855f7; /* ring-purple-500 */ } /* Success Button (Green Solid) Used for: Create New, Add, Save (in create forms), General Success actions Color: Green (xanh lá) */ .btn-summit-success { background-color: #059669 !important; /* emerald-600 */ background-image: none !important; color: white !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 0.5rem 1rem; /* py-2 px-4 */ height: 38px; /* Fixed 38px height */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--summit-btn-radius); font-size: 0.875rem; font-weight: 700; text-decoration: none !important; transition: all 0.2s ease; } .btn-summit-success:hover { background-color: #047857 !important; /* emerald-700 */ background-image: none !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); color: white !important; } .btn-summit-success:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981; /* ring-emerald-500 */ } /* Print Button (emerald-600 — toolbar Print / PDF; matches success green family) */ .btn-summit-print { background-color: #059669 !important; /* emerald-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-print:hover { background-color: #047857 !important; /* emerald-700 */ color: white !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-print:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981; /* ring-emerald-500 — aligned with .btn-summit-success */ } /* Primary Button (Solid Blue - Action Bar Style) Specifically matched to the 38px high action bar buttons */ .btn-summit-primary-solid { background-color: #2563eb; /* blue-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; } .btn-summit-primary-solid:hover { background-color: #1d4ed8; /* blue-700 */ transform: translateY(-1px); } /* Amber/Orange Button (Action Bar Style) Used for: Process, Audit, Warning-level actions */ .btn-summit-amber { background-color: #d97706; /* amber-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; } .btn-summit-amber:hover { background-color: #b45309; /* amber-700 */ } /* Summary/Detail Toggle Button (Amber - Action Bar Style) Used for: Toggling between Summary and Detail views Color: Amber (#d97706 - amber-600) */ .btn-summit-summary { background-color: #d97706 !important; /* amber-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-summary:hover { background-color: #b45309 !important; /* amber-700 */ color: white !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-summary:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(217, 119, 6, 0.3); /* focus ring amber-600 */ } /* Reports Button (Indigo - Action Bar Style) Used for: Reports dropdown buttons, Report actions, Analytics Color: Indigo (#6366f1 - indigo-500) - professional, trustworthy, data-focused Indigo is commonly used for reports/analytics in professional applications */ .btn-summit-reports { background-color: #6366f1 !important; /* indigo-500 - professional indigo */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-reports:hover { background-color: #4f46e5 !important; /* indigo-600 - darker on hover */ color: white !important; transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-reports:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(99, 102, 241, 0.3); /* focus ring indigo-500 */ } /* Purple Button (Action Bar Style) Used for: Export, Special reports */ .btn-summit-purple-solid { background-color: #9333ea; /* purple-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; } .btn-summit-purple-solid:hover { background-color: #7e22ce; /* purple-700 */ transform: translateY(-1px); } /* DataTables Export Button (Cyan/Blue) Used for: CSV/Excel export buttons in DataTables Color: Cyan (professional export/download action, different from green create buttons) Note: Main styling is in summit-table-styles.css with higher specificity This is a fallback for buttons outside .summit-table context */ .dt-button-export { background-color: #0891b2 !important; /* cyan-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .dt-button-export:hover { background-color: #0e7490 !important; /* cyan-700 */ color: white !important; transform: none !important; /* Force no jump from .btn:hover */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .dt-button-export:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(8, 145, 178, 0.3); /* focus ring cyan */ } /* Cyan Button (Action Bar Style) Used for: Info, Alternative Print, View */ .btn-summit-cyan { background-color: #0891b2; /* cyan-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; } .btn-summit-cyan:hover { background-color: #0e7490; /* cyan-700 */ transform: translateY(-1px); } /* Export Button (Cyan - Action Bar Style) Used for: Export dropdown buttons, Export actions Color: Cyan (professional export/download action, different from green create buttons) */ .btn-summit-export { background-color: #0891b2 !important; /* cyan-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-export:hover { background-color: #0e7490 !important; /* cyan-700 */ color: white !important; /* transform: translateY(-1px); */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-export:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(8, 145, 178, 0.3); /* focus ring cyan */ } /* ========================================= Alignment Fixes for Export Buttons Fixes icon and text misalignment issue ========================================= */ .dt-button-export, .btn-summit-export { line-height: 1 !important; } .dt-button-export i, .btn-summit-export i { display: inline-flex !important; align-items: center !important; line-height: 1 !important; } .btn-summit-cyan:hover { background-color: #0e7490; /* cyan-700 */ transform: translateY(-1px); } /* View Button (Gray - Action Bar Style) Used for: View dropdown buttons, View actions, Display options Color: Gray (neutral view/display action, similar to secondary but specifically for viewing) */ .btn-summit-view { background-color: #6b7280 !important; /* gray-500 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-view:hover { background-color: #4b5563 !important; /* gray-600 */ color: white !important; transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-view:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(107, 114, 128, 0.3); /* focus ring gray */ } /* Warning Button (amber) — status error link, supplier back; prefer btn-summit-secondary for Exit when migrating */ .btn-summit-warning { background-color: #d97706 !important; /* amber-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; } .btn-summit-warning:hover { background-color: #b45309 !important; /* amber-700 */ color: white !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .btn-summit-warning:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(217, 119, 6, 0.4); } /* Audit Dropdown Button (Pink - Action Bar Style) Used for: Audit reports, transaction checks Color: Pink (#fd397a) */ .btn-summit-audit { background-color: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; cursor: pointer; } .btn-summit-audit:hover { background-color: #f9fafb !important; border-color: #fd397a !important; } .btn-summit-audit i:first-child { color: #fd397a !important; } /* Manage Dropdown Button (Blue - Action Bar Style) Used for: Management actions, Settings, Asset management Color: Blue (#56a3f0) */ .btn-summit-manage { background-color: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; cursor: pointer; } .btn-summit-manage:hover { background-color: #f9fafb !important; border-color: #56a3f0 !important; } .btn-summit-manage i:first-child { color: #56a3f0 !important; } /* Actions Dropdown Button (Purple - Action Bar Style) Used for: Bulk actions, Special operations Color: Purple (#a029f5) */ .btn-summit-actions { background-color: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; cursor: pointer; } .btn-summit-actions:hover { background-color: #f9fafb !important; border-color: #a029f5 !important; } .btn-summit-actions i:first-child { color: #a029f5 !important; } /* View Dropdown Button (Indigo - Action Bar Style) Used for: View toggles, Display options Color: Indigo (#6366f1) */ .btn-summit-view-dropdown { background-color: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; cursor: pointer; } .btn-summit-view-dropdown:hover { background-color: #f9fafb !important; border-color: #6366f1 !important; } .btn-summit-view-dropdown i:first-child { color: #6366f1 !important; } /* Same control as above, sized for table rows next to btn-summit-icon-label (h-8). */ .btn-summit-view-dropdown.btn-summit-view-dropdown--row { height: 2rem; min-height: 2rem; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; gap: 0.375rem; line-height: 1; } .btn-summit-view-dropdown.btn-summit-view-dropdown--row span { font-size: 0.75rem; } /* Filter dropdown scroll panel — consistent 15rem height across all filter dropdowns */ .summit-filter-dropdown-scroll { max-height: 30rem; overflow-y: auto; } /* Force scrollbar always visible (not overlay/auto-hide) */ .scrollbar-show { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; } .scrollbar-show::-webkit-scrollbar { width: 5px; } .scrollbar-show::-webkit-scrollbar-track { background: #f1f5f9; } .scrollbar-show::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 6px; } /* Reports Dropdown Button (Orange - Action Bar Style) Used for: Reports menu buttons with secondary look Color: Orange (#f7a54a) */ .btn-summit-reports-alt { background-color: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 0.5rem 1rem; border-radius: var(--summit-btn-radius); height: 38px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none !important; cursor: pointer; } .btn-summit-reports-alt:hover { background-color: #f9fafb !important; border-color: #f7a54a !important; } .btn-summit-reports-alt i:first-child { color: #f7a54a !important; } /* ========================================= Icon Button Variants (Small, Square) Used for: Table actions (Edit, Delete, More) ========================================= */ .btn-summit-icon { width: 2rem; /* w-8 */ height: 2rem; /* h-8 */ padding: 0; border-radius: var(--summit-btn-radius); /* rounded-lg — same as .btn-summit-success */ display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; text-decoration: none !important; vertical-align: middle; cursor: pointer; border: 1px solid transparent; } /* New class for action buttons with labels (Edit, Delete, Email) Fixed width to ensure uniformity across lists */ .btn-summit-icon-label { min-width: 68px; /* Reduced from 90px fixed width */ height: 2rem; /* h-8 */ padding: 0 0.5rem; border-radius: var(--summit-btn-radius); display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; /* Reduced gap */ transition: all 0.2s ease; text-decoration: none !important; vertical-align: middle; cursor: pointer; border: 1px solid transparent; font-weight: 600; font-size: 0.75rem; /* text-xs */ } .btn-summit-icon-primary { background-color: #93c5fd; /* blue-300 - softer, lighter blue */ color: #1e40af !important; /* blue-800 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #bfdbfe; /* blue-200 border */ } .btn-summit-icon-primary:hover { background-color: #60a5fa; /* blue-400 - slightly darker on hover */ color: #1e3a8a !important; /* blue-900 - darker text on hover */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #93c5fd; /* blue-300 border */ } .btn-summit-icon-success { background-color: #86efac; /* green-300 - softer, lighter green */ color: #14532d !important; /* green-900 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #bbf7d0; /* green-200 border */ } .btn-summit-icon-success:hover { background-color: #4ade80; /* green-400 - slightly darker on hover */ color: #14532d !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #86efac; /* green-300 border */ } /* Icon row — view / email (supplier list); indigo tint */ .btn-summit-icon-view { background-color: #a5b4fc; /* indigo-300 */ color: #312e81 !important; /* indigo-900 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #c7d2fe; /* indigo-200 */ } .btn-summit-icon-view:hover { background-color: #818cf8; /* indigo-400 */ color: #1e1b4b !important; /* indigo-950 */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #a5b4fc; } .btn-summit-icon-warning { background-color: #fcd34d; /* amber-300 - softer, lighter amber */ color: #78350f !important; /* amber-900 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #fde68a; /* amber-200 border */ } .btn-summit-icon-warning:hover { background-color: #fbbf24; /* amber-400 - slightly darker on hover */ color: #78350f !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #fcd34d; /* amber-300 border */ } .btn-summit-icon-danger { background-color: #fca5a5; /* red-300 - softer, lighter red */ color: #991b1b !important; /* red-800 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #fecaca; /* red-200 border */ } .btn-summit-icon-danger:hover { background-color: #f87171; /* red-400 - slightly darker on hover */ color: #7f1d1d !important; /* red-900 - darker text on hover */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #fca5a5; /* red-300 border */ } .btn-summit-icon-secondary { background-color: #f3f4f6; /* gray-100 */ color: #4b5563 !important; /* gray-600 */ } .btn-summit-icon-secondary:hover { background-color: #4b5563; /* gray-600 */ color: white !important; transform: scale(1.1); } .btn-summit-icon-info { background-color: #7dd3fc; /* cyan-300 - softer, lighter cyan */ color: #0e7490 !important; /* cyan-700 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #a5f3fc; /* cyan-200 border */ } .btn-summit-icon-info:hover { background-color: #38bdf8; /* cyan-400 - slightly darker on hover */ color: #0c4a6e !important; /* cyan-900 - darker text on hover */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #7dd3fc; /* cyan-300 border */ } /* Solid cyan — same palette as .btn-summit-info (table row icon-label, e.g. Duplicate) */ .btn-summit-icon-info-solid { background-color: #0891b2; /* cyan-600 */ color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid transparent; } .btn-summit-icon-info-solid:hover { background-color: #0e7490; /* cyan-700 — matches .btn-summit-info:hover */ color: white !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .btn-summit-icon-info-solid:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #06b6d4; /* ring-cyan-500 — matches .btn-summit-info:focus */ } .btn-summit-icon-orange { background-color: #fed7aa; /* orange-200 - softer, lighter orange */ color: #92400e !important; /* orange-900 - darker text for contrast */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-summit-icon-orange:hover { background-color: #fb923c; /* orange-400 - slightly darker on hover */ color: #7c2d12 !important; /* orange-900 - darker text on hover */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } /* Table row — open/run linked report (Manage Reports, external URL) */ .btn-summit-icon-run { background-color: #bae6fd; /* sky-200 */ color: #075985 !important; /* sky-800 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #7dd3fc; /* sky-300 */ } .btn-summit-icon-run:hover { background-color: #7dd3fc; /* sky-300 */ color: #0c4a6e !important; /* sky-900 */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); border-color: #38bdf8; /* sky-400 */ } /* Native