@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@100;300;700&display=swap');

/**
 * Dataline brand tokens (Dataline Brand Guidelines, Dec 2025) and the app shell of dataline-360, multipress-marketing
 * and marketing-funnel, applied on top of the EasyAdmin theme. EasyAdmin exposes most of its design as CSS variables
 * (see vendor/easycorp/easyadmin-bundle/assets/css/easyadmin-theme/variables-theme.css), so those are overridden
 * first; the rules below only cover what the variables can't (sidebar items, table header, cards, login page).
 *
 * Keep this in line with assets/styles/app.css of marketing-funnel and multipress-marketing so the applications
 * look the same. Dark mode is disabled in DashboardController::configureDashboard().
 */
:root {
    color-scheme: light;

    /* Brand */
    --db-primary: #0000ff;
    --db-primary-hover: #0000cc;
    --db-primary-active: #0000bf;
    --db-primary-subtle: #d6d6ff;
    --db-ink: #231f20;
    --db-heading-font: 'Roboto Slab', ui-serif, Georgia, serif;
    --db-accent-cyan: #00aeef;
    --db-accent-pink: #ff178a;
    --db-accent-purple: #7c1983;

    /* App shell */
    --app-sidebar-bg: #0b0b3b;
    --app-sidebar-color: rgba(255, 255, 255, 0.72);
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --app-sidebar-active-bg: rgba(0, 174, 239, 0.18);
    --app-surface: #f5f6fa;
    --app-card-border: #e4e6ef;

    /* EasyAdmin theme variables */
    --font-family-sans-serif: 'Roboto', system-ui, sans-serif;
    --font-size-base: 14.5px;

    --color-primary: var(--db-primary);
    --text-color: var(--db-ink);
    --text-on-primary: #fff;

    --link-color: var(--db-primary);
    --link-color-rgb: 0, 0, 255;
    --link-hover-color: var(--db-primary-hover);
    --link-hover-color-rgb: 0, 0, 204;

    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-color: var(--app-card-border);

    /* Bootstrap's --bs-body-bg (form controls, tables, pagination) derives from --body-bg, so that one stays white;
       the grey page background is set on body.ea below. */
    --body-bg: #fff;
    --content-bg: var(--app-surface);
    --content-top-border-color: var(--app-card-border);
    --content-search-input-bg: #fff;

    --sidebar-max-width: 16.5rem;
    --sidebar-bg: var(--app-sidebar-bg);
    --sidebar-border-color: var(--app-sidebar-bg);
    --sidebar-logo-color: #fff;
    --sidebar-padding-left: 0.75rem;
    --sidebar-padding-right: 0.75rem;
    --sidebar-menu-color: var(--app-sidebar-color);
    --sidebar-menu-submenu-color: var(--app-sidebar-color);
    --sidebar-menu-header-color: rgba(255, 255, 255, 0.45);
    --sidebar-menu-icon-color: rgba(255, 255, 255, 0.55);
    --sidebar-menu-active-item-bg: transparent;
    --sidebar-menu-active-item-color: #fff;
    --sidebar-menu-badge-bg: rgba(255, 255, 255, 0.12);
    --sidebar-menu-badge-color: #fff;
    --sidebar-menu-badge-active-bg: var(--db-accent-cyan);
    --sidebar-menu-badge-active-color: #fff;
    --resize-handler-hover-bg: var(--db-accent-cyan);

    --responsive-header-bg: #fff;
    --responsive-header-border-color: var(--app-card-border);
    --responsive-header-logo-color: var(--db-primary);

    --button-primary-bg: var(--db-primary);
    --button-primary-border-color: var(--db-primary);
    --button-primary-hover-bg: var(--db-primary-hover);
    --button-primary-hover-border-color: var(--db-primary-hover);
    --button-primary-active-bg: var(--db-primary-active);
    --button-primary-active-border-color: var(--db-primary-active);
    --button-focus-outline-color: rgba(0, 0, 255, 0.4);

    --table-thead-color: #6c757d;
    --table-cell-color: var(--db-ink);
    --table-cell-border-color: #eef0f5;
    --table-hover-cell-bg: var(--db-primary-subtle);
    --table-selected-cell-bg: var(--db-primary-subtle);
    --table-thead-sorted-color: var(--db-primary);
    --table-thead-sorted-marker-color: var(--db-primary);

    --pagination-active-bg: var(--db-primary);

    --form-switch-checked-bg: var(--db-primary);
    --form-type-check-input-checked-bg: var(--db-primary);
    --form-input-hover-shadow: 0 0 0 4px rgba(0, 0, 255, 0.08);
    --form-fieldset-border-color: var(--app-card-border);
    --form-fieldset-header-border-color: var(--app-card-border);
    --form-tabs-border-color: var(--app-card-border);

    --badge-boolean-true-bg: var(--db-primary);
    --badge-primary-bg: var(--db-primary-subtle);
    --badge-primary-color: #00008a;

    --dropdown-settings-active-item-color: var(--db-primary);
    --dropdown-settings-active-item-shadow: inset 0 0 0 1px rgba(0, 0, 255, 0.5);

    --user-avatar-icon-bg: var(--db-primary);
    --user-avatar-icon-color: #fff;
    --user-name-color: var(--db-ink);

    --page-login-bg: #fff;
    --page-login-form-control-button-bg: var(--db-primary);
}

