/** * Admin shell CSS overrides — loaded after vendored theme CSS (style.css). * Edit this file, then run `npm run production` (or `npm run dev`) so Mix copies to public/css. * Requires @designStyles in so --type-* / --color-* variables exist. */ .table thead th, .table thead td { color: var(--color-text); font-family: var(--type-table-header-family); font-weight: var(--type-table-header-weight); font-size: var(--type-table-header-size); letter-spacing: var(--type-table-header-tracking); text-transform: var(--type-table-header-transform, uppercase); border-bottom-width: 1px; border-top-width: 0; padding: 0 15px 5px; } .side-menu__label { white-space: nowrap; flex: 1 1 auto; display: flex; align-items: center; color: var(--color-surface); position: relative; font-family: var(--type-nav-item-family); font-size: var(--type-nav-item-size); line-height: var(--type-nav-item-leading); font-weight: var(--type-nav-item-weight); vertical-align: middle; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } table.dataTable thead th, table.dataTable thead td { padding-right: 15px; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 7px; } table.dataTable tbody td.sorting_1 { background-color: var(--color-surface); } /* Static Sidebar Container */ .sidebar-container { position: fixed; top: 0; left: 0; height: 100vh; width: 240px; z-index: 10000 !important; /* Higher than FloBoard sticky navigation (9998) */ overflow: hidden; transition: left 0.3s ease, width 0.25s ease; } .app-sidebar { position: relative; top: 0; left: 0; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); width: 100%; height: 100%; box-shadow: var(--shadow-sidebar); border-right: 1px solid var(--color-sidebar-border); } /* Content Wrapper for Scrollable Area */ .content-wrapper { margin-left: 240px; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: margin-left 0.3s ease; } /* Main Content Area — grows with its content so long pages push the footer down */ .main-content { flex: 1 0 auto; display: flex; flex-direction: column; overflow: visible; } /* Override app-content margin since we're using static sidebar */ .app-content { margin-left: 0 !important; } /* Container does not flex-grow; lets content height drive page length */ .container-fluid { flex: 0 0 auto; overflow: visible; margin-top: 10px; } /* Page content should be scrollable */ .page { height: 100vh; overflow: hidden; } /* Content wrapper is the scroll container */ .content-wrapper { display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overflow-x: hidden; } /* Main content area — grows with content so footer only appears after all content */ .main-content { flex: 1 0 auto; display: flex; flex-direction: column; overflow: visible; width: 100% !important; max-width: 100% !important; } /* Ensure app-content fills available width */ .app-content { width: 100% !important; max-width: 100% !important; } /* Container sizes to its content; does not artificially fill remaining space */ .container-fluid { flex: 0 0 auto; padding-bottom: 30px; width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; } /* Ensure row takes full width */ .container-fluid > .row { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; flex-wrap: wrap !important; } /* Ensure all columns take full width */ .container-fluid > .row > .col-lg-12, .container-fluid > .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 12px !important; flex: 0 0 100% !important; } /* Page content wrapper - full width */ .page-content-wrapper { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .page-content-wrapper > .col-lg-12, .page-content-wrapper > [class*="col-"], .page-content-wrapper > div { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Override Bootstrap row negative margins */ .row { --bs-gutter-x: 0 !important; } /* Footer — at the end of content; only visible when scrolled to bottom */ .main-footer { position: static; background: var(--color-surface); box-shadow: 0 -2px 4px var(--color-overlay-light); border-top: 1px solid var(--color-border); flex-shrink: 0; transition: box-shadow 0.3s ease; } .main-footer:hover { box-shadow: 0 -4px 8px var(--color-overlay-light); } .main-footer-inner { position: relative; display: flex; align-items: center; justify-content: center; } .main-footer-copyright { text-align: center; } .main-footer-version { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: var(--type-caption-size); } /* Smooth scrolling for the entire page */ html { scroll-behavior: smooth; } .side-menu__icon { font-size: 23px; line-height: 0; margin-right: 14px; width: 29px; height: 31px; line-height: 34px; border-radius: 3px; text-align: center; color: var(--color-surface-alt); fill: var(--color-text-muted); } .main-sidemenu { margin-top: 0; height: auto; } .dataTables_info { margin-left: 1%; } .paginate_button { cursor: pointer; } .dataTables_length { margin-left: 1%; } .dataTables_filter { margin-right: 1%; } input.btn.btn-secondary.ml-4 { border-radius: 21px; width: 100px; } /* Sidebar Toggle States */ .sidebar-mini.sidenav-toggled .sidebar-container { width: 70px; } .sidebar-mini.sidenav-toggled .content-wrapper { margin-left: 70px; } /* Bidirectional transitions — only visual props, not layout props that fight the width animation */ .side-menu__label { transition: opacity 0.15s ease, visibility 0.15s ease; } .angle { transition: opacity 0.15s ease, visibility 0.15s ease; } .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; box-shadow: none; text-decoration: none !important; } .sidebar-toggle-btn:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.05); box-shadow: none; } .sidebar-toggle-btn i { font-size: var(--type-caption-size); color: var(--color-surface); } .content-wrapper { transition: margin-left 0.3s ease; } /* Collapsed sidebar improvements */ .sidebar-mini.sidenav-toggled .sidebar-container { width: 70px; } .sidebar-mini.sidenav-toggled .side-menu__label { opacity: 0; visibility: hidden; } .sidebar-mini.sidenav-toggled .side-menu__icon { margin-right: 0; display: flex; align-items: center; justify-content: center; width: 100%; } /* Center menu items when collapsed */ .sidebar-mini.sidenav-toggled .side-menu__item { display: flex; align-items: center; justify-content: center; padding: 15px 0; min-height: 50px; } .sidebar-mini.sidenav-toggled .side-menu__item .side-menu__icon { margin: 0; width: auto; display: flex; align-items: center; justify-content: center; } /* Active menu item — left accent + background tint */ .side-menu__item.active { background: rgba(30, 87, 153, 0.08); border-left: 3px solid var(--color-primary) !important; color: var(--color-primary) !important; } .side-menu__item.active .side-menu__icon, .side-menu__item.active .side-menu__icon i { color: var(--color-primary) !important; } /* Proper alignment for expanded sidebar */ .sidebar-mini:not(.sidenav-toggled) .side-menu__item { display: flex; align-items: center; padding: 10px 10px; min-height: 40px; font-size: var(--type-body-sm-size); font-weight: var(--type-body-weight); } .sidebar-mini:not(.sidenav-toggled) .side-menu__icon { display: flex; align-items: center; justify-content: center; width: 29px; margin-right: 14px; flex-shrink: 0; } .sidebar-mini:not(.sidenav-toggled) .side-menu__label { display: flex; align-items: center; flex: 1; } /* Ensure consistent icon alignment */ .side-menu__icon i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Hide dropdown arrows when collapsed (but show them when expanded or hover-expanded) */ .sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .angle { opacity: 0; visibility: hidden; } /* Ensure arrows are visible when sidebar is expanded */ .sidebar-mini:not(.sidenav-toggled) .angle, .sidebar-mini.sidenav-toggled.sidenav-toggled-open .angle { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } /* Improve spacing for collapsed items */ .sidebar-mini.sidenav-toggled .side-menu li { margin: 0; } .sidebar-mini.sidenav-toggled .side-menu li.slide { margin-bottom: 2px; } /* Hover-expanded state alignment */ .sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-menu__item { display: flex; align-items: center; padding: 12px 20px; min-height: 48px; justify-content: flex-start; } .sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-menu__icon { width: 29px; margin-right: 14px; display: flex; align-items: center; justify-content: center; } .sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-menu__label { display: flex; align-items: center; flex: 1; } /* Consistent menu item spacing */ .side-menu li.slide { margin-bottom: 1px; } .side-menu .side-menu__item { text-decoration: none; color: inherit; border-radius: 4px; transition: background-color 0.3s ease; } .side-menu .side-menu__item:hover { background-color: rgba(255, 255, 255, 0.1); } /* Hover expand animation — container must grow alongside the sidebar */ .sidebar-mini.sidenav-toggled.sidenav-toggled-open .sidebar-container { width: 240px; overflow-x: hidden; } .sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar { width: 100%; box-shadow: var(--shadow-sidebar); } .sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-menu__label { opacity: 1; visibility: visible; } /* Select2 custom styling to match form appearance */ .select2-container--default .select2-selection--single { border-radius: 20px; height: 38px; border: 1px solid var(--color-border); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; padding-left: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; } .select2-dropdown { border: 1px solid var(--color-border); border-radius: 10px; } .select2-search__field { border-radius: 10px; padding: 6px 12px; } .select2-results__option { padding: 6px 12px; } /* Change hover and highlight colors to gray */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-surface-alt); color: var(--color-text); } .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--color-border); } .select2-container--default .select2-results__option:hover { background-color: var(--color-surface-alt); color: var(--color-text); } /* Mobile responsiveness */ @media (max-width: 768px) { .app-sidebar__toggle { order: -1; margin-right: 10px; } .sidebar-container { transform: translateX(-100%); } .sidebar-mini.sidenav-toggled .sidebar-container { transform: translateX(0); width: 240px; } .sidebar-mini.sidenav-toggled .content-wrapper { margin-left: 0; } .sidebar-mini.sidenav-toggled.sidenav-toggled-open .sidebar-container { transform: translateX(0); } } /* Modern Filter Styles */ .filter-input-text { font-size: var(--type-filter-label-size); font-weight: var(--type-filter-label-weight); color: var(--color-text); } .form-control { -webkit-appearance: none; display: block; width: 100%; height: 40px; padding: 0.5rem 1rem; font-weight: var(--type-body-weight); font-size: var(--type-body-sm-size); line-height: 1.5; color: var(--color-text); background-color: var(--color-surface); background-clip: padding-box; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); transition: all 0.2s ease-in-out; box-shadow: var(--shadow-xs); } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .form-control:hover { border-color: var(--color-border); } /* Select Styling */ select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em; padding-right: 2.5rem; } /* Icon Styles */ .text-muted i { font-size: var(--type-body-size); margin-right: 0.5rem; color: var(--color-text-muted); } .text-muted { font-size: var(--type-body-sm-size); font-weight: var(--type-filter-label-weight); color: var(--color-text-muted); margin-bottom: 0.5rem; } /* Refresh Button */ #refreshBtn { width: 37px !important; height: 37px !important; border-radius: 12px !important; background: var(--color-primary); border: none; transition: all 0.2s ease; box-shadow: var(--shadow-sm); } #refreshBtn:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } #refreshBtn:active { transform: translateY(1px); } .fa-refresh { font-size: var(--type-widget-title-size) !important; color: var(--color-surface); } .fa-refresh::before { content: "\f021"; padding: 0; } /* Date Inputs */ input[type="datetime-local"] { cursor: pointer; } /* Container Spacing */ .filters-container { background: var(--color-surface); border-radius: var(--radius-xl); } /* Select2 Custom Styling */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single { height: 44px !important; border: 1.5px solid var(--color-input-border) !important; border-radius: 8px !important; padding: 0 !important; background-color: var(--color-surface) !important; transition: all 0.2s ease !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; padding-left: 12px !important; padding-right: 40px !important; color: var(--color-text) !important; font-size: var(--type-body-sm-size) !important; font-weight: var(--type-filter-label-weight) !important; } .select2-container .select2-selection--single .select2-selection__arrow { height: 40px !important; right: 8px !important; top: 2px !important; } .select2-container .select2-selection--single .select2-selection__arrow b { border-color: var(--color-text) transparent transparent transparent !important; border-width: 6px 5px 0 5px !important; margin-top: -2px !important; } .select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--color-text) !important; box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1) !important; outline: none !important; } .select2-container--default .select2-selection--single:hover { border-color: var(--color-slate) !important; } /* Dropdown styling */ .select2-dropdown { border: 1.5px solid var(--color-text) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; margin-top: 2px !important; } .select2-container--default .select2-results__option { padding: 10px 12px !important; font-size: var(--type-body-sm-size) !important; font-weight: var(--type-filter-label-weight) !important; color: var(--color-text) !important; transition: all 0.2s ease !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-text) !important; color: var(--color-surface) !important; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--color-background) !important; color: var(--color-text) !important; font-weight: var(--type-widget-title-weight) !important; } /* Search box styling */ .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--color-input-border) !important; border-radius: 6px !important; padding: 8px 12px !important; font-size: var(--type-body-sm-size) !important; margin: 8px !important; width: calc(100% - 16px) !important; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--color-text) !important; box-shadow: 0 0 0 2px rgba(73, 80, 87, 0.1) !important; outline: none !important; } /* No results styling */ .select2-container--default .select2-results__option--disabled { color: var(--color-text-muted) !important; font-style: italic !important; } .location-header { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .location-cover { background: var(--gradient-surface); height: 160px; position: relative; display: flex; align-items: flex-end; padding: 1.5rem; } .location-info { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; } .location-title { color: var(--color-text); } .location-title h4 { font-size: var(--type-section-title-size); font-weight: var(--type-widget-title-weight); margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .location-title h4 i { color: var(--color-primary); } .location-meta { color: var(--color-text-muted); font-size: var(--type-body-sm-size); display: flex; align-items: center; gap: 1rem; } .location-meta span { display: flex; align-items: center; gap: 0.5rem; } .location-actions { display: flex; gap: 0.75rem; } .detail-section { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .detail-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.75rem; } .detail-header h5 { margin: 0; color: var(--color-text); font-size: var(--type-body-size); font-weight: var(--type-widget-title-weight); } .detail-header i { color: var(--color-primary); font-size: var(--type-body-size); } .detail-body { padding: 1.5rem; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .detail-item { display: flex; flex-direction: column; gap: 0.5rem; } .detail-label { font-size: var(--type-body-sm-size); font-weight: var(--type-filter-label-weight); color: var(--color-text-muted); } .detail-value { font-size: var(--type-body-sm-size); color: var(--color-text); padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: 42px; display: flex; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: var(--type-body-sm-size); font-weight: var(--type-filter-label-weight); border-radius: 6px; transition: all 0.2s; } .btn i { font-size: var(--type-body-sm-size); } .btn-secondary { background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-text-muted); } .btn-secondary:hover { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary); } .btn-primary { background: var(--color-text-secondary); border: 1px solid var(--color-text-secondary); color: var(--color-surface); } .btn-primary:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); } .status-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: var(--type-caption-size); font-weight: var(--type-widget-title-weight); border-radius: 9999px; } .status-badge i { font-size: var(--type-caption-size); } .status-active { background-color: var(--color-success-light); color: var(--color-success-dark); } .status-inactive { background-color: var(--color-danger-light); color: var(--color-danger-dark); } .devices-table { width: 100%; border-collapse: separate; border-spacing: 0; } .devices-table th { background: var(--color-background); color: var(--color-text-muted); font-size: var(--type-table-header-size); font-weight: var(--type-table-header-weight); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); text-align: left; } .devices-table td { padding: 1rem 1.5rem; color: var(--color-text); font-size: var(--type-table-cell-size); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .devices-table tr:last-child td { border-bottom: none; } .action-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; } .action-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-muted); transition: all 0.2s; } .action-button:hover { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary); } .action-button i { font-size: var(--type-body-sm-size); } .empty-state { padding: 3rem; text-align: center; color: var(--color-text-muted); } .empty-state i { font-size: 2rem; margin-bottom: 1rem; color: var(--color-text-disabled); } .empty-state p { margin: 0; font-size: var(--type-body-sm-size); } /* Modern Select2 Styling */ .select2-container--default .select2-selection--single { border: 2px solid var(--color-border); border-radius: var(--radius-lg); height: 42px; transition: all 0.15s ease-in-out; } .select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; color: var(--color-text); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; } .select2-dropdown { border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-primary); color: var(--color-surface); } /* Modern Card Styling */ .card { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: all 0.15s ease-in-out; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* Modern Button Styling */ .btn { border-radius: var(--radius-lg); font-weight: var(--type-filter-label-weight); transition: all 0.15s ease-in-out; border: none; } .btn-primary { background: var(--gradient-primary); color: var(--color-surface); } .btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Modern Form Styling */ .form-control { border: 2px solid var(--color-border); border-radius: var(--radius-lg); transition: all 0.15s ease-in-out; } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Modern Dashboard Widget Styling */ .l-bg-cherry, .l-bg-blue-dark, .l-bg-green-dark, .l-bg-orange-dark { border-radius: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: all 0.3s ease-in-out; overflow: hidden; position: relative; } .l-bg-cherry:hover, .l-bg-blue-dark:hover, .l-bg-green-dark:hover, .l-bg-orange-dark:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Modern Progress Bar Styling */ .progress { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; } .progress-bar { border-radius: 4px; transition: width 0.6s ease; } /* Modern Sidebar Styling */ .app-sidebar { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .side-menu__item { border-radius: 8px; margin: 4px 12px; transition: all 0.15s ease-in-out; } .side-menu__item:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(4px); } .side-menu__label { white-space: nowrap; flex: 1 1 auto; display: flex; align-items: center; color: var(--color-surface); position: relative; font-family: var(--type-nav-item-family); font-size: var(--type-nav-item-size); font-weight: var(--type-nav-item-weight); line-height: var(--type-nav-item-leading); vertical-align: middle; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } table.dataTable thead th, table.dataTable thead td { padding-right: 15px; } /* Firefox */ /* ========================================================================= * DESIGN SYSTEM GLOBAL TYPOGRAPHY LAYER * Applied after vendored style.css so semantic --type-* variables win. * Only targets the admin/application shell. Preview and TV display surfaces * keep their own --font-scale / --theme-font-size-* driven styles. * ========================================================================= */ body, .main-content, .app-content, .content-wrapper { font-family: var(--type-body-family); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-leading); } /* DataTable column headers */ table.dataTable thead th, table.dataTable thead td { font-family: var(--type-table-header-family); font-size: var(--type-table-header-size); font-weight: var(--type-table-header-weight); letter-spacing: var(--type-table-header-tracking); text-transform: var(--type-table-header-transform, uppercase); } /* DataTable row cells */ table.dataTable tbody td, table.dataTable tbody th { font-family: var(--type-table-cell-family); font-size: var(--type-table-cell-size); font-weight: var(--type-table-cell-weight); line-height: var(--type-table-cell-leading); } /* Generic Bootstrap table cells */ .table tbody td, .table tbody th { font-family: var(--type-table-cell-family); font-size: var(--type-table-cell-size); } /* Filter bar inputs, selects, labels */ .filter-group label, .filter-bar label, .form-label, .col-form-label { font-family: var(--type-filter-label-family); font-size: var(--type-filter-label-size); font-weight: var(--type-filter-label-weight); line-height: var(--type-filter-label-leading); } /* Card and widget headers */ .card-header, .card-title, .widget-header, .panel-heading { font-family: var(--type-widget-title-family); font-size: var(--type-widget-title-size); font-weight: var(--type-widget-title-weight); line-height: var(--type-widget-title-leading); } /* Section titles */ .section-title, h3.title, .panel-title { font-family: var(--type-section-title-family); font-size: var(--type-section-title-size); font-weight: var(--type-section-title-weight); line-height: var(--type-section-title-leading); } /* Page-level heading */ .page-header h1, .page-title { font-family: var(--type-page-title-family); font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-leading); } /* Helper / caption text */ .text-muted, small, .form-text { font-family: var(--type-caption-family); font-size: var(--type-caption-size); } /* Badges and overline labels */ .badge, .label { font-family: var(--type-overline-family); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-tracking); text-transform: var(--type-overline-transform, uppercase); } /* Code / monospace blocks */ code, pre, .font-monospace { font-family: var(--type-mono-family); font-size: var(--type-mono-size); } /* Sidebar font-family override for the nav container */ .app-sidebar, .side-menu { font-family: var(--type-nav-item-family); }