/** * D4 modern UI layer — loaded last in after theme, components, and dynamic CSS. * Tweak tokens here to adjust density, radius, and accent without editing vendor files. */ :root { --d4-modern-radius-sm: 0.375rem; --d4-modern-radius: 0.5rem; --d4-modern-radius-lg: 0.75rem; --d4-modern-control-py: 0.5rem; --d4-modern-control-px: 0.85rem; --d4-modern-control-height: 36px; --d4-modern-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --d4-modern-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08); --d4-modern-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1); --d4-modern-border: rgba(15, 23, 42, 0.08); --d4-modern-accent: #3b5bdb; --d4-modern-accent-hover: #2f4bc4; --d4-modern-row-hover: rgba(59, 91, 219, 0.04); --d4-modern-row-stripe: rgba(248, 250, 252, 0.9); } @media (prefers-reduced-motion: reduce) { .btn, .form-control, .form-select, .page-title-box, .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .page-link { transition: none !important; } } /* --- Page chrome --- */ .d4-content-data { letter-spacing: 0.01em; } .page-title-box { border-radius: var(--d4-modern-radius-lg); padding: 0.5rem 0.75rem !important; border: 0 !important; background: #fff; box-shadow: var(--d4-modern-shadow-xs); gap: 0.75rem; } /* Mobile header spacing (horizontal layout) */ @media (max-width: 767.98px) { [data-layout=horizontal] .page-content { padding-top: 46px !important; /* clear fixed topbar */ padding-left: 0!important; padding-right: 0!important; } .page-title-row { margin-top: 0.25rem !important; } .page-title-box { padding: 0.5rem 0.75rem !important; margin-bottom: 0.75rem !important; } /* Topbar dropdowns: flush top offset (matches static mobile header; Popper often sets top otherwise) */ #page-topbar .topbar-user .dropdown-menu, #page-topbar .top-applications-widget .dropdown-menu, #page-topbar .topbar-head-dropdown .dropdown-menu { top: 0 !important; } .navbar-header .topbar-head-dropdown .dropdown-menu.show { top: 0 !important; } } /* Desktop: slim-header spacing (horizontal layout) */ @media (min-width: 1024.1px) { [data-layout=horizontal] body.slim-header .page-content { margin-top: 39px; } } /* * Mobile vertical / semibox drawer: same feel as D4 datatable filter & column sidebars * (D4DataTable.css .d4-dt-sidebar / backdrop — transform + 0.18s opacity), but from the * physical start edge (left in LTR). Scoped so horizontal top menu (body.menu) is unchanged. */ @media (max-width: 767.98px) { html[data-layout=vertical]:not([dir=rtl]) .app-menu.navbar-menu, html[data-layout=semibox]:not([dir=rtl]) .app-menu.navbar-menu { left: 0; right: auto; margin-right: 0 !important; width: min(var(--vz-vertical-menu-width, 250px), 92vw); top: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.18s ease; will-change: transform; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22); border-radius: 0 var(--d4-modern-radius-lg, 0.75rem) var(--d4-modern-radius-lg, 0.75rem) 0; } html[data-layout=vertical][dir=rtl] .app-menu.navbar-menu, html[data-layout=semibox][dir=rtl] .app-menu.navbar-menu { left: auto; right: 0; margin-right: 0 !important; width: min(var(--vz-vertical-menu-width, 250px), 92vw); top: 0; bottom: 0; transform: translateX(100%); transition: transform 0.18s ease; will-change: transform; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22); border-radius: var(--d4-modern-radius-lg, 0.75rem) 0 0 var(--d4-modern-radius-lg, 0.75rem); } html[data-layout=vertical] body.vertical-sidebar-enable .app-menu.navbar-menu, html[data-layout=semibox] body.vertical-sidebar-enable .app-menu.navbar-menu { transform: translateX(0); } /* Backdrop: match .d4-dt-sidebar-backdrop (opacity 0.18s); keep display:block for transition */ html[data-layout=vertical] .vertical-overlay, html[data-layout=semibox] .vertical-overlay { display: block !important; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; background-color: rgba(0, 0, 0, 0.25); } html[data-layout=vertical] body.vertical-sidebar-enable .vertical-overlay, html[data-layout=semibox] body.vertical-sidebar-enable .vertical-overlay { opacity: 1; pointer-events: auto; } } .page-title-box.extra-form { /* keep same styling; class is used widely */ } .page-title-box > h4 { margin: 0 !important; font-weight: 700; letter-spacing: 0.02em; } .page-title-box .page-title-right { margin-left: auto; } .page-title-right .list-grid-nav { display: flex; align-items: center; gap: 0.5rem !important; flex-wrap: wrap; } .page-title-right .tool-item .btn { min-height: 2.0rem; padding: 0.35rem 0.7rem; } /* --- Empty states (modern placeholders) --- */ .d4-empty-state { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--d4-modern-radius-lg); border: 1px dashed rgba(15, 23, 42, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%); box-shadow: var(--d4-modern-shadow-xs); } .d4-empty-state__media { flex: 0 0 auto; } .d4-empty-state__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(59, 91, 219, 0.10); color: var(--d4-modern-accent); } .d4-empty-state__icon i { font-size: 20px; } .d4-empty-state__content { min-width: 0; flex: 1 1 auto; } .d4-empty-state__title { font-weight: 800; color: var(--vz-heading-color, #0f172a); letter-spacing: 0.01em; line-height: 1.15; } .d4-empty-state__subtitle { margin-top: 2px; font-weight: 600; color: rgba(15, 23, 42, 0.60); } .d4-empty-state__actions { flex: 0 0 auto; } .d4-empty-state__actions .btn { min-height: 40px; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: 0 10px 22px rgba(59, 91, 219, 0.20); } @media (max-width: 575.98px) { .d4-empty-state { flex-wrap: wrap; } .d4-empty-state__actions { width: 100%; } .d4-empty-state__actions .btn { width: 100%; justify-content: center; } } /* Disable action icons when prerequisites missing */ .form-icon .action-modal-contact.is-disabled, .form-icon.is-disabled .action-modal-contact { pointer-events: none; opacity: 0.35; filter: grayscale(1); } .page-title-box h4 { font-weight: 600; letter-spacing: 0.02em; color: var(--vz-heading-color, #1e293b); } /* --- Buttons --- */ .btn { border-radius: var(--d4-modern-radius); font-weight: 500; min-height: var(--d4-modern-control-height); padding: var(--d4-modern-control-py) var(--d4-modern-control-px); line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .btn > i, .btn > span { line-height: 1; } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.25); } .btn:not(:disabled):not(.disabled):active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, var(--d4-modern-accent) 0%, var(--d4-modern-accent-hover) 100%); border-color: var(--d4-modern-accent-hover); box-shadow: var(--d4-modern-shadow-xs); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, var(--d4-modern-accent-hover) 0%, #243aa8 100%); border-color: #243aa8; box-shadow: var(--d4-modern-shadow-sm); } .btn-soft-primary, .btn-soft-secondary, .btn-soft-success, .btn-soft-danger { border-radius: var(--d4-modern-radius); } .btn-sm { border-radius: var(--d4-modern-radius-sm); min-height: calc(var(--d4-modern-control-height) - 0.25rem); padding: calc(var(--d4-modern-control-py) - 0.1rem) calc(var(--d4-modern-control-px) - 0.15rem); } .header-item.btn { border-radius: var(--d4-modern-radius); } /* Keep button groups / split buttons aligned */ .btn-group > .btn, .input-group > .btn { min-height: var(--d4-modern-control-height); } /* --- Forms & search --- */ .form-control, .form-select, .input-group-text { border-radius: var(--d4-modern-radius); border-color: var(--d4-modern-border); box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control, .form-select, input.form-control { /* Keep same padding for editable + readonly */ padding: var(--d4-modern-control-py) var(--d4-modern-control-px); height: var(--d4-modern-control-height); min-height: var(--d4-modern-control-height); font-weight: 500; color: var(--vz-body-color, #0f172a); background-color: #fff; } textarea.form-control { padding: var(--d4-modern-control-py) var(--d4-modern-control-px); min-height: var(--d4-modern-control-height); font-weight: 500; color: var(--vz-body-color, #0f172a); background-color: #fff; } .form-control::placeholder, .form-select::placeholder, textarea::placeholder, input::placeholder { color: rgba(15, 23, 42, 0.45); font-weight: 500; } .form-control:disabled, .form-select:disabled, .form-control[readonly], .form-select[readonly] { opacity: 1; /* avoid washed-out look */ color: rgba(15, 23, 42, 0.72); background: rgba(248, 250, 252, 0.92); border-color: rgba(15, 23, 42, 0.1); box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03); } /* Ensure readonly doesn't change spacing via UA / theme rules */ .form-control[readonly], .form-select[readonly], textarea.form-control[readonly], input.form-control[readonly], .form-control:disabled, .form-select:disabled, textarea.form-control:disabled, input.form-control:disabled { padding: var(--d4-modern-control-py) var(--d4-modern-control-px) !important; height: var(--d4-modern-control-height); min-height: var(--d4-modern-control-height); } /* Select2 height + alignment (match inputs) */ .select2-container--default .select2-selection--single { height: var(--d4-modern-control-height) !important; border-radius: var(--d4-modern-radius) !important; border-color: var(--d4-modern-border) !important; } .select2-container .select2-selection--multiple { border: var(--vz-border-width) solid #eeeff0 !important; } .select2-dropdown { border: 1px solid #eeeff0 !important; box-shadow: none !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--d4-modern-control-height) - 2px); padding-left: var(--d4-modern-control-px) !important; padding-right: 2.25rem !important; /* room for arrow/clear */ font-weight: 500; color: var(--vz-body-color, #0f172a); } .swal2-modal .select2-container--default .select2-selection--single .select2-selection__rendered { margin-top: -4px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; font-weight: 100; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--d4-modern-control-height) !important; right: 0.6rem !important; } /* Select2 clear "x" spacing */ .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; right: 2.1rem !important; /* leave room before arrow */ top: 50% !important; transform: translateY(-50%); margin: 0 !important; padding: 0 0.25rem; line-height: 1; font-size: 18px; } .select2-container--default.select2-container--disabled .select2-selection--single, .select2-container--default .select2-selection--single[aria-disabled="true"] { opacity: 1 !important; background: rgba(248, 250, 252, 0.92) !important; border-color: rgba(15, 23, 42, 0.1) !important; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03) !important; } .select2-container--default.select2-container--disabled .select2-selection__rendered { color: rgba(15, 23, 42, 0.72) !important; } .form-control:focus, .form-select:focus { border-color: rgba(59, 91, 219, 0.45); box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12); } /* Color input (native) */ input[type="color"].form-control { padding: 0.25rem !important; min-height: var(--d4-modern-control-height); } input[type="color"].form-control::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"].form-control::-webkit-color-swatch { border-radius: calc(var(--d4-modern-radius) - 2px); border: 1px solid rgba(15, 23, 42, 0.10); } /* Spectrum input (with add-on swatch) */ .sp-original-input-container .sp-add-on { border: 1px solid var(--d4-modern-border) !important; border-right: 0 !important; background: #fff !important; } .sp-original-input-container input.spectrum.with-add-on { border-left: 0 !important; } .sp-original-input-container .sp-add-on .sp-colorize { border-radius: inherit; } .D4DataTable .search-box .form-control { border-radius: var(--d4-modern-radius-lg); padding-left: 1rem; min-height: 2.5rem; } .D4DataTable .search-box .search-icon { color: var(--vz-secondary-color, #64748b); } /* D4DataTable actions: slightly smaller than global controls */ .D4DataTable .table-tools-right .btn, .D4DataTable .table-tools-left .btn, .D4DataTable .card-header .btn { min-height: 2.0rem !important; padding: 0.4rem 0.7rem !important; line-height: 1.1 !important; } .D4DataTable .table-tools-right .btn.btn-sm, .D4DataTable .table-tools-left .btn.btn-sm { height: 36px !important; min-height: 36px !important; padding: 0.35rem 0.6rem !important; } /* --- D4 data table shell --- */ .card.D4DataTable > .card-header { border-radius: var(--d4-modern-radius-lg) var(--d4-modern-radius-lg) 0 0 !important; border: 0 !important; box-shadow: none !important; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; position: relative; z-index: 3; /* keep header dropdowns above table */ } /* Divider between table header tools and column headers */ .card.D4DataTable > .card-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--d4-modern-border); } /* Ensure datatable dropdown panels are above the grid */ .D4DataTable .dropdown-menu { z-index: 1080 !important; } .D4DataTable .section-table, .D4DataTable .table-card { position: relative; z-index: 1; } /* --- Tabs (fix square top-left when tabs exist) --- */ .nav-tabs { border-bottom: 0; gap: 0.25rem; } .nav-tabs .nav-link { border: 0 !important; border-radius: var(--d4-modern-radius) var(--d4-modern-radius) 0 0 !important; font-weight: 600; color: var(--vz-secondary-color, #64748b); background: transparent; padding: 0.75rem 1rem; } .nav-tabs .nav-link:hover { background: rgba(248, 250, 252, 0.9); color: var(--vz-heading-color, #1e293b); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: #fff !important; color: var(--vz-heading-color, #1e293b) !important; box-shadow: var(--d4-modern-shadow-xs); } /* Ensure the container behind tabs is rounded too */ .card > .card-header:has(.nav-tabs), .card-header:has(.nav-tabs) { border-top-left-radius: var(--d4-modern-radius-lg) !important; border-top-right-radius: var(--d4-modern-radius-lg) !important; border: 0 !important; } .card:has(.nav-tabs) { overflow: hidden; } /* Remove accidental debug borders from component stylesheet */ .D4DataTable .card-header .datatable-header, .D4DataTable .card-header .datatable-header .item { border: none !important; } .D4DataTable .card-header .datatable-header { align-items: center; gap: 0.75rem; flex-wrap: wrap; } .D4DataTable .section-table { border-radius: 0 0 var(--d4-modern-radius-lg) var(--d4-modern-radius-lg); border-color: var(--d4-modern-border); box-shadow: var(--d4-modern-shadow-xs); overflow: hidden; } /* Mobile: allow horizontal scroll for wide tables */ @media (max-width: 767.98px) { .D4DataTable .section-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .D4DataTable .section-table > table, .D4DataTable .section-table table.dataTable { min-width: 900px; } } .D4DataTable.init .section-placeholder { border-radius: var(--d4-modern-radius-lg); border-color: var(--d4-modern-border); } /* --- Tables (Bootstrap + DataTables) --- */ .table { --bs-table-hover-bg: var(--d4-modern-row-hover); } .table > :not(caption) > * > * { padding: 0.85rem 1rem; vertical-align: middle; } .table thead th { font-size: 0.76rem; font-weight: 500; text-transform: none; letter-spacing: 0.02em; color: var(--vz-secondary-color, #475569); background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 1px solid var(--d4-modern-border) !important; } .table tbody tr { border-color: transparent; } .table tbody tr + tr td { border-top: 1px solid var(--d4-modern-border); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--d4-modern-row-stripe); } table.dataTable { border-top: none !important; } table.dataTable.no-footer { border-bottom: none !important; } table.dataTable thead > tr > th { border-bottom: 1px solid var(--d4-modern-border) !important; position: relative; /* anchor DataTables sort pseudo-elements */ } /* DataTables sort icons: show only active arrow */ table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after { opacity: 0 !important; content: "" !important; } table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before { opacity: 0 !important; content: "" !important; } table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after { opacity: 1 !important; content: "" !important; width: 12px; height: 12px; display: inline-block; position: absolute; right: 0.5rem; background-repeat: no-repeat; background-position: center; background-size: 12px 12px; /* modern chevron-up icon (stroke: currentColor) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.25L6 3.75l3.5 3.5' fill='none' stroke='%23495570' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } table.dataTable thead > tr > th.sorting_desc:after { transform: translateY(-50%) rotate(180deg); } .d4-dt-created__date { font-weight: 700; line-height: 1.1; } .d4-dt-created__time { margin-top: 2px; font-size: 0.78rem; font-weight: 600; color: rgba(15, 23, 42, 0.55); line-height: 1.1; } .D4DataTable .table-hover > tbody > tr:hover > * { background-color: var(--d4-modern-row-hover) !important; } /* Table filter info bar: only top/bottom borders */ div.card-body.bg-light-subtle.border-end-1.table-filter-info { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--d4-modern-border) !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; min-height: 2.25rem; display: flex; align-items: center; gap: 0.75rem; } /* The JS injects an inner ".d-flex ..." wrapper; align that wrapper too */ div.card-body.bg-light-subtle.border-end-1.table-filter-info > .d-flex { align-items: center !important; } div.card-body.bg-light-subtle.border-end-1.table-filter-info .table-filter-button { display: inline-flex; align-items: center; gap: 0.4rem; } div.card-body.bg-light-subtle.border-end-1.table-filter-info .badge.filter-item { display: inline-flex; align-items: center; gap: 0.35rem; } div.card-body.bg-light-subtle.border-end-1.table-filter-info .table-filter-clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; line-height: 1; border-radius: 999px; margin-left: 0.1rem; } div.card-body.bg-light-subtle.border-end-1.table-filter-info, div.card-body.bg-light-subtle.border-end-1.table-filter-info * { line-height: 1.15; } /* Filter pills/chips inside the filter bar */ div.card-body.bg-light-subtle.border-end-1.table-filter-info .badge, div.card-body.bg-light-subtle.border-end-1.table-filter-info .btn, div.card-body.bg-light-subtle.border-end-1.table-filter-info .btn-sm { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .D4DataTable .tg td, .D4DataTable .tg th { font-family: inherit; border-color: transparent !important; } .D4DataTable .tg td { border-bottom: 1px solid var(--d4-modern-border) !important; padding: 0.75rem 0.65rem; } .D4DataTable .tg th { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; font-weight: 600; font-size: 0.8125rem; } /* --- Pagination --- */ .dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem !important; } .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .page-link { border-radius: var(--d4-modern-radius-sm) !important; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .dataTables_wrapper .pagination { gap: 0.35rem; } .dataTables_wrapper .pagination .page-item .page-link { min-width: 2.1rem; height: 2.1rem; padding: 0 0.7rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: rgba(15, 23, 42, 0.72); background: rgba(255, 255, 255, 0.9); } .dataTables_wrapper .pagination .page-item .page-link:hover { background: rgba(59, 91, 219, 0.08); border-color: rgba(59, 91, 219, 0.18) !important; color: rgba(15, 23, 42, 0.9); box-shadow: var(--d4-modern-shadow-xs); } .dataTables_wrapper .pagination .page-item.disabled .page-link, .dataTables_wrapper .pagination .page-item .page-link.disabled { opacity: 0.55; background: rgba(248, 250, 252, 0.92); box-shadow: none; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { border-color: var(--d4-modern-accent) !important; background: var(--d4-modern-accent) !important; color: #fff !important; box-shadow: var(--d4-modern-shadow-xs); } .dataTables_wrapper .pagination .page-item.active .page-link:hover { background: var(--d4-modern-accent-hover) !important; border-color: var(--d4-modern-accent-hover) !important; } .dataTables_wrapper .dataTables_info { font-size: 0.875rem; color: var(--vz-secondary-color, #64748b); } /* --- Badges & pills --- */ .badge { border-radius: 999px; font-weight: 600; padding: 0.35em 0.75em; letter-spacing: 0.02em; } .badge.bg-success-subtle, .badge.bg-primary-subtle, .badge.bg-warning-subtle, .badge.bg-danger-subtle, .badge.bg-info-subtle { border: 1px solid var(--d4-modern-border); } /* --- Cards --- */ .card { border-radius: var(--d4-modern-radius-lg); border-color: var(--d4-modern-border); box-shadow: var(--d4-modern-shadow-xs); } .card-header { border-radius: var(--d4-modern-radius-lg) var(--d4-modern-radius-lg) 0 0; } /* --- Icon / tool clusters in table header --- */ .D4DataTable .table-tools-right .btn, .D4DataTable .table-tools-left .btn { box-shadow: none; } .D4DataTable .table-tools-right .btn-light, .D4DataTable .table-tools-left .btn-light { border: 1px solid var(--d4-modern-border); background: #fff; } .D4DataTable .table-tools-right .btn-light:hover, .D4DataTable .table-tools-left .btn-light:hover { background: #f8fafc; border-color: rgba(59, 91, 219, 0.25); } /* --- Dropdowns --- */ .dropdown-menu { border-radius: var(--d4-modern-radius-lg); border: 1px solid var(--d4-modern-border); box-shadow: var(--d4-modern-shadow-md); } /* --- Main menu (horizontal) --- */ [data-layout=horizontal] .navbar-menu { border: 0 !important; box-shadow: var(--d4-modern-shadow-xs); } [data-layout=horizontal] ul#navbar-nav { margin-left: 0 !important; } [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link, [data-layout=horizontal] .navbar-menu .navbar-nav > li > .nav-link { border-radius: var(--d4-modern-radius); padding: 0.65rem 0.9rem; font-weight: 600; letter-spacing: 0.01em; transition: background-color 0.15s ease, color 0.15s ease; } [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link:hover, [data-layout=horizontal] .navbar-menu .navbar-nav > li > .nav-link:hover { background: rgba(255, 255, 255, 0.55); color: var(--vz-topnav-item-active-color, var(--vz-heading-color, #1e293b)); } [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link.active, [data-layout=horizontal] .navbar-menu .navbar-nav > li > .nav-link.active, [data-layout=horizontal] .navbar-menu .navbar-nav > .nav-item > .nav-link.current-page, [data-layout=horizontal] .navbar-menu .navbar-nav > li > .nav-link.current-page { background: rgba(255, 255, 255, 0.8); color: var(--vz-topnav-item-active-color, var(--vz-heading-color, #1e293b)); box-shadow: var(--d4-modern-shadow-xs); } /* Dropdown panel under menu item */ [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu { border-radius: var(--d4-modern-radius-lg); border: 1px solid var(--d4-modern-border); box-shadow: var(--d4-modern-shadow-md); padding: 0.5rem; overflow: hidden; } [data-layout=horizontal] .page-title-box .dropdown-menu, .page-title-box .dropdown-menu, .page-title-box .btn-group .dropdown-menu, .list-grid-nav .dropdown-menu { z-index: 2000 !important; } /* Mobile topbar dropdowns: flush under dark header */ @media (max-width: 767.98px) { #page-topbar .topbar-user .dropdown-menu, #page-topbar .top-applications-widget .dropdown-menu, #page-topbar .topbar-head-dropdown .dropdown-menu { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; top: 70px; } } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item { border-radius: var(--d4-modern-radius); padding: 0.65rem 0.75rem; font-weight: 600; color: var(--vz-body-color, #334155); display: flex; align-items: center; gap: 0.75rem; } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item i, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item svg { width: 34px; height: 34px; font-size: 18px; color: rgba(15, 23, 42, 0.62); flex: 0 0 34px; border-radius: 999px; background: rgba(15, 23, 42, 0.045); border: 1px solid rgba(15, 23, 42, 0.06); display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:hover, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:focus { background: rgba(59, 91, 219, 0.08); color: var(--vz-heading-color, #1e293b); } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:hover i, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:focus i { color: var(--d4-modern-accent); background: rgba(59, 91, 219, 0.10); border-color: rgba(59, 91, 219, 0.18); transform: translateY(-0.5px); } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item.active, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:active { background: rgba(59, 91, 219, 0.14); color: var(--vz-heading-color, #1e293b); } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item.active i, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .dropdown-item:active i { color: var(--d4-modern-accent); background: rgba(59, 91, 219, 0.14); border-color: rgba(59, 91, 219, 0.22); } [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu i, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .fa, [data-layout=horizontal] .navbar-menu .navbar-nav .dropdown-menu .ri { opacity: 0.85; } /* --- Modals --- */ .modal-content { border-radius: var(--d4-modern-radius-lg); border: 1px solid var(--d4-modern-border); box-shadow: var(--d4-modern-shadow-md); } /* --- Events modal (SweetAlert) --- */ .d4-modal-event__title { width: 100%; padding-right: 2.75rem; /* leave space for SweetAlert close button */ } .d4-modal-event__title .form-control, .d4-modal-event__title input.form-control { width: 100%; } /* Flatpickr calendar must be above the SweetAlert modal */ .d4-modal-event .flatpickr-calendar, .d4-modal-event .flatpickr-calendar.open, .d4-modal-event .flatpickr-calendar.animate.open { z-index: 9999 !important; } /* Match label/aux text sizing to the date input */ .d4-modal-event .d4-modal-body label, .d4-modal-event .d4-modal-body .form-check-label, .d4-modal-event .d4-modal-body .select2-container--default .select2-selection__rendered { font-size: 14px !important; } /* Avoid thick borders on mobile */ .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--single, .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple { border-width: 1px !important; } /* Select2 multiple: align with single */ .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple { min-height: 32px !important; border-radius: var(--vz-border-radius-sm); border-color: var(--vz-input-border-custom, #e6e6e6); padding: 0 0.5rem; /* match single input padding feel */ background-color: #fff; display: flex; align-items: center; flex-wrap: wrap; } .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; align-items: center; flex-wrap: wrap; padding: 0; margin: 0; line-height: 32px; /* match single height */ } .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 3px; margin-bottom: 3px; } .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__choice, .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__choice__display, .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { font-size: 12px !important; line-height: 1.2; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding-left: 28px; } /* Multiple select: match single caret/clear vertical rhythm */ .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-selection__clear { margin-top: 0 !important; } .d4-modal-event .d4-modal-body .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin-top: 0 !important; padding: 0 10px 0 0; height: 32px; line-height: 32px; } .d4-modal-event .d4-modal-body .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: rgba(59, 91, 219, 0.45) !important; box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12); } /* Select2 dropdown (time list): border + seamless join with selection */ .d4-modal-event .select2-container--default .select2-dropdown { border: 1px solid #eeeff0 !important; border-radius: var(--vz-border-radius-sm) !important; box-shadow: none !important; } .d4-modal-event .select2-container--default.select2-container--open .select2-dropdown--below { border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: -1px; /* overlap borders so they "touch" */ } .d4-modal-event .select2-container--default.select2-container--open .select2-selection--single, .d4-modal-event .select2-container--default.select2-container--open .select2-selection--multiple { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .d4-modal-event .select2-container--default .select2-results__option--selected { background-color: #405189 !important; color: #fff !important; } .d4-modal-event .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgba(64, 81, 137, 0.12) !important; color: inherit !important; } @media (max-width: 575px) { /* "Celotni dan" switch: align with inputs (avoid drifting right) */ .d4-modal-event .d4-modal-body .event-full-day-group { justify-content: flex-start !important; } } /* Offcanvas: start below topbar on desktop */ @media (min-width: 768px) { body.normal-header .offcanvas.offcanvas-end, body.slim-header .offcanvas.offcanvas-end { top: 83px; height: calc(100% - 83px); } } /* Restore Bootstrap backdrop styling */ .offcanvas-backdrop.show { background-color: #00000040 !important; } .D4DataTable .btn.btn-sm.btn-primary.bg-gradient.waves-effect.waves-light, .button-colors span.status .btn-primary.bg-gradient.waves-effect.waves-light { color: #000 !important; } select#planner_shared_user { color: #fff!important; } .d4-notes .card-header-dropdown .dropdown-btn, .tree-node .card-header-dropdown .dropdown-btn { padding: 0; } /* Invoice edit: modern cards */ .d4-form-card #invoice-overview .accordion-item, #invoiceItems .invoice-block .card { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.25rem; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); } .d4-form-card #invoice-overview .accordion-head { padding: 0.9rem 1.15rem 0.85rem !important; min-height: 64px; border: 0; background: radial-gradient(circle at top right, rgba(59, 91, 219, 0.10), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%); } .d4-form-card #invoice-overview .accordion-head .title { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; color: #132238; line-height: 1.2; } .d4-form-card #invoice-overview .accordion-body { background: rgba(255, 255, 255, 0.96); } .d4-form-card #invoice-overview .accordion-inner { padding: 0.95rem 1.15rem 1.1rem; } .d4-form-card #invoice-overview .btn-add-customer { border-radius: 999px; padding: 0.58rem 0.95rem; min-height: 38px; font-weight: 700; box-shadow: 0 12px 24px rgba(59, 91, 219, 0.22); } .page-title-row .btn, .d4-form-card #invoice-overview .btn, #invoiceItems .itemAdd, #invoiceItems .invoice-items .btn-danger { border-radius: 999px !important; min-height: 38px; padding-top: 0.58rem; padding-bottom: 0.58rem; padding-left: 0.95rem; padding-right: 0.95rem; font-weight: 700; } .page-title-row .btn-primary, .d4-form-card #invoice-overview .btn-primary, #invoiceItems .itemAdd { box-shadow: 0 12px 24px rgba(59, 91, 219, 0.22); } .page-title-row .btn-success { box-shadow: 0 12px 24px rgba(20, 184, 166, 0.18); } .page-title-row .btn-danger, #invoiceItems .invoice-items .btn-danger { box-shadow: 0 12px 24px rgba(249, 115, 22, 0.18); } .page-title-row .btn-light { box-shadow: 0 10px 20px rgba(148, 163, 184, 0.16); } .d4-form-card #invoice-overview .horizontal { align-items: center; --bs-gutter-y: 0; margin-bottom: 0.38rem !important; } .d4-form-card #invoice-overview .horizontal > [class*="col-lg-"]:first-child { display: flex; align-items: center; justify-content: flex-end; min-height: 40px; } .d4-form-card #invoice-overview .horizontal > [class*="col-lg-"]:first-child .form-label { margin-bottom: 0; line-height: 1.15; } .d4-form-card #invoice-overview .accordion-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .d4-form-card #invoice-overview .overview-title-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.25rem; flex: 1 1 auto; min-width: 0; } .d4-form-card #invoice-overview .overview-title-wrap .title { margin: 0; } .d4-form-card #invoice-overview .overview-title-wrap .title.invoice { text-align: left; } .d4-form-card #invoice-overview .overview-columns { --bs-gutter-x: 2rem; --bs-gutter-y: 0; } .d4-form-card #invoice-overview .overview-column + .overview-column { border-left: 1px solid rgba(226, 232, 240, 0.9); padding-left: calc(var(--bs-gutter-x) * 0.5 + 0.5rem); } #invoiceItems .invoice-block { margin-top: 0.4rem; } #invoiceItems .invoice-block .card { border-radius: 1.5rem; background: #f8fafc; } #invoiceItems .invoice-block .card-inner { background: #f8fafc; border-radius: inherit; overflow: hidden; } #invoiceItems .invoice-items-table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; } #invoiceItems .invoice-items-shell { border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 1.25rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)); box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06); overflow: hidden; } #invoiceItems .invoice-items-table thead th { position: sticky; top: 0; z-index: 1; padding: 0.95rem 1rem 0.9rem; border-bottom: 1px solid rgba(226, 232, 240, 0.9); background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98)) !important; color: #64748b; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } #invoiceItems .invoice-items-table tbody td { padding: 1rem 1rem 1.05rem; vertical-align: top; border-bottom: 1px solid rgba(226, 232, 240, 0.95); background: transparent; } #invoiceItems .invoice-items-table tbody tr { transition: background-color 0.18s ease; } #invoiceItems .invoice-items-table tbody tr:hover td { background: rgba(252, 253, 255, 0.95); } #invoiceItems .invoice-items-table tfoot th { padding: 1rem 1rem 1.05rem; border-top: 0; background: rgba(255, 255, 255, 0.96); font-size: 0.95rem; font-weight: 800; color: #0f172a; } #invoiceItems .invoice-items-table .sumAll { color: var(--d4-modern-accent); font-size: 1.2rem; letter-spacing: 0.01em; } #invoiceItems .invoice-items .select2-container .select2-selection--single, #invoiceItems .invoice-items .form-control, #invoiceItems .invoice-items textarea.form-control { border-radius: 1rem !important; border-color: rgba(148, 163, 184, 0.28) !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02); } #invoiceItems .invoice-items .form-control, #invoiceItems .invoice-items .select2-container .select2-selection--single { height: var(--d4-modern-control-height); min-height: var(--d4-modern-control-height); } #invoiceItems .invoice-items-table__cell-main { min-width: 21rem; } #invoiceItems .invoice-items-table__cell-number { min-width: 9rem; } #invoiceItems .invoice-items-table__cell-action { width: 4rem; min-width: 4rem; text-align: center; } #invoiceItems .invoice-items textarea.form-control { min-height: 70px; padding-top: 0.75rem; font-size: 0.75rem; line-height: 1.45; } #invoiceItems .invoice-items .form-group label, #invoiceItems .invoice-items .form-group .form-label { margin-bottom: 0.35rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7c8798; } #invoiceItems .invoice-items .invoice-item-sum { background: linear-gradient(180deg, #f8fafc, #eef4fb) !important; font-weight: 800; color: #475569; } #invoiceItems .invoice-items .btn-danger { border: 0; width: var(--d4-modern-control-height); min-width: var(--d4-modern-control-height); height: var(--d4-modern-control-height); min-height: var(--d4-modern-control-height); padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(249, 115, 22, 0.16); } #invoiceItems .invoice-items .btn-danger i { margin: 0 !important; line-height: 1; } #invoiceItems .invoice-items .form-group { margin-bottom: 0; } #invoiceItems .invoice-items .invoice-item-desc { margin-top: 0.55rem; } @media (max-width: 991.98px) { .d4-form-card #invoice-overview .accordion-inner { padding: 1rem; } .d4-form-card #invoice-overview .horizontal > [class*="col-lg-"]:first-child { justify-content: flex-start; min-height: auto; margin-bottom: 0.35rem; } .d4-form-card #invoice-overview .overview-title-wrap { grid-template-columns: 1fr; gap: 0.35rem; } .d4-form-card #invoice-overview .accordion-head { align-items: flex-start; flex-direction: column; } .d4-form-card #invoice-overview .overview-columns { --bs-gutter-x: 0; --bs-gutter-y: 1rem; } .d4-form-card #invoice-overview .overview-column + .overview-column { border-left: 0; border-top: 1px solid rgba(226, 232, 240, 0.9); padding-left: calc(var(--bs-gutter-x) * 0.5); padding-top: 1rem; } #invoiceItems .invoice-items-table thead th, #invoiceItems .invoice-items-table tbody td, #invoiceItems .invoice-items-table tfoot th { padding-left: 0.85rem; padding-right: 0.85rem; } } /* Invoice customer picker modal */ .d4-swal-window.d4-modal-customer-picker.swal2-popup { width: min(72rem, calc(100vw - 40px)) !important; } .d4-swal-window.d4-modal-customer-picker .swal2-title { padding: 0.95rem 3rem 0.95rem 1.1rem !important; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important; font-size: 1.05rem !important; font-weight: 800 !important; color: #132238 !important; } .d4-swal-window.d4-modal-customer-picker .d4-modal-body { padding: 1rem 1.1rem 1.1rem; max-height: calc(84vh - 120px); background: #fff; } .d4-swal-window.d4-modal-customer-picker .swal2-actions { padding: 0.9rem 1.1rem 1rem; background: #fff; } .d4-swal-window.d4-modal-customer-picker .input-group { align-items: stretch; margin-bottom: 0.85rem !important; gap: 0.65rem; } .d4-swal-window.d4-modal-customer-picker .input-group .form-control { min-height: 44px !important; border-radius: 0.95rem !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; background: #fff !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03); } .d4-swal-window.d4-modal-customer-picker .input-group .btn { min-width: 102px; border-radius: 0.95rem !important; font-weight: 700; } .d4-swal-window.d4-modal-customer-picker #customer-table { margin-bottom: 0; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 1rem; overflow: hidden; } .d4-swal-window.d4-modal-customer-picker #customer-table thead th { padding: 0.95rem 1rem; background: #f8fafc; color: #7c8798; font-size: 0.83rem; font-weight: 800; border-bottom: 1px solid rgba(226, 232, 240, 0.95); } .d4-swal-window.d4-modal-customer-picker #customer-table tbody td { padding: 0.95rem 1rem; background: #fff; border-color: rgba(241, 245, 249, 0.95); font-size: 0.98rem; color: #334155; } .d4-swal-window.d4-modal-customer-picker #customer-table tbody tr { cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .d4-swal-window.d4-modal-customer-picker #customer-table tbody tr:hover td { background: #f8fbff; } .d4-swal-window.d4-modal-customer-picker #customer-table tbody tr.active td { background: rgba(59, 91, 219, 0.08); color: #132238; font-weight: 700; } @media (max-width: 767px) { .d4-swal-window.d4-modal-customer-picker.swal2-popup { width: calc(100vw - 18px) !important; } .d4-swal-window.d4-modal-customer-picker .d4-modal-body { padding: 0.85rem; max-height: calc(86vh - 112px); } .d4-swal-window.d4-modal-customer-picker .input-group { gap: 0.5rem; } .d4-swal-window.d4-modal-customer-picker .input-group .btn { min-width: 88px; } .d4-swal-window.d4-modal-customer-picker #customer-table thead th, .d4-swal-window.d4-modal-customer-picker #customer-table tbody td { padding-left: 0.8rem; padding-right: 0.8rem; } } #form-invoices-data { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.25rem; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); }