h1, h2, h3, h4, h5, h6,
.content-header-title .title {
    font-family: var(--db-heading-font);
}

.content-header-title .title {
    font-weight: 700;
}

body.ea:not(.page-login) {
    background-color: var(--app-surface);
}

/* The grid columns of the EasyAdmin layout default to min-width: auto, so a wide table (e.g. the machines table)
   would stretch the whole page instead of scrolling inside its .table-responsive wrapper. */
.main-content,
.content-wrapper > .content {
    min-width: 0;
}

/* EasyAdmin's button theme (--button-* variables) only defines the variants it uses itself; these Bootstrap variants
   are used by the custom admin pages. */
.btn-outline-primary {
    --button-color: var(--db-primary);
    --button-border-color: var(--db-primary);
    --button-hover-bg: var(--db-primary);
    --button-hover-color: #fff;
    --button-hover-border-color: var(--db-primary);
    --button-active-bg: var(--db-primary-active);
    --button-active-color: #fff;
}

/* EasyAdmin's danger button is a grey button with red text that only turns red on hover; use a solid red one as in
   the other Dataline apps (also the delete action, which EasyAdmin renders as a text link: .btn-invisible) */
.btn-danger,
.btn-danger.btn.disabled,
.btn-danger.btn:disabled,
.btn-invisible.btn-danger,
.btn-invisible.btn-danger.btn.disabled,
.btn-invisible.btn-danger.btn:disabled {
    --button-bg: var(--color-danger);
    --button-color: #fff;
    --button-icon-color: #fff;
    --button-border-color: var(--color-danger);
    --button-hover-bg: #b91c1c;
    --button-hover-color: #fff;
    --button-hover-border-color: #b91c1c;
    --button-active-bg: #991b1b;
    --button-active-color: #fff;
    --button-active-border-color: #991b1b;
}

.btn-light {
    --button-bg: #f8f9fa;
    --button-border-color: var(--app-card-border);
    --button-hover-bg: #eef0f5;
    --button-active-bg: #e4e6ef;
}

.form-check-input:checked {
    background-color: var(--db-primary);
    border-color: var(--db-primary);
}

/* ==========================================================================
 * Sidebar
 * ========================================================================== */
.sidebar {
    color: var(--app-sidebar-color);
}

.main-header .navbar {
    padding: 0;
}

.main-header #header-logo a.logo {
    padding: 1.25rem 0.75rem 1rem;
}

.brand-wordmark {
    font-family: var(--db-heading-font);
    font-size: 1.35rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
}

.brand-wordmark span {
    color: var(--db-accent-cyan);
}

/* the compact sidebar is too narrow for the wordmark: show the home icon instead */
.main-header #header-logo .logo-compact {
    color: #fff;
}

#main-menu {
    padding: 0.25rem 0 1.5rem;
}

#main-menu .menu .menu-header {
    margin: 1.1rem 0.75rem 0.35rem;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

#main-menu .menu .menu-item {
    padding: 0;
    margin: 0 0 2px;
}

#main-menu .menu .menu-item-contents {
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.925rem;
}

#main-menu .menu .menu-icon {
    margin-inline-end: 0;
}

#main-menu .menu .menu-item-label {
    flex: 1;
    min-width: 0;
}

#main-menu .menu .menu-item-contents:hover,
#main-menu .menu .menu-item-contents:focus-visible {
    background: var(--app-sidebar-hover-bg);
    color: #fff;
}

