/* ========================================================================== PION Salesforce — Light Glassmorphism Theme ========================================================================== */ /* --- CSS Variables --- */ :root { /* PION brand — terracotta/brown (from the logo) replaces the old indigo. */ --brand: #95675a; --brand-hover: #7d564b; --brand-soft: #f1eae7; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(255, 255, 255, 0.3); --glass-blur: 20px; --glass-shadow: 0 10px 30px rgba(31, 23, 20, 0.10); --color-primary: #95675a; --color-primary-hover: #7d564b; --color-text: #334155; --color-heading: #1e293b; --color-muted: #64748b; --accent-gradient: linear-gradient(135deg, #95675a, #b08578, #c9a99e); --bs-border-radius: 10px; --bs-body-padding: 1rem; --background-dark-black-darker: #1D2125; /* Sidebar width — collapsed state overrides this on . */ --sidebar-w: 250px; } /* Collapsed sidebar: narrow icon-only rail. Set on from JS/localStorage. */ html.sidebar-collapsed { --sidebar-w: 76px; } /* --- Gradient Mesh Background --- */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 50%, rgba(149, 103, 90, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(176, 133, 120, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(149, 103, 90, 0.07) 0%, transparent 50%), linear-gradient(135deg, #faf8f7 0%, #f4efec 50%, #faf7f5 100%); } /* --- Typography --- */ body { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: var(--color-text); line-height: 1.6; background: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin-bottom: 1rem; color: var(--color-heading); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { font-size: 1rem; color: var(--color-text); margin-bottom: 1rem; } a { color: var(--color-primary); text-decoration: none; transition: color 0.3s ease-in-out; } a:hover { color: var(--color-primary-hover); text-decoration: none; } /* --- Utility Spacing --- */ .container { padding: 1rem; } .mt-md { margin-top: 1.5rem; } .mb-md { margin-bottom: 1.5rem; } .pt-md { padding-top: 1.5rem; } .pb-md { padding-bottom: 1.5rem; } /* --- Font Sizes --- */ .fs-7 { font-size: 0.875rem; } .fs-8 { font-size: 0.7rem; } .fs-9 { font-size: 0.625rem; } .fs-10 { font-size: 0.5rem; } /* ========================================================================== Navbar ========================================================================== */ .navbar { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); background: rgba(255, 255, 255, 0.65) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 1px 12px rgba(149, 103, 90, 0.06); } /* ========================================================================== Sidebar / Menu Left ========================================================================== */ .menu-left-fixed { position: fixed; left: 0; top: 0; width: var(--sidebar-w, 250px); height: 100%; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.35); padding: 20px; box-shadow: 1px 0 16px rgba(149, 103, 90, 0.04); transition: width .2s ease; } .container-content { width: 100%; margin-left: var(--sidebar-w, 250px); padding: 20px; transition: margin-left .2s ease; } /* ========================================================================== Floating controls (no top navbar) ========================================================================== */ .theme-toggle-fixed { position: fixed; top: 12px; right: 16px; z-index: 1050; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text); text-decoration: none; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 12px rgba(149, 103, 90, 0.08); transition: background .2s ease; } .theme-toggle-fixed:hover { background: rgba(255, 255, 255, 0.8); } .sidebar-toggle-btn { display: none; position: fixed; top: 12px; left: 16px; z-index: 1120; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; color: var(--color-text); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 12px rgba(149, 103, 90, 0.08); } .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, 0.35); } .sidebar { width: var(--sidebar-w, 250px); height: 100vh; position: fixed; top: 0; left: 0; color: var(--color-text); display: flex; flex-direction: column; padding: 15px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.35); transition: width .2s ease; } .sidebar-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 1.5rem; padding: 6px 0 14px; border-bottom: 1px solid rgba(149, 103, 90, 0.12); } /* Brand name under the logo. */ .sidebar-brand { font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: .16em; color: var(--brand, #95675a); padding-left: .16em; } /* Round brand logo — same soft-brand disc as the login page. */ .sidebar-logo { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(149, 103, 90, .10); border: 1px solid rgba(149, 103, 90, .18); border-radius: 50%; transition: background .2s ease, border-color .2s ease; } .sidebar-logo:hover { background: rgba(149, 103, 90, .16); border-color: rgba(149, 103, 90, .30); } .sidebar-logo img { width: 32px; height: 32px; } /* Dark-mode toggle — round, centred icon pushed to the bottom, sitting just above the footer separator (margin-top:auto pushes it + the footer down). */ .sidebar-theme-toggle { width: 40px; height: 40px; margin: auto auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text); background: rgba(149, 103, 90, .10); border: 1px solid rgba(149, 103, 90, .18); text-decoration: none; transition: background .2s ease, color .2s ease; } .sidebar-theme-toggle:hover { background: rgba(149, 103, 90, .18); color: var(--color-primary); } /* Collapse toggle — small round button pinned top-right of the sidebar. */ .sidebar-collapse-btn { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(149, 103, 90, .18); background: rgba(149, 103, 90, .08); border-radius: 50%; color: var(--color-text); cursor: pointer; transition: background .2s ease, color .2s ease; z-index: 2; } .sidebar-collapse-btn:hover { background: rgba(149, 103, 90, .18); color: var(--color-primary); } .sidebar-collapse-btn .material-symbols-rounded { font-size: 20px; } /* ---- Collapsed (icon-only rail) — desktop only; mobile keeps off-canvas ---- */ @media (min-width: 601px) { html.sidebar-collapsed .sidebar { padding-left: 10px; padding-right: 10px; } /* Center the collapse button. */ html.sidebar-collapsed .sidebar-collapse-btn { right: 50%; transform: translateX(50%); } /* Logo shrinks to fit the rail and clears the (top) collapse button. */ html.sidebar-collapsed .sidebar-header { padding-top: 44px; } html.sidebar-collapsed .sidebar-logo { width: 44px; height: 44px; } html.sidebar-collapsed .sidebar-logo img { width: 26px; height: 26px; } /* No room for the brand name on the icon rail. */ html.sidebar-collapsed .sidebar-brand { display: none; } /* Hide link text (raw text nodes) via font-size:0, keep the icons. */ html.sidebar-collapsed .sidebar-nav .nav-link, html.sidebar-collapsed .sidebar-footer .nav-link { justify-content: center; gap: 0; font-size: 0; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .sidebar-nav .nav-link .material-symbols-rounded, html.sidebar-collapsed .sidebar-footer .nav-link .material-symbols-rounded { font-size: 20px; } /* Hide section headings and inline badges that would break the rail. */ html.sidebar-collapsed .sidebar-nav h6, html.sidebar-collapsed .sidebar-nav .badge { display: none; } } /* Non-desktop keeps the off-canvas behaviour, never the rail. */ @media (max-width: 600px) { html.sidebar-collapsed { --sidebar-w: 250px; } .sidebar-collapse-btn { display: none; } } .sidebar-title { font-weight: bold; color: var(--color-heading); } .sidebar-actions { margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(149, 103, 90, 0.12); } .sidebar-actions .btn { display: flex; align-items: center; justify-content: center; gap: 5px; } .sidebar-footer { padding-top: 10px; margin-bottom: 30px; border-top: 1px solid rgba(149, 103, 90, 0.12); } .content { margin-left: 250px; padding: 20px; } /* ========================================================================== Nav Links ========================================================================== */ .nav-link { display: flex; align-items: center; gap: 10px; padding: 10px; text-decoration: none; border-radius: 8px; color: var(--color-text); transition: all 0.2s ease; } .nav-link:hover { background: rgba(149, 103, 90, 0.08); color: var(--color-primary); } .nav-link.active { background: rgba(149, 103, 90, 0.12); color: var(--color-primary); font-weight: 500; } .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ========================================================================== Cards — Glass Effect ========================================================================== */ .card { border-radius: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform 0.2s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18); } .card-header { background: rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .card-body { background: transparent; } /* ========================================================================== Shadows ========================================================================== */ .shadow-sm { box-shadow: 0 2px 8px rgba(149, 103, 90, 0.06) !important; } .shadow { box-shadow: 0 4px 16px rgba(149, 103, 90, 0.1) !important; } .shadow-lg { box-shadow: 0 8px 32px rgba(149, 103, 90, 0.15) !important; } /* ========================================================================== Forms — Glass Inputs ========================================================================== */ .form-control { border-radius: 8px; border: 1px solid rgba(149, 103, 90, 0.15); padding: 8px 12px; font-size: 13px; line-height: 20px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-text); transition: all 0.3s ease; } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(149, 103, 90, 0.12); background: rgba(255, 255, 255, 0.7); } .form-control:disabled { background: rgba(241, 245, 249, 0.6); opacity: 0.7; } .form-label { color: var(--color-muted); font-weight: 500; } .form-check-input { cursor: pointer; border: 1px solid rgba(149, 103, 90, 0.2); background-color: rgba(255, 255, 255, 0.5); } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } /* Select2 — Glass Matching */ .select2-container--default .select2-selection--single { border: 1px solid rgba(149, 103, 90, 0.15) !important; height: 36px !important; background: rgba(255, 255, 255, 0.5) !important; border-radius: 8px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; line-height: 36px !important; color: var(--color-text); } .select2-dropdown { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(149, 103, 90, 0.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(149, 103, 90, 0.1); } .select2-results__option--selectable:hover { background: rgba(149, 103, 90, 0.08) !important; } .select2-container--default .select2-results__option--selected { background: rgba(149, 103, 90, 0.12) !important; } /* Task form textarea */ #form-add-task textarea { font-family: var(--bs-font-monospace); height: 600px; background: rgba(255, 255, 255, 0.45); color: var(--color-text); font-size: 11px; line-height: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ========================================================================== Buttons — Gradient Glass ========================================================================== */ .btn { border-radius: 8px; padding: 8px 14px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.5px; border: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, #95675a, #b08578); color: #fff; } .btn-primary:hover { background: linear-gradient(135deg, #7d564b, #95675a); color: #fff; } .btn-secondary { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; } .btn-secondary:hover { background: linear-gradient(135deg, #64748b, #475569); color: #fff; } .btn-success { background: linear-gradient(135deg, #34d399, #10b981); color: #fff; } .btn-success:hover { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .btn-danger { background: linear-gradient(135deg, #fb7185, #f43f5e); color: #fff; } .btn-danger:hover { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; } .btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; } .btn-warning:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .btn-info { background: linear-gradient(135deg, #22d3ee, #06b6d4); color: #fff; } .btn-info:hover { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; } /* ========================================================================== Tables — Glass ========================================================================== */ .table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(149, 103, 90, 0.06); border-radius: 10px; } .table thead { background: rgba(149, 103, 90, 0.05); text-transform: uppercase; font-weight: bold; } .table thead th { padding: 12px; text-align: left; border-bottom: 1px solid rgba(149, 103, 90, 0.1); color: var(--color-muted); font-size: 0.7rem; letter-spacing: 0.5px; } .table tbody tr { transition: background-color 0.2s ease; } .table tbody tr:nth-child(even) { background: rgba(149, 103, 90, 0.02); } .table tbody tr:hover { background-color: rgba(149, 103, 90, 0.06); } .table tbody td { padding: 12px; border-bottom: 1px solid rgba(149, 103, 90, 0.06); color: var(--color-text); } .table tbody tr:last-child td { border-bottom: none; } .table.table-bordered { border: none; } .table.table-bordered th, .table.table-bordered td { border: 1px solid rgba(149, 103, 90, 0.08); } /* ========================================================================== Badges — Glass ========================================================================== */ .badge { font-size: 0.70rem; font-weight: 500; padding: 6px 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .badge:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .badge-primary, .bg-primary { background: rgba(149, 103, 90, 0.85); color: #fff; } .badge-secondary { background: rgba(100, 116, 139, 0.8); color: #fff; } .badge-success, .bg-success { background: rgba(16, 185, 129, 0.85) !important; color: #fff; } .badge-danger, .bg-danger { background: rgba(244, 63, 94, 0.85) !important; color: #fff; } .badge-warning, .bg-warning { background: rgba(245, 158, 11, 0.85); color: #fff; } .badge-info, .bg-info { background: rgba(6, 182, 212, 0.85) !important; color: #fff; } .badge-light { background: rgba(248, 250, 252, 0.8); color: var(--color-heading); } .badge-dark { background: rgba(30, 41, 59, 0.85); color: #fff; } .badge-outline { background-color: transparent !important; border: 2px solid currentColor; color: inherit; } .badge i { font-size: 1rem; margin-right: 5px; } .badge-ripple { position: relative; overflow: hidden; } .badge-ripple::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.3s ease-in-out; } .badge-ripple:active::after { opacity: 1; transition: 0s; } /* ========================================================================== Alerts — Glass Tinted ========================================================================== */ .alert { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 10px; border: none; border-left: 4px solid; } .alert-success { background: rgba(16, 185, 129, 0.08); border-left-color: #10b981; color: #065f46; } .alert-danger { background: rgba(244, 63, 94, 0.08); border-left-color: #f43f5e; color: #9f1239; } .alert-warning { background: rgba(245, 158, 11, 0.08); border-left-color: #f59e0b; color: #92400e; } .alert-info { background: rgba(6, 182, 212, 0.08); border-left-color: #06b6d4; color: #155e75; } /* ========================================================================== Dropdowns — Glass Panel ========================================================================== */ .dropdown-menu { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 32px rgba(149, 103, 90, 0.12); padding: 6px; /* Bootstrap defaults dropdowns to 1rem (16px) — too large next to the app's 13px base. Match the app scale so menus read consistently. */ font-size: .8125rem; } .dropdown-item { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 6px 10px; color: var(--color-text); transition: background .15s ease, color .15s ease; } /* Keep item icons proportionate to the smaller text. */ .dropdown-item .material-symbols-rounded { font-size: 1.15rem; } .dropdown-item:hover { background: rgba(149, 103, 90, 0.08); color: var(--color-primary); } /* ========================================================================== Modals — Glass Overlay + Content ========================================================================== */ .modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-content { background: #ffffff; border: 1px solid rgba(149, 103, 90, 0.12); border-radius: 16px; box-shadow: 0 16px 48px rgba(31, 38, 135, 0.15); } .modal-header { border-bottom: 1px solid rgba(149, 103, 90, 0.08); } .modal-footer { border-top: 1px solid rgba(149, 103, 90, 0.08); } /* ========================================================================== Breadcrumbs — brand pill ========================================================================== */ nav[aria-label="breadcrumb"] { margin-bottom: 1.25rem; } .breadcrumb { display: inline-flex; align-items: center; gap: 1px; margin-bottom: 0; padding: 5px 8px; font-size: .78rem; background: rgba(149, 103, 90, 0.06); border: 1px solid rgba(149, 103, 90, 0.12); border-radius: 999px; } .breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; } .breadcrumb .breadcrumb-item a { color: var(--color-muted); text-decoration: none; font-weight: 500; padding: 3px 10px; border-radius: 999px; transition: color .15s ease, background .15s ease; } .breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); background: rgba(149, 103, 90, 0.12); } .breadcrumb .breadcrumb-item.active { color: var(--color-heading); font-weight: 600; padding: 3px 10px; } .breadcrumb-item + .breadcrumb-item { padding-left: 0; } .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; /* › — overrides the inline '>' divider globally */ color: rgba(149, 103, 90, 0.45); font-size: 1rem; line-height: 1; padding: 0 4px; } /* The active item has no padding, so give its chevron extra room. */ .breadcrumb-item.active::before { padding-right: 10px; } /* ========================================================================== Code Blocks ========================================================================== */ code { padding: 3px 6px; border-radius: 4px; background: rgba(139, 92, 246, 0.06); color: #7c3aed; font-size: 0.85em; } /* ========================================================================== Status Dots ========================================================================== */ .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } .dot-0 { background-color: #f59e0b; } .dot-1 { background-color: #3b82f6; } .dot-2 { background-color: #10b981; } .dot-3 { background-color: #f43f5e; } /* ========================================================================== Separator ========================================================================== */ .separator { height: 1px; border-bottom: 1px dashed rgba(149, 103, 90, 0.15); margin: 60px 0; } /* ========================================================================== Task Log ========================================================================== */ .task-log-response, .task-log-request, .task-log-raw { font-family: "Lucida Console", Monaco, monospace; max-height: 60vh; overflow: auto; white-space: pre; } .task-log-request { padding: 0.75rem; background: rgba(149, 103, 90, 0.04); border-radius: 8px; } .task-log-shipments { max-height: 60vh; overflow: auto; } /* ========================================================================== Sortable / Columns Matching ========================================================================== */ #sortable .handle { cursor: move; line-height: 38px; } .ui-sortable-helper { display: flex; justify-content: space-between; } .ui-sortable-helper td { width: 100%; } .ui-sortable-placeholder { height: 100px; } #table-columns-matching .btn-close-white { height: 28px; } #table-columns-matching .btn-close-white { filter: none; } [data-bs-theme="dark"] #table-columns-matching .btn-close-white { filter: invert(1); } /* ========================================================================== Scrollbar — Thin & Translucent ========================================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(149, 103, 90, 0.18); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(149, 103, 90, 0.3); } /* ========================================================================== Container Overflow ========================================================================== */ .container-overflow .overflow-content { overflow: visible; } /* ========================================================================== Responsive — Mobile ========================================================================== */ @media (max-width: 768px) { body { font-size: 14px; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } } @media screen and (min-width: 600px) { .navbar .navbar-collapse { display: none !important; } } @media screen and (max-width: 600px) { .container-content { padding: 0; } .p-5 { padding: 1.5rem !important; } .separator { margin: 40px 0; } .sidebar-toggle-btn { display: inline-flex; } .menu-left-fixed { transform: translateX(-100%); transition: transform .25s ease; z-index: 1100; box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18); } body.sidebar-open .menu-left-fixed { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; } .container-content { margin-left: 0; padding-top: 64px; } } /* ========================================================================== FLAT / EDITORIAL OVERRIDES No gradients, no rounded corners, no shadows, no glass blur. Structural rules are global; surface colours are split light/dark. ========================================================================== */ /* 1) Soft rounded corners (brand refresh). Circular elements stay round. */ .status-dot, .step-dot, .workflow-step-index, .rounded-circle, input[type="radio"], .spinner-border { border-radius: 50% !important; } .form-switch .form-check-input { border-radius: 2em !important; } .btn { border-radius: 10px !important; } .form-control, .form-select { border-radius: 10px !important; } .badge { border-radius: 8px !important; } .dropdown-menu { border-radius: 12px !important; } .modal-content { border-radius: 16px !important; } .alert { border-radius: 12px !important; } /* 2) Flat chrome (no glass blur) but soft, rounded, gently shadowed cards. */ .navbar, .sidebar, .dropdown-menu, .btn, .btn:hover, .form-control, .form-select, .card-header, .select2-dropdown, .select2-container--default .select2-selection--single { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .card { border-radius: 16px !important; box-shadow: 0 10px 30px rgba(31, 23, 20, .05) !important; transition: box-shadow .15s ease, border-color .15s ease !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .card:hover { box-shadow: 0 16px 40px rgba(31, 23, 20, .10) !important; transform: none !important; } /* 3) Lighter, more refined icons */ .material-symbols-rounded { font-variation-settings: 'wght' 350, 'GRAD' 0, 'opsz' 24; } /* 4) Buttons — one flat style everywhere, icon aligned with label */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 500; border-width: 1px; border-style: solid; transform: none !important; } .btn .material-symbols-rounded { font-size: 1.15em; line-height: 1; } .btn-primary, .btn-primary:hover { background: #95675a !important; border-color: #95675a !important; color: #fff !important; } .btn-primary:hover { background: #7d564b !important; border-color: #7d564b !important; box-shadow: 0 8px 22px rgba(149, 103, 90, .30) !important; } .btn-secondary, .btn-secondary:hover { background: #6b7280 !important; border-color: #6b7280 !important; color: #fff !important; } .btn-secondary:hover { background: #4b5563 !important; border-color: #4b5563 !important; } .btn-success, .btn-success:hover { background: #059669 !important; border-color: #059669 !important; color: #fff !important; } .btn-success:hover { background: #047857 !important; border-color: #047857 !important; } .btn-danger, .btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } .btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; } .btn-info, .btn-info:hover { background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important; } .btn-info:hover { background: #0369a1 !important; border-color: #0369a1 !important; } .btn-warning, .btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; } .btn-outline-secondary { background: transparent !important; border-color: #d1d5db !important; color: #374151 !important; } .btn-outline-secondary:hover { background: #f3f4f6 !important; color: #111827 !important; } .btn-outline-danger { background: transparent !important; border-color: #dc2626 !important; color: #dc2626 !important; } .btn-outline-danger:hover { background: #fef2f2 !important; } /* Inverted brand button — transparent with a terracotta border, fills on hover. The secondary counterpart to the solid .btn-primary. */ .btn-outline-primary { background: rgba(149, 103, 90, .06) !important; border-color: #95675a !important; color: #95675a !important; } .btn-outline-primary:hover { background: #95675a !important; border-color: #95675a !important; color: #fff !important; box-shadow: 0 8px 22px rgba(149, 103, 90, .25) !important; } /* 5) Badges flat */ .badge { font-weight: 500; } /* 6) Light theme surfaces — white cards on the warm brand gradient. */ html:not([data-bs-theme="dark"]) body { background: transparent !important; } html:not([data-bs-theme="dark"]) .card { background: #ffffff !important; border: 1px solid #ececec !important; } html:not([data-bs-theme="dark"]) .card:hover { border-color: rgba(149, 103, 90, .30) !important; } html:not([data-bs-theme="dark"]) .card-header { background: transparent !important; border-bottom: 1px solid #f1eae7 !important; } html:not([data-bs-theme="dark"]) .navbar { background: rgba(255,255,255,.75) !important; border-bottom: 1px solid #ece4e1 !important; } html:not([data-bs-theme="dark"]) .sidebar { background: rgba(255,255,255,.7) !important; border-right: 1px solid #ece4e1 !important; } html:not([data-bs-theme="dark"]) .form-control, html:not([data-bs-theme="dark"]) .form-select { background: #fff !important; border: 1px solid #d1d5db !important; } .form-control:focus, .form-select:focus { box-shadow: none !important; border-color: #1f2937 !important; } /* 7) Flat tiles (dashboard projects, step chooser) */ .project-tile, .step-type-card { box-shadow: none !important; transform: none !important; } .project-tile:hover { border-color: #9ca3af !important; } a.step-type-card:hover { transform: none !important; } html:not([data-bs-theme="dark"]) .project-tile { background: #ffffff !important; border: 1px solid #e5e7eb !important; } /* 8) Dropdowns flat */ .dropdown-menu { border: 1px solid #e5e7eb !important; } /* 9) Table / list clickable links — black, lightly bold */ .link-high-prio { color: #111827 !important; font-weight: 600; } .link-high-prio:hover { color: #000000 !important; text-decoration: underline; } [data-bs-theme="dark"] .link-high-prio { color: #f3f4f6 !important; } [data-bs-theme="dark"] .link-high-prio:hover { color: #ffffff !important; } /* 10) Borderless icon action buttons (same look as workflow canvas nodes) */ .btn-icon { background: transparent !important; border: none !important; box-shadow: none !important; padding: .3rem !important; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease; } .btn-icon:hover { background: rgba(0, 0, 0, .06) !important; } [data-bs-theme="dark"] .btn-icon:hover { background: rgba(255, 255, 255, .10) !important; } .btn-icon .material-symbols-rounded { font-size: 20px; } /* Action icons: neutral (near-black) at rest, semantic colour on hover. The icons keep their text-* class (text-info, text-danger, …) which only shows on hover. Applies to the global .btn-icon toolbars and the workflow step footer buttons. */ .btn-icon .material-symbols-rounded, .workflow-node .card-footer .btn .material-symbols-rounded { color: #1f2937 !important; } [data-bs-theme="dark"] .btn-icon .material-symbols-rounded, [data-bs-theme="dark"] .workflow-node .card-footer .btn .material-symbols-rounded { color: #e5e7eb !important; } .btn-icon:hover .material-symbols-rounded.text-info, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-info { color: #0284c7 !important; } .btn-icon:hover .material-symbols-rounded.text-primary, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-primary { color: var(--brand, #95675a) !important; } .btn-icon:hover .material-symbols-rounded.text-success, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-success { color: #059669 !important; } .btn-icon:hover .material-symbols-rounded.text-warning, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-warning { color: #d97706 !important; } .btn-icon:hover .material-symbols-rounded.text-danger, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-danger { color: #dc2626 !important; } .btn-icon:hover .material-symbols-rounded.text-secondary, .workflow-node .card-footer .btn:hover .material-symbols-rounded.text-secondary { color: #6b7280 !important; } /* 11) Status dots for new task types */ .dot-4 { background-color: #8b5cf6; } .dot-5 { background-color: #ec4899; } .dot-6 { background-color: #0ea5e9; } .dot-7 { background-color: #0891b2; } .dot-8 { background-color: #059669; } /* ========================================================================== 12) Config forms — richer, less flat (accent colour, typography, sections) ========================================================================== */ .config-form .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: #000; margin-bottom: .35rem; } [data-bs-theme="dark"] .config-form .form-label { color: #9ca3af; } .config-form label:not(.form-check-label):not(.form-label) { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: #000; display: inline-block; margin-bottom: .35rem; } [data-bs-theme="dark"] .config-form label:not(.form-check-label):not(.form-label) { color: #9ca3af; } .config-form .form-section { margin-bottom: 1.75rem; } .config-form .form-section-title { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--color-text); padding-bottom: .55rem; margin: 0 0 1.15rem; border-bottom: 1px solid #eceef1; } [data-bs-theme="dark"] .config-form .form-section-title { border-bottom-color: #374151; } .config-form .form-section-title .sec-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; background: color-mix(in srgb, var(--sec, #95675a) 14%, transparent); color: var(--sec, #95675a); } .config-form .form-section-title .sec-icon .material-symbols-rounded { font-size: 20px; } .config-form .form-control:focus, .config-form .form-select:focus { border-color: var(--sec, #95675a) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec, #95675a) 20%, transparent) !important; } /* Tabs — accent underline + coloured active state */ .config-form .nav-tabs { border-bottom: 2px solid #eceef1; gap: 2px; } [data-bs-theme="dark"] .config-form .nav-tabs { border-bottom-color: #374151; } .config-form .nav-tabs .nav-link { border: none; background: transparent; color: #6b7280; font-weight: 600; padding: .65rem 1.05rem; border-bottom: 2px solid transparent; margin-bottom: -2px; } .config-form .nav-tabs .nav-link:hover { color: #111827; } [data-bs-theme="dark"] .config-form .nav-tabs .nav-link:hover { color: #f3f4f6; } .config-form .nav-tabs .nav-link.active { color: #95675a; border-bottom-color: #95675a; } .config-form .nav-tabs .nav-link .material-symbols-rounded { font-size: 1.15rem; } .config-form .form-check-input:checked { background-color: #95675a; border-color: #95675a; } /* Read-only values in config forms — shown as labels, not editable inputs */ .config-form .readonly-group { background: color-mix(in srgb, #6b7280 6%, transparent); padding: 14px 16px; } .config-form .readonly-value { background: transparent !important; border: none !important; border-bottom: 1px dashed #cbd0d6 !important; padding: 2px 0 !important; height: auto; font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; font-size: .82rem; color: #6b7280; opacity: 1 !important; cursor: default; box-shadow: none !important; } [data-bs-theme="dark"] .config-form .readonly-value { color: #9ca3af; border-bottom-color: #374151 !important; } /* Read-only values — higher specificity to beat the flat .form-control override */ .config-form .readonly-group .readonly-value { background: transparent !important; border: 0 !important; padding: 3px 2px !important; height: auto; font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; font-size: .82rem; color: #6b7280 !important; opacity: 1 !important; box-shadow: none !important; cursor: default; } [data-bs-theme="dark"] .config-form .readonly-group .readonly-value { color: #9ca3af !important; } /* Select2 dropdown lives on (outside .config-form) — style it globally */ .select2-container--default .select2-selection__rendered { color: #1f2937 !important; } .select2-container--default .select2-results__option { color: #1f2937; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #f1eae7; color: #1f2937; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #95675a !important; color: #fff !important; } [data-bs-theme="dark"] .select2-dropdown { background: #1f2937; border-color: #374151; } [data-bs-theme="dark"] .select2-container--default .select2-selection__rendered { color: #e5e7eb !important; } [data-bs-theme="dark"] .select2-container--default .select2-results__option { color: #e5e7eb; } [data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #374151; color: #fff; } /* Select2 single control — match the soft text inputs (border, radius, height) */ .config-form .select2-container { width: 100% !important; } .config-form .select2-container--default .select2-selection--single { height: 38px !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex; align-items: center; } .config-form .select2-container--default .select2-selection--single .select2-selection__rendered { height: 38px !important; line-height: 38px !important; padding-left: 12px; color: #1f2937; } .config-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; } .config-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .config-form .select2-container--default.select2-container--focus .select2-selection--single, .config-form .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sec, #95675a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec, #95675a) 20%, transparent); } [data-bs-theme="dark"] .config-form .select2-container--default .select2-selection--single { background: #111827; border-color: #374151; } [data-bs-theme="dark"] .config-form .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e7eb; } /* Dropdown panel — flat border matching inputs */ .select2-dropdown { border-color: #d1d5db; border-radius: 0; } /* Config forms — more breathing room between fields */ .config-form .mb-3 { margin-bottom: 2rem !important; } .config-form .form-section { margin-bottom: 2.5rem; } .config-form .form-section-title { margin-bottom: 1.5rem; } /* Tab shown as disabled (but still clickable) — e.g. packaging fees turned off */ .config-form .nav-tabs .nav-link.tab-disabled { opacity: .45; } .config-form .nav-tabs .nav-link.tab-disabled.active { opacity: 1; } /* Carrier logo/badge inside the mapping select */ .carrier-logo { height: 20px; width: auto; max-width: 64px; object-fit: contain; display: inline-block; } .select2-results__option .carrier-logo { height: 22px; } /* Shared config-form chrome (tabs + sticky save bar) */ .config-form .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; } .config-savebar { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; margin-top: 22px; background: #fff; border-top: 1px solid #e5e7eb; } [data-bs-theme="dark"] .config-savebar { background: #171717; border-top-color: #374151; } /* ========================================================================== 14) Form field defaults (requested) — soft grey fields, black labels, black focus border, lighter placeholder. Placed last so it wins over the flat-design resets and the earlier !important field overrides. ========================================================================== */ .form-control, .form-select { border-radius: 5px !important; } html:not([data-bs-theme="dark"]) .form-control, html:not([data-bs-theme="dark"]) .form-select { background-color: #f3f3f3 !important; border: 1px solid transparent !important; } /* Focus: crisp black border, no glow. The selectors carry enough specificity (html:not(...) prefix) to beat the default field border set above — otherwise the higher-specificity default border would win even on :focus. */ html:not([data-bs-theme="dark"]) .form-control:focus, html:not([data-bs-theme="dark"]) .form-select:focus, [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, .config-form .form-control:focus, .config-form .form-select:focus { border-color: #000 !important; box-shadow: none !important; } /* Labels black across all forms (light theme). */ html:not([data-bs-theme="dark"]) .form-label, html:not([data-bs-theme="dark"]) .config-form .form-label, html:not([data-bs-theme="dark"]) form label:not(.form-check-label) { color: #000 !important; } /* Placeholder — lighter grey. */ .form-control::placeholder, .form-select::placeholder { color: #b3b3b3 !important; opacity: 1; } /* Select2 controls — same soft-grey look as the fields, black border on focus. Global scope + html:not(...) prefix so it also beats the .config-form select2 overrides above. */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-radius: 5px !important; min-height: 38px !important; } html:not([data-bs-theme="dark"]) .select2-container--default .select2-selection--single, html:not([data-bs-theme="dark"]) .select2-container--default .select2-selection--multiple { background-color: #f3f3f3 !important; border: 1px solid transparent !important; } html:not([data-bs-theme="dark"]) .select2-container--default.select2-container--focus .select2-selection--single, html:not([data-bs-theme="dark"]) .select2-container--default.select2-container--focus .select2-selection--multiple, html:not([data-bs-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--single, html:not([data-bs-theme="dark"]) .select2-container--default.select2-container--open .select2-selection--multiple { border-color: #000 !important; box-shadow: none !important; } .select2-container--default .select2-selection__placeholder { color: #b3b3b3 !important; } .select2-dropdown { border-radius: 5px !important; } /* ========================================================================== 15) Requested shapes — round the theme toggle, colour swatches and the colour-coded type icons; give every badge/button a light 3px radius. Uses !important to beat the global `*{border-radius:0!important}` reset. ========================================================================== */ .theme-toggle-fixed, .sidebar-toggle-btn, .color-swatch, .task-ico { border-radius: 50% !important; } .badge, .btn { border-radius: 3px !important; } /* 16) Icon action buttons — rounded hover background (not square). Applies to the global .btn-icon and the workflow step footer icon buttons. */ .btn-icon, .workflow-node .card-footer .btn { border-radius: 8px !important; } /* 17) Embedded mode (page loaded inside a workflow modal iframe) — no sidebar, full-width content. */ .container-content.embed-content { margin-left: 0 !important; padding: 18px !important; } /* 18) Embedded pages inside a workflow modal — show only the panel content: no gradient background, no breadcrumb, no Symfony debug toolbar. */ body.embed-mode::before { display: none !important; } body.embed-mode { background: #fff !important; } [data-bs-theme="dark"] body.embed-mode { background: #171717 !important; } body.embed-mode nav[aria-label="breadcrumb"], body.embed-mode .breadcrumb { display: none !important; } body.embed-mode .sf-toolbar, body.embed-mode .sf-minitoolbar, body.embed-mode .sf-toolbarreset, body.embed-mode [id^="sfwdt"], body.embed-mode [id^="sfMiniToolbar"] { display: none !important; } /* Trim the top gap left by the removed breadcrumb. */ body.embed-mode .container-content.embed-content { padding-top: 6px !important; } body.embed-mode .card.mb-5 { margin-bottom: 0 !important; } /* Single-frame look: the workflow modal already supplies the outer header + border, so the embedded page's own card chrome is redundant. Flatten the top-level card; the title is lifted into the modal header by JS, which also hides a title-only header or strips just the title from an actions header (see projects/show.html.twig). */ body.embed-mode .card { border: 0 !important; box-shadow: none !important; background: transparent !important; } body.embed-mode .card > .card-header { background: transparent !important; border-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.embed-mode .card > .card-body { padding: 0 !important; } body.embed-mode .container-content.embed-content { padding: 14px 20px !important; } /* Keep the config tabs pinned to the top of the modal while the form scrolls, so switching tabs never requires scrolling back up. */ body.embed-mode .nav-tabs { position: sticky; top: 0; z-index: 20; background: #fff; padding-top: 14px; margin-top: -14px; box-shadow: 0 6px 8px -6px rgba(31, 23, 20, 0.12); } [data-bs-theme="dark"] body.embed-mode .nav-tabs { background: #171717; }