/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), select {background: #e5e5e5; border: 1px solid black;} /* -------------------------------------------------------------------------------- COLLAPSIBLE REPORT NAV (toggled by sidebar_controller via .sidebar-collapsed on ) --------------------------------------------------------------------------------*/ #report-nav { transition: width 0.15s ease; } #action-bar { transition: left 0.15s ease; } main { transition: padding-left 0.15s ease; } .page-inner, .report-filter { transition: margin-left 0.15s ease; } .sidebar-collapsed #report-nav { width: 64px; } .sidebar-collapsed #report-nav .nav-collapsible { display: none !important; } .sidebar-collapsed #report-nav .nav-header { justify-content: center; } .sidebar-collapsed #report-nav .nav-item { width: 52px; padding-left: 0; padding-right: 0; justify-content: center; } .sidebar-collapsed #report-nav .nav-user { width: 52px; padding-left: 2px; padding-right: 2px; } /* Shift the page content over to meet the narrowed rail */ .sidebar-collapsed #action-bar { left: 64px; } .sidebar-collapsed main { padding-left: 84px; } .sidebar-collapsed .page-inner { margin-left: 96px; } .sidebar-collapsed .report-filter { margin-left: 96px; } /* The toggle chevron points the other way once collapsed */ .sidebar-collapsed #report-nav .nav-toggle svg { transform: rotate(180deg); } /* -------------------------------------------------------------------------------- MODERN THEMES: collapsible nav sections + hidden menu shortcut keys --------------------------------------------------------------------------------*/ /* Hide the keyboard-shortcut column inside the sidebar on the modern themes. */ [data-theme^="modern"] #report-nav .nav-key { display: none; } /* Section headers are inert by default; the chevron only shows (and the header becomes clickable) on the modern themes, where nav_section_controller runs. */ #report-nav .nav-section-chevron { display: none; } [data-theme^="modern"] #report-nav .nav-section-chevron { display: block; } [data-theme^="modern"] #report-nav .nav-section-header { cursor: pointer; } [data-theme^="modern"] #report-nav .nav-section-open .nav-section-chevron { transform: rotate(90deg); } /* Modern-dark CRUD/admin pages: a dark canvas (lighter than the #0f172a sidebar) with slightly-lighter cards and light text. Scoped to
, so only the application/listing layouts go dark — reports render in their own layout and stay light. Selectors are more specific than the Tailwind utilities they override, so no !important is needed. */ [data-theme="modern-dark"] main { background-color: #1e293b; color: #f1f5f9; } [data-theme="modern-dark"] main .bg-white { background-color: #334155; } [data-theme="modern-dark"] main .bg-gray-50, [data-theme="modern-dark"] main .bg-gray-100 { background-color: #2b3a52; } [data-theme="modern-dark"] main .border-gray-200, [data-theme="modern-dark"] main .border-gray-300, [data-theme="modern-dark"] main .border-gray-400 { border-color: #475569; } [data-theme="modern-dark"] main .text-gray-900, [data-theme="modern-dark"] main .text-gray-800, [data-theme="modern-dark"] main .text-gray-700, [data-theme="modern-dark"] main .text-black { color: #f1f5f9; } [data-theme="modern-dark"] main .text-gray-600, [data-theme="modern-dark"] main .text-gray-500, [data-theme="modern-dark"] main .text-gray-400 { color: #cbd5e1; } /* Darker error / selection / status highlights so they sit on the dark canvas (companies listing: selected row is yellow, error row is red). */ [data-theme="modern-dark"] main .bg-yellow-100, [data-theme="modern-dark"] main .bg-yellow-200 { background-color: #7a5310; } [data-theme="modern-dark"] main .bg-blue-50 { background-color: #000000; } /* firms listing: selected row */ [data-theme="modern-dark"] main .hover\:bg-gray-50:hover { background-color: #000000; } /* e.g. company-name hover */ [data-theme="modern-dark"] main .bg-red-50, [data-theme="modern-dark"] main .bg-red-100 { background-color: #7f1d1d; } [data-theme="modern-dark"] main .bg-green-100 { background-color: #14532d; } [data-theme="modern-dark"] main .text-red-500, [data-theme="modern-dark"] main .text-red-700 { color: #fca5a5; } [data-theme="modern-dark"] main .text-green-700 { color: #86efac; } /* Black form fields with light text (the :not chain mirrors the base input rule above so this wins on specificity; checkboxes/radios are left alone). */ [data-theme="modern-dark"] main input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), [data-theme="modern-dark"] main textarea, [data-theme="modern-dark"] main select { background-color: #000000; color: #f1f5f9; border-color: #475569; color-scheme: dark; /* render the native dropdown list / arrow dark too */ } [data-theme="modern-dark"] main input::placeholder, [data-theme="modern-dark"] main textarea::placeholder { color: #94a3b8; } /* Rich-text (Trix) editor: black field with light text; invert the toolbar icons so they stay visible on the dark surface. */ [data-theme="modern-dark"] main trix-editor, [data-theme="modern-dark"] main .trix-content { background-color: #000000; color: #f1f5f9; border-color: #475569; } [data-theme="modern-dark"] main trix-toolbar .trix-button { filter: invert(1); } /* Modern-dark action-bar buttons (Refresh, PDF, Changelog, Help, Save, etc): a much darker background with a white outline instead of bright fills. */ [data-theme="modern-dark"] #action-bar .bg-primary, [data-theme="modern-dark"] #action-bar .bg-accent, [data-theme="modern-dark"] #action-bar .bg-blue-600, [data-theme="modern-dark"] #action-bar .bg-green-700, [data-theme="modern-dark"] #action-bar .bg-gray-100 { background-color: #0a0a0a; border: 1px solid #ffffff; color: #ffffff; } [data-theme="modern-dark"] #action-bar .bg-primary:hover, [data-theme="modern-dark"] #action-bar .bg-accent:hover, [data-theme="modern-dark"] #action-bar .bg-blue-600:hover, [data-theme="modern-dark"] #action-bar .bg-green-700:hover, [data-theme="modern-dark"] #action-bar .bg-gray-100:hover, [data-theme="modern-dark"] #action-bar .hover\:bg-gray-50:hover { background-color: #1f2937; } /* Modern themes use Inter, which ships proper normal/bold weights (the joe theme keeps Open Sans). Selectors beat the base `html, body` rule in report.css. */ [data-theme^="modern"], [data-theme^="modern"] body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } /* …but reports keep the original joe font (Open Sans) so printed/PDF output is unchanged. .page-inner wraps the whole report (header + body) on every theme. */ [data-theme^="modern"] .page-inner { font-family: "Open Sans"; } /* Roomier vertical rhythm on the modern themes (item widths are left untouched so the fixed 220px rail / collapsed rail still line up). */ [data-theme^="modern"] #report-nav .nav-item { padding-top: 0.35rem; padding-bottom: 0.35rem; margin-top: 0.2rem; } /* Indent items within a collapsible section so they read as sub-items under the heading (modern themes, expanded rail only — the collapsed icon rail keeps its centred items). */ html[data-theme^="modern"]:not(.sidebar-collapsed) #report-nav [data-nav-section-target="body"] .nav-item { padding-left: 22px; } [data-theme^="modern"] #report-nav .nav-section-header { margin-top: 0.85rem; margin-bottom: 0.3rem; } [data-theme^="modern"] #report-nav .nav-user { margin-bottom: 0.6rem; } a {text-decoration:none;} .companies-grid { grid-template-columns: 2.5rem 7rem 4rem 1.5fr 6rem 10rem 5rem 4rem 4rem 4rem 16rem; } .companies-grid .col-code, .companies-grid .col-client-type, .companies-grid .col-business, .companies-grid .col-period, .companies-grid .col-source, .companies-grid .col-group, .companies-grid .col-turnover { font-size: 0.75rem; line-height: 1rem; } @media (max-width: 1500px) { .companies-grid { grid-template-columns: 2.5rem 7rem 4rem 1.5fr 6rem 4rem 4rem 4rem 16rem; } .companies-grid .col-business, .companies-grid .col-period { display: none; } } @media (max-width: 1250px) { .companies-grid { grid-template-columns: 2.5rem 7rem 4rem 1.5fr 4rem 4rem 4rem 16rem; } .companies-grid .col-client-type, .companies-grid .col-business, .companies-grid .col-period { display: none; } } @media (max-width: 1050px) { .companies-grid { grid-template-columns: 2.5rem 7rem 5rem 1fr 16rem; } .companies-grid .col-client-type, .companies-grid .col-business, .companies-grid .col-period, .companies-grid .col-source, .companies-grid .col-group, .companies-grid .col-turnover { display: none; } } @media (max-width: 900px) { .companies-grid { grid-template-columns: 1fr; } .companies-grid .col-checkbox, .companies-grid .col-select, .companies-grid .col-code, .companies-grid .col-client-type, .companies-grid .col-business, .companies-grid .col-period, .companies-grid .col-source, .companies-grid .col-group, .companies-grid .col-turnover, .companies-grid .col-actions { display: none; } }