#main-menu .menu .menu-item-contents:hover .menu-icon,
#main-menu .menu .menu-item.active > .menu-item-contents .menu-icon,
#main-menu .menu .menu-item.expanded > .menu-item-contents .menu-icon {
    color: #fff;
}

#main-menu .menu .menu-item.expanded > .menu-item-contents,
#main-menu .menu .menu-item.active > .menu-item-contents {
    color: #fff;
}

/* the selected page (a top-level link or a submenu link, not the submenu that contains it) */
#main-menu .menu .menu-item.active:not(.has-submenu) > .menu-item-contents {
    background: var(--app-sidebar-active-bg);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--db-accent-cyan);
}

#main-menu .menu .submenu .menu-item {
    margin: 2px 0;
}

#main-menu .menu .submenu .menu-item.active {
    padding-inline-start: 0;
}

#main-menu .menu .submenu a.menu-item-contents {
    gap: 0.6rem;
    padding: 0.4rem 0.75rem 0.4rem 1.75rem;
    color: var(--app-sidebar-color);
    font-size: 0.875rem;
}

#main-menu .menu .submenu .menu-item.active > a.menu-item-contents {
    color: #fff;
}

#main-menu .menu .submenu-toggle-icon {
    color: var(--sidebar-menu-icon-color);
}

@media (min-width: 992px) {
    /* compact sidebar: the hover popover has a light background, so it needs dark text again */
    body.ea-sidebar-width-compact #main-menu .menu .menu-item-contents {
        padding: 7px 5px 7px 0;
    }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-contents,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu a.menu-item-contents,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-icon {
        color: var(--db-ink);
    }
}

/* ==========================================================================
 * Topbar (search + user menu)
 * ========================================================================== */
@media (min-width: 992px) {
    .content-top {
        position: sticky;
        top: 0;
        z-index: 1020;
        height: 3.75rem;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(8px);
    }
}

.content-top .content-search input[type="search"][name="query"] {
    border-radius: 0.5rem;
}

.user-menu-wrapper .user-avatar,
.user-menu-wrapper .user-details .app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    max-inline-size: none;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--db-primary);
    color: #fff;
    font-weight: 600;
}

.user-menu-wrapper .dropdown-menu .dropdown-user-details .user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    max-inline-size: none;
    font-size: 1rem;
}

.user-menu-wrapper .user-details .user-name {
    font-weight: 500;
}

/* ==========================================================================
 * Content: cards, tables
 * ========================================================================== */
.content-header {
    padding-top: 1.5rem;
}

/* EasyAdmin paints the header in --body-bg (white), which made a white band above the cards on the grey page */
@media (min-width: 768px) {
    .content-header {
        background: var(--app-surface);
    }
}

/* index pages: the datagrid and its paginator in one card; a datagrid with many columns (e.g. machines) scrolls
   horizontally inside the card (the row action dropdowns use a fixed position, see js/admin.js, so they aren't cut
   off by this scroll container) */
body.ea-index #main {
    background: #fff;
    border: 1px solid var(--app-card-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow-x: auto;
}

/* the footer (results counter + pagination) is as wide as the visible part of the card; sticky so it stays in view
   when a wide datagrid is scrolled horizontally */
body.ea-index #main .content-panel-footer {
    position: sticky;
    left: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--app-card-border);
}

.datagrid thead th {
    background: #fafbfd;
    box-shadow: inset 0 -1px 0 var(--app-card-border);
}

.datagrid thead a,
.datagrid thead span:not(.icon) {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.datagrid thead .sorted {
    box-shadow: inset 0 -2px 0 var(--db-primary);
}

.datagrid td {
    vertical-align: middle;
}

.datagrid tbody tr:hover td {
    background: var(--db-primary-subtle);
}

/* one badge per related entity (admin/field/badge_list.html.twig): the gap spaces them, and in a datagrid the column
   is wide enough for a few badges per line, instead of shrinking to the widest one */
.badge-list .badge + .badge {
    margin-inline-start: 0;
}

.datagrid .badge-list {
    min-inline-size: 14rem;
}

/* detail and form pages: the fields in one card */
body.ea-detail #main,
body.ea-edit #main,
body.ea-new #main {
    background: #fff;
    border: 1px solid var(--app-card-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 1.25rem 1.5rem;
}

.card {
    border-color: var(--app-card-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ea-detail .field-group.field-boolean .field-label {
    flex: unset;
    min-width: 0;
    margin: 0 15px 0 0 !important;
    width: 130px !important;
    text-align: right !important;
}

.ea-detail .field-group.field-boolean {
    flex-direction: row !important;
}

.ea-detail .field-group.field-boolean .field-value {
    flex: 1 !important;
    min-width: 66% !important;
    text-align: left !important;
}

/* Filters modal of the CRUD index pages: EasyAdmin's small buttons (12px, no vertical padding) look cramped next to the
   modal title */
#modal-filters .modal-header {
    gap: 1rem;
    padding: 0.75rem 1rem;
}

#modal-filters .modal-header .btn {
    --button-font-size: 0.8125rem;
    --button-height: 2rem;
    --button-padding-x: 0.75rem;
    padding: 0 var(--button-padding-x);
}

#modal-filters .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--db-ink);
    font-size: 1.1rem;
    font-weight: 700;
}

/* ==========================================================================
 * Custom admin pages (templates/admin/custom_page.html.twig: LinkedIn Sync, Upselling, Machines Admin)
 * ========================================================================== */
/* EasyAdmin's buttons spread their content (space-between) and its small buttons have no vertical padding: fine for
   its own action buttons, not for the full-width and icon-only buttons in these pages' tables. */
.ea-custom-page .btn {
    justify-content: center;
}

.ea-custom-page .btn-sm {
    padding: 0.25rem 0.6rem;
}

/* EasyAdmin gives .input-group-text (and buttons in an input group) a fixed height that matches its own compact
   form controls, not the Bootstrap ones of these pages */
.ea-custom-page .input-group-text {
    block-size: auto;
    padding: 0.375rem 0.75rem;
}

.ea-custom-page .input-group button {
    block-size: auto;
    margin-block-start: 0;
}

/* DataTables: same pagination as the EasyAdmin CRUD index pages */
.dataTables_wrapper > .row:last-child {
    align-items: center;
    padding-top: 15px;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0;
    color: var(--pagination-color);
}

.dataTables_wrapper .dataTables_paginate .pagination {
    --bs-pagination-font-size: var(--font-size-sm);
    margin: 0;
}

.dataTables_wrapper .paginate_button.previous .page-link::before,
.dataTables_wrapper .paginate_button.next .page-link::after {
    font-family: 'Font Awesome 6 Free';
    font-size: 0.7em;
    font-weight: 900;
}

.dataTables_wrapper .paginate_button.previous .page-link::before {
    content: '\f053';
    margin-inline-end: 0.4rem;
}

.dataTables_wrapper .paginate_button.next .page-link::after {
    content: '\f054';
    margin-inline-start: 0.4rem;
}

.ea-custom-page .card-header {
    background: #fff;
    border-bottom-color: var(--app-card-border);
    font-weight: 500;
}

.ea-custom-page .card-header .fas,
.ea-custom-page .card-header .fa-solid {
    color: var(--db-primary);
}

/* Tables (DataTables): same look as the EasyAdmin datagrid of the CRUD index pages, i.e. no vertical borders, no
   stripes, light header, light-blue row hover. The templates still use Bootstrap's table-striped/table-bordered, so
   those are neutralised here (DataTables draws its stripes and hover with box-shadows). */
.ea-custom-page .table {
    --bs-table-striped-bg: transparent;
    margin: 0 !important;
    font-size: 0.925rem;
}

.ea-custom-page .table.table-bordered,
.ea-custom-page .table.table-bordered > :not(caption) > * {
    border-width: 0;
}

.ea-custom-page .table.table-bordered > :not(caption) > * > * {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.ea-custom-page table.dataTable > tbody > tr > * {
    box-shadow: none !important;
}

.ea-custom-page .table > thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    background: #fafbfd;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--app-card-border);
}

.ea-custom-page .table > tbody td {
    padding: 8px;
    line-height: 20px;
    vertical-align: middle;
    border-color: var(--table-cell-border-color);
}

.ea-custom-page .table > tbody > tr:hover > * {
    background: var(--table-hover-cell-bg);
}

/* A card that only holds a table: the table runs to the edges of the card (as the datagrid does) and the DataTables
   controls (page length, search, info, pagination) get the padding instead */
.ea-custom-page .card-body-table {
    padding: 0;
}

.ea-custom-page .card-body-table .dataTables_wrapper > .row {
    margin: 0;
    padding: 0.75rem 1rem;
}

.ea-custom-page .card-body-table .dataTables_wrapper > .row.dt-row {
    padding: 0;
}

.ea-custom-page .card-body-table .dataTables_wrapper > .row > * {
    padding: 0;
}

.ea-custom-page .card-body-table .dataTables_wrapper > .row:last-child {
    border-top: 1px solid var(--app-card-border);
}

.ea-custom-page .card-body-table .dataTables_wrapper > .row:first-child:not(.dt-row) {
    align-items: center;
}

/* only the table scrolls horizontally (e.g. the wide machines table), not the page length/search/pagination rows */
.ea-custom-page .card-body-table.table-responsive {
    overflow-x: visible;
}

.ea-custom-page .card-body-table .dt-row > * {
    overflow-x: auto;
}

.ea-custom-page .card-body-table .table > :not(caption) > * > :first-child {
    padding-inline-start: 1rem;
}

.ea-custom-page .card-body-table .table > :not(caption) > * > :last-child {
    padding-inline-end: 1rem;
}

/* Tabs, as in marketing-funnel: underlined tabs for the first level and pills for a second level of tabs inside a
   tab (e.g. Edit > Machines/Manufacturers, Upselling > Modules/All Upselling/Active Criteria) */
.ea-custom-page .nav-tabs {
    gap: 0.25rem;
    border-bottom: 1px solid var(--app-card-border);
}

.ea-custom-page .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: -1px;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.ea-custom-page .nav-tabs .nav-link:hover {
    color: var(--db-ink);
    border-bottom-color: var(--app-card-border);
}

.ea-custom-page .nav-tabs .nav-link.active {
    color: var(--db-primary);
    border-bottom-color: var(--db-primary);
}

.ea-custom-page .nav-tabs .nav-link i {
    color: inherit;
    margin: 0 !important;
}

/* first level tabs in a card header (Machines Admin) */
.ea-custom-page .card-header-nav {
    padding: 0 1rem;
}

.ea-custom-page .card-header-nav .card-header-tabs {
    margin: 0;
    border-bottom: 0;
}

.ea-custom-page .card-header-nav .nav-link {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* second level tabs (pills) at the top of a card's tab pane */
.ea-custom-page .card-subnav {
    padding: 0.75rem 1rem 0;
}

.ea-custom-page .tab-pane .nav-tabs {
    border-bottom: 0;
}

.ea-custom-page .tab-pane .nav-tabs .nav-link {
    margin-bottom: 0;
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: 50rem;
    font-size: 0.875rem;
}

.ea-custom-page .tab-pane .nav-tabs .nav-link:hover {
    background: var(--bs-tertiary-bg);
}

.ea-custom-page .tab-pane .nav-tabs .nav-link.active {
    background: var(--db-primary-subtle);
    color: #00008a;
}

.ea-custom-page .modal-title {
    font-weight: 600;
}

.ea-custom-page .page-item.active .page-link {
    background-color: var(--db-primary);
    border-color: var(--db-primary);
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* ==========================================================================
 * Login page: same as the dataline-360 login (white header with the wordmark, centered card, blue footer)
 * ========================================================================== */
body.page-login {
    display: flex;
    flex-direction: column;
    position: static;
    width: auto;
    height: auto;
    min-height: 100vh;
    overflow: auto;
    align-items: stretch;
    justify-content: flex-start;
}

.login-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--app-card-border);
}

.login-header .brand-wordmark {
    font-size: 1.75rem;
    color: var(--db-primary);
}

.login-main {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 28rem;
    padding: 2rem 2.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--app-card-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.login-card h1 {
    font-size: 2rem;
    font-weight: 700;
}

.brand-bar {
    width: 4rem;
    height: 0.25rem;
    margin: 0.5rem auto 1.5rem;
    border-radius: 50rem;
    background: var(--db-primary);
}

.login-footer {
    padding: 1.5rem;
    background: var(--db-primary);
}

/* ==========================================================================
 * Floating horizontal scrollbar for tables wider than their card (see js/admin.js)
 * ========================================================================== */
.floating-scrollbar {
    position: fixed;
    bottom: 0;
    z-index: 1010;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--app-card-border);
    box-shadow: 0 -2px 6px rgba(16, 24, 40, 0.06);
}

.floating-scrollbar > div {
    height: 1px;
}