/* ============================================================ medCMMS Theme System v20260225j ============================================================ Motywy: light (domyślny), dark, blue, green Użycie: data-theme="light|dark|blue|green" na ============================================================ */ /* --- Smooth transition for theme switching --- */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ============================================================ LIGHT THEME (Biel i Jasny Szary) - domyślny ============================================================ */ :root, [data-theme="light"] { /* Header */ --navbar-bg: #FFFFFF; --navbar-border: #E2E8F0; --navbar-text: #1E293B; /* Tło strony */ --bg-dark: #F1F5F9; --bg-primary: #F1F5F9; --bg-secondary: #F8FAFC; /* Karty i tabele */ --bg-card: #FFFFFF; --bg-card-alt: #F8FAFC; /* Zebra striping */ --table-stripe-odd: #FFFFFF; --table-stripe-even: #F8FAFC; /* Przyciski akcji */ --btn-default-bg: #FFFFFF; --btn-default-border: #E2E8F0; --btn-default-color: #1E293B; /* Pola input/formularze */ --input-bg: #FFFFFF; --input-border: #E2E8F0; --input-color: #1E293B; /* Tekst główny */ --text-primary: #1E293B; --text-secondary: #475569; --text-muted: #64748B; /* Akcenty */ --primary: #0EA5E9; --primary-dark: #0284C7; --primary-rgb: 14, 165, 233; --accent: #0EA5E9; --accent-bg: rgba(14, 165, 233, 0.08); /* Status colors */ --success: #22C55E; --success-rgb: 34, 197, 94; --warning: #F59E0B; --warning-rgb: 245, 158, 11; --danger: #EF4444; --danger-rgb: 239, 68, 68; --info: #0EA5E9; --info-rgb: 14, 165, 233; /* Borders */ --border-color: #E2E8F0; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 25px rgba(0,0,0,0.12); /* Table */ --table-hover: rgba(14, 165, 233, 0.05); --table-selected: #DBEAFE; --table-active: rgba(14, 165, 233, 0.08); --table-header-bg: #F8FAFC; --table-header-color: #475569; /* Badges */ --badge-ok-bg: rgba(34, 197, 94, 0.12); --badge-ok-color: #15803D; --badge-broken-bg: rgba(239, 68, 68, 0.12); --badge-broken-color: #DC2626; --badge-service-bg: rgba(245, 158, 11, 0.15); --badge-service-color: #B45309; --badge-default-bg: rgba(100, 116, 139, 0.12); --badge-default-color: #475569; /* Misc */ --loading-overlay: rgba(255, 255, 255, 0.8); --scrollbar-track: #F1F5F9; --scrollbar-thumb: #CBD5E1; --row-warranty: rgba(14, 165, 233, 0.06); --row-service-contract: rgba(34, 197, 94, 0.04); --brand-highlight: #0EA5E9; --toolbar-bg: #FFFFFF; --dropdown-bg: #FFFFFF; --dropdown-hover: #F1F5F9; } /* ============================================================ DARK THEME (Tryb Ciemny Professional) ============================================================ */ [data-theme="dark"] { /* Header */ --navbar-bg: #0F172A; --navbar-border: #1E293B; --navbar-text: #F8FAFC; /* Tło strony */ --bg-dark: #020617; --bg-primary: #020617; --bg-secondary: #0F172A; /* Karty i tabele */ --bg-card: #1E293B; --bg-card-alt: #334155; /* Zebra striping */ --table-stripe-odd: #1E293B; --table-stripe-even: #161E2E; /* Przyciski akcji - CIEMNOSZARE, NIE BIAŁE */ --btn-default-bg: #334155; --btn-default-border: #475569; --btn-default-color: #F1F5F9; /* Pola input/formularze - CIEMNE TŁO */ --input-bg: #334155; --input-border: #475569; --input-color: #F1F5F9; /* Tekst główny */ --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; /* Akcenty - błękitny */ --primary: #38BDF8; --primary-dark: #0EA5E9; --primary-rgb: 56, 189, 248; --accent: #38BDF8; --accent-bg: rgba(56, 189, 248, 0.12); /* Status colors */ --success: #4ADE80; --success-rgb: 74, 222, 128; --warning: #FBBF24; --warning-rgb: 251, 191, 36; --danger: #F87171; --danger-rgb: 248, 113, 113; --info: #38BDF8; --info-rgb: 56, 189, 248; /* Borders */ --border-color: #334155; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 25px rgba(0,0,0,0.6); /* Table */ --table-hover: rgba(56, 189, 248, 0.08); --table-selected: #1E3A8A; --table-active: rgba(56, 189, 248, 0.12); --table-header-bg: #0F172A; --table-header-color: #F1F5F9; /* Badges */ --badge-ok-bg: rgba(74, 222, 128, 0.2); --badge-ok-color: #4ADE80; --badge-broken-bg: rgba(248, 113, 113, 0.2); --badge-broken-color: #F87171; --badge-service-bg: rgba(251, 191, 36, 0.2); --badge-service-color: #FBBF24; --badge-default-bg: rgba(148, 163, 184, 0.15); --badge-default-color: #CBD5E1; /* Misc */ --loading-overlay: rgba(2, 6, 23, 0.75); --scrollbar-track: #1E293B; --scrollbar-thumb: #475569; --row-warranty: rgba(56, 189, 248, 0.06); --row-service-contract: rgba(74, 222, 128, 0.04); --brand-highlight: #38BDF8; --toolbar-bg: #1E293B; --dropdown-bg: #1E293B; --dropdown-hover: #334155; } /* ============================================================ BLUE THEME (Biel i Jasny Błękit) ============================================================ */ [data-theme="blue"] { /* Header */ --navbar-bg: #E0F2FE; --navbar-border: #BAE6FD; --navbar-text: #0369A1; /* Tło strony */ --bg-dark: #F0F9FF; --bg-primary: #F0F9FF; --bg-secondary: #E0F2FE; /* Karty i tabele */ --bg-card: #FFFFFF; --bg-card-alt: #E0F2FE; /* Zebra striping */ --table-stripe-odd: #FFFFFF; --table-stripe-even: #F0F9FF; /* Przyciski akcji */ --btn-default-bg: #FFFFFF; --btn-default-border: #BAE6FD; --btn-default-color: #0369A1; /* Pola input/formularze */ --input-bg: #FFFFFF; --input-border: #BAE6FD; --input-color: #0C4A6E; /* Tekst główny */ --text-primary: #0C4A6E; --text-secondary: #0369A1; --text-muted: #0284C7; /* Akcenty */ --primary: #0284C7; --primary-dark: #0369A1; --primary-rgb: 2, 132, 199; --accent: #0284C7; --accent-bg: rgba(2, 132, 199, 0.08); /* Status colors */ --success: #22C55E; --success-rgb: 34, 197, 94; --warning: #F59E0B; --warning-rgb: 245, 158, 11; --danger: #EF4444; --danger-rgb: 239, 68, 68; --info: #0EA5E9; --info-rgb: 14, 165, 233; /* Borders */ --border-color: #BAE6FD; /* Shadows */ --shadow-sm: 0 1px 3px rgba(2, 132, 199, 0.08); --shadow-md: 0 4px 12px rgba(2, 132, 199, 0.12); --shadow-lg: 0 8px 25px rgba(2, 132, 199, 0.15); /* Table */ --table-hover: rgba(2, 132, 199, 0.05); --table-selected: #BAE6FD; --table-active: rgba(2, 132, 199, 0.08); --table-header-bg: #E0F2FE; --table-header-color: #0369A1; /* Badges */ --badge-ok-bg: rgba(34, 197, 94, 0.12); --badge-ok-color: #15803D; --badge-broken-bg: rgba(239, 68, 68, 0.12); --badge-broken-color: #DC2626; --badge-service-bg: rgba(245, 158, 11, 0.15); --badge-service-color: #B45309; --badge-default-bg: rgba(100, 116, 139, 0.12); --badge-default-color: #475569; /* Misc */ --loading-overlay: rgba(240, 249, 255, 0.85); --scrollbar-track: #E0F2FE; --scrollbar-thumb: #7DD3FC; --row-warranty: rgba(14, 165, 233, 0.06); --row-service-contract: rgba(34, 197, 94, 0.04); --brand-highlight: #0284C7; --toolbar-bg: #FFFFFF; --dropdown-bg: #FFFFFF; --dropdown-hover: #E0F2FE; } /* ============================================================ GREEN THEME (Zieleń Biznesowa) ============================================================ */ [data-theme="green"] { /* Header */ --navbar-bg: #15803D; --navbar-border: #166534; --navbar-text: #FFFFFF; /* Tło strony */ --bg-dark: #F0FDF4; --bg-primary: #F0FDF4; --bg-secondary: #DCFCE7; /* Karty i tabele */ --bg-card: #FFFFFF; --bg-card-alt: #DCFCE7; /* Zebra striping */ --table-stripe-odd: #FFFFFF; --table-stripe-even: #F0FDF4; /* Przyciski akcji */ --btn-default-bg: #FFFFFF; --btn-default-border: #86EFAC; --btn-default-color: #15803D; /* Pola input/formularze */ --input-bg: #FFFFFF; --input-border: #86EFAC; --input-color: #14532D; /* Tekst główny */ --text-primary: #14532D; --text-secondary: #166534; --text-muted: #15803D; /* Akcenty */ --primary: #22C55E; --primary-dark: #16A34A; --primary-rgb: 34, 197, 94; --accent: #22C55E; --accent-bg: rgba(34, 197, 94, 0.08); /* Status colors */ --success: #22C55E; --success-rgb: 34, 197, 94; --warning: #F59E0B; --warning-rgb: 245, 158, 11; --danger: #EF4444; --danger-rgb: 239, 68, 68; --info: #0EA5E9; --info-rgb: 14, 165, 233; /* Borders */ --border-color: #86EFAC; /* Shadows */ --shadow-sm: 0 1px 3px rgba(34, 197, 94, 0.08); --shadow-md: 0 4px 12px rgba(34, 197, 94, 0.12); --shadow-lg: 0 8px 25px rgba(34, 197, 94, 0.15); /* Table */ --table-hover: rgba(34, 197, 94, 0.05); --table-selected: #BBF7D0; --table-active: rgba(34, 197, 94, 0.08); --table-header-bg: #DCFCE7; --table-header-color: #166534; /* Badges */ --badge-ok-bg: rgba(34, 197, 94, 0.12); --badge-ok-color: #15803D; --badge-broken-bg: rgba(239, 68, 68, 0.12); --badge-broken-color: #DC2626; --badge-service-bg: rgba(245, 158, 11, 0.15); --badge-service-color: #B45309; --badge-default-bg: rgba(73, 80, 87, 0.12); --badge-default-color: #495057; /* Misc */ --loading-overlay: rgba(240, 253, 244, 0.85); --scrollbar-track: #DCFCE7; --scrollbar-thumb: #86EFAC; --row-warranty: rgba(14, 165, 233, 0.06); --row-service-contract: rgba(34, 197, 94, 0.06); --brand-highlight: #22C55E; --toolbar-bg: #FFFFFF; --dropdown-bg: #FFFFFF; --dropdown-hover: #DCFCE7; } /* ============================================================ COMMON STYLES USING CSS VARIABLES ============================================================ */ body { background: var(--bg-dark) !important; color: var(--text-primary) !important; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* --- Navbar / Header --- */ .sticky-header { position: sticky; top: 0; z-index: 1030; transition: box-shadow 0.2s ease; } .sticky-header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.18); } /* Main header bar */ .main-header { background: var(--navbar-bg) !important; color: var(--navbar-text) !important; border-bottom: 1px solid var(--navbar-border) !important; padding: 0; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 0.9rem; } .main-header .header-left { display: flex; align-items: center; gap: 0; height: 100%; } .main-header .header-right { display: flex; align-items: center; gap: 0.5rem; padding-right: 1rem; height: 100%; } /* Brand in header */ .main-header .brand-logo { padding: 0.4rem 1rem; font-size: 1.1rem; font-weight: 700; color: var(--navbar-text); text-decoration: none; white-space: nowrap; } .main-header .brand-logo span { color: var(--brand-highlight) !important; } /* Header nav links */ .main-header .header-nav-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.8rem; color: var(--navbar-text); opacity: 0.8; text-decoration: none; font-size: 0.87rem; font-weight: 500; transition: background 0.15s, color 0.15s, opacity 0.15s; white-space: nowrap; height: 100%; border: none; background: transparent; cursor: pointer; position: relative; } .main-header .header-nav-link:hover, .main-header .header-nav-link.active { background: rgba(0,0,0,0.08); opacity: 1; } [data-theme="dark"] .main-header .header-nav-link:hover, [data-theme="dark"] .main-header .header-nav-link.active, [data-theme="green"] .main-header .header-nav-link:hover, [data-theme="green"] .main-header .header-nav-link.active { background: rgba(255,255,255,0.12); } .main-header .header-nav-link i { font-size: 0.85em; } /* Header nav dropdowns */ .main-header .header-nav-item { position: relative; display: inline-flex; } .main-header .header-nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 0 0 0.5rem 0.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 1050; list-style: none; padding: 0.35rem 0; margin: 0; } .main-header .header-nav-item:hover > .header-nav-dropdown { display: block; } .main-header .header-nav-dropdown li a { display: block; padding: 0.45rem 1.1rem; color: var(--text-primary); text-decoration: none; font-size: 0.87rem; transition: background 0.12s; } .main-header .header-nav-dropdown li a:hover { background: var(--dropdown-hover); } /* Dark theme dropdown overrides */ [data-theme="dark"] .main-header .header-nav-dropdown { background: #1E293B; border-color: #334155; } [data-theme="dark"] .main-header .header-nav-dropdown li a { color: #F1F5F9; } [data-theme="dark"] .main-header .header-nav-dropdown li a:hover { background: #334155; } /* Green theme dropdown overrides - dark text on white dropdown */ [data-theme="green"] .main-header .header-nav-dropdown { background: #FFFFFF; border-color: #86EFAC; } [data-theme="green"] .main-header .header-nav-dropdown li a { color: #14532D !important; } [data-theme="green"] .main-header .header-nav-dropdown li a:hover { background: #DCFCE7; color: #14532D !important; } /* Green theme dropdown overrides - fix for white-on-white text */ [data-theme="green"] .main-header .header-nav-dropdown { background: #ffffff !important; border-color: #b2d8b2 !important; } [data-theme="green"] .main-header .header-nav-dropdown li a { color: #14532D !important; /* Dark green text */ } [data-theme="green"] .main-header .header-nav-dropdown li a:hover { background: #ecfaec !important; color: #14532D !important; } /* Blue theme dropdown overrides */ [data-theme="blue"] .main-header .header-nav-dropdown { background: #ffffff !important; border-color: #c5d2f0 !important; } [data-theme="blue"] .main-header .header-nav-dropdown li a { color: #1c2541 !important; } [data-theme="blue"] .main-header .header-nav-dropdown li a:hover { background: #edf2ff !important; color: #1c2541 !important; } /* Header right-side buttons */ .main-header .header-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.82rem; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid var(--border-color); color: var(--navbar-text); background: transparent; transition: all 0.15s; white-space: nowrap; } .main-header .header-btn:hover { background: rgba(0,0,0,0.08); } [data-theme="dark"] .main-header .header-btn:hover, [data-theme="green"] .main-header .header-btn:hover { background: rgba(255,255,255,0.15); } .main-header .header-btn-new-view { background: #22C55E; border-color: #22C55E; color: #fff; } .main-header .header-btn-new-view:hover { background: #16A34A; border-color: #16A34A; } .main-header .header-btn-old-view { background: rgba(0,0,0,0.05); border-color: var(--border-color); } [data-theme="dark"] .main-header .header-btn-old-view, [data-theme="green"] .main-header .header-btn-old-view { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); } .main-header .header-btn-logout { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #EF4444; } [data-theme="dark"] .main-header .header-btn-logout, [data-theme="green"] .main-header .header-btn-logout { color: #FCA5A5; } .main-header .header-btn-logout:hover { background: #EF4444; border-color: #EF4444; color: #fff; } /* Theme switcher in header */ .main-header .theme-switcher-wrapper { position: relative; display: inline-flex; } .main-header .theme-switcher-wrapper .theme-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 180px; background: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: var(--shadow-md); z-index: 1060; padding: 0.35rem 0; margin-top: 4px; } .main-header .theme-switcher-wrapper:hover .theme-dropdown-menu, .main-header .theme-switcher-wrapper.open .theme-dropdown-menu { display: block; } .main-header .theme-dropdown-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; color: var(--text-primary); text-decoration: none; font-size: 0.85rem; transition: background 0.12s; } .main-header .theme-dropdown-menu a:hover { background: var(--dropdown-hover); } .main-header .theme-dropdown-menu a.active { background: var(--primary); color: #fff; } [data-theme="dark"] .main-header .theme-dropdown-menu { background: #1E293B; border-color: #334155; } [data-theme="dark"] .main-header .theme-dropdown-menu a { color: #F1F5F9; } [data-theme="dark"] .main-header .theme-dropdown-menu a:hover { background: #334155; } /* .theme-dot */ .theme-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border-color); vertical-align: middle; } /* ============================================================ ADAPTIVE NAVBAR CONTRAST - WCAG 2.1 Compliance ============================================================ */ /* Light theme navbar - dark text on white background */ html[data-theme="light"] .main-header, html[data-theme="light"] .main-header *, html[data-theme="light"] .top-navbar, html[data-theme="light"] .top-navbar *, html:not([data-theme]) .main-header, html:not([data-theme]) .main-header *, html:not([data-theme]) .top-navbar, html:not([data-theme]) .top-navbar * { color: #1E293B !important; } html[data-theme="light"] .main-header .brand-logo span, html:not([data-theme]) .main-header .brand-logo span { color: #0EA5E9 !important; } /* Blue theme navbar - dark text on light blue header background (#E0F2FE) */ html[data-theme="blue"] .main-header, html[data-theme="blue"] .main-header *, html[data-theme="blue"] .top-navbar, html[data-theme="blue"] .top-navbar * { color: #0369A1 !important; } html[data-theme="blue"] .main-header .brand-logo span { color: #0284C7 !important; } /* Green theme navbar - white text on green background */ html[data-theme="green"] .main-header, html[data-theme="green"] .main-header *, html[data-theme="green"] .top-navbar, html[data-theme="green"] .top-navbar * { color: #FFFFFF !important; } html[data-theme="green"] .main-header .brand-logo span { color: #86EFAC !important; } /* Dark theme navbar - light text on dark background */ html[data-theme="dark"] .main-header, html[data-theme="dark"] .main-header *, html[data-theme="dark"] .top-navbar, html[data-theme="dark"] .top-navbar * { color: #F8FAFC !important; } html[data-theme="dark"] .main-header .brand-logo span { color: #38BDF8 !important; } /* Navbar separation - border bottom + shadow */ .main-header, .top-navbar { border-bottom: 1px solid var(--navbar-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } html[data-theme="dark"] .main-header, html[data-theme="dark"] .top-navbar { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) !important; } /* ---- Legacy top-navbar (keep for compat) ---- */ .top-navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--navbar-border) !important; padding: 0.6rem 1.5rem; box-shadow: var(--shadow-sm); color: var(--navbar-text); } /* ---- Main Navigation Bar (legacy compat) ---- */ .main-nav-bar { background: var(--navbar-bg); border-bottom: 1px solid var(--navbar-border); padding: 0 1rem; font-size: 0.9rem; } .main-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; } .main-nav-item { position: relative; } .main-nav-link { display: block; padding: 0.5rem 1rem; color: var(--navbar-text); opacity: 0.8; text-decoration: none; font-weight: 500; transition: background 0.15s, opacity 0.15s; white-space: nowrap; } .main-nav-link:hover, .main-nav-link.active { background: rgba(0,0,0,0.08); opacity: 1; } [data-theme="dark"] .main-nav-link:hover, [data-theme="dark"] .main-nav-link.active, [data-theme="green"] .main-nav-link:hover, [data-theme="green"] .main-nav-link.active { background: rgba(255,255,255,0.12); } .main-nav-link i { margin-right: 0.3rem; font-size: 0.85em; } .main-nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 0 0 0.5rem 0.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 1050; list-style: none; padding: 0.35rem 0; margin: 0; } .main-nav-item:hover > .main-nav-dropdown { display: block; } .main-nav-dropdown li a { display: block; padding: 0.45rem 1.1rem; color: var(--text-primary); text-decoration: none; font-size: 0.87rem; transition: background 0.12s; } .main-nav-dropdown li a:hover { background: var(--dropdown-hover); } /* Dark theme nav dropdown */ [data-theme="dark"] .main-nav-dropdown { background: #1E293B; border-color: #334155; } [data-theme="dark"] .main-nav-dropdown li a { color: #F1F5F9; } [data-theme="dark"] .main-nav-dropdown li a:hover { background: #334155; } /* Green theme legacy nav dropdown */ [data-theme="green"] .main-nav-dropdown { background: #FFFFFF; border-color: #86EFAC; } [data-theme="green"] .main-nav-dropdown li a { color: #14532D !important; } [data-theme="green"] .main-nav-dropdown li a:hover { background: #DCFCE7; color: #14532D !important; } /* Brand text (legacy) */ .brand-text { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); } .brand-text span { color: var(--brand-highlight) !important; } /* Blue theme navbar text adjustments */ [data-theme="blue"] .top-navbar .brand-text, [data-theme="blue"] .top-navbar .text-muted { color: #0369A1 !important; } /* Green theme navbar text */ [data-theme="green"] .top-navbar, [data-theme="green"] .main-header { color: #ffffff; } [data-theme="green"] .top-navbar .brand-text, [data-theme="green"] .top-navbar .text-muted { color: rgba(255,255,255,0.9) !important; } [data-theme="green"] .top-navbar .brand-text span { color: #86EFAC !important; } [data-theme="green"] .top-navbar .btn-outline-secondary { color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.3) !important; } [data-theme="green"] .top-navbar .btn-outline-secondary:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; } [data-theme="green"] .top-navbar .btn-outline-danger { color: #FCA5A5 !important; border-color: rgba(252,165,165,0.4) !important; } /* --- Cards --- */ .stat-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; padding: 1.2rem; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); } .stat-card .stat-label { font-size: 0.85rem; color: var(--text-muted); } /* --- Table wrapper --- */ .table-wrapper { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-sm); } /* --- DataTables --- */ table.dataTable { border-collapse: collapse !important; } table.dataTable thead th { background: var(--table-header-bg) !important; border-bottom: 2px solid var(--border-color) !important; color: var(--table-header-color) !important; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.75rem 0.6rem !important; white-space: nowrap; } table.dataTable tbody tr { transition: background 0.15s; cursor: pointer; color: var(--text-primary); } table.dataTable tbody tr:hover { background: var(--table-hover) !important; } table.dataTable tbody tr.selected { background: var(--table-selected) !important; color: #fff; } table.dataTable tbody tr.active-row { background: var(--table-active) !important; border-left: 3px solid var(--primary); } /* ============================================================ ZEBRA STRIPING - universal for all table types ============================================================ */ /* Light theme: white + very light gray */ html[data-theme="light"] table tbody tr:nth-child(odd), html:not([data-theme]) table tbody tr:nth-child(odd), [data-theme="light"] .table tbody tr:nth-child(odd), :not([data-theme]) .table tbody tr:nth-child(odd) { background-color: #FFFFFF !important; } html[data-theme="light"] table tbody tr:nth-child(even), html:not([data-theme]) table tbody tr:nth-child(even), [data-theme="light"] .table tbody tr:nth-child(even), :not([data-theme]) .table tbody tr:nth-child(even) { background-color: #F8FAFC !important; } /* Blue theme: white + light blue */ html[data-theme="blue"] table tbody tr:nth-child(odd), [data-theme="blue"] .table tbody tr:nth-child(odd) { background-color: #FFFFFF !important; } html[data-theme="blue"] table tbody tr:nth-child(even), [data-theme="blue"] .table tbody tr:nth-child(even) { background-color: #F0F9FF !important; } /* Green theme: white + light green */ html[data-theme="green"] table tbody tr:nth-child(odd), [data-theme="green"] .table tbody tr:nth-child(odd) { background-color: #FFFFFF !important; } html[data-theme="green"] table tbody tr:nth-child(even), [data-theme="green"] .table tbody tr:nth-child(even) { background-color: #F0FDF4 !important; } /* Dark theme: deep shades for depth */ html[data-theme="dark"] table tbody tr:nth-child(odd), [data-theme="dark"] .table tbody tr:nth-child(odd) { background-color: #1E293B !important; } html[data-theme="dark"] table tbody tr:nth-child(even), [data-theme="dark"] .table tbody tr:nth-child(even) { background-color: #161E2E !important; } /* Hover effect for all tables */ table tbody tr:hover, .table tbody tr:hover { filter: brightness(0.97); transition: background-color 0.2s ease, filter 0.2s ease; } [data-theme="dark"] table tbody tr:hover, [data-theme="dark"] .table tbody tr:hover { filter: brightness(1.1); } /* Transparent background so row zebra striping shows through */ table tbody td, .table tbody td, table.dataTable tbody td { background: transparent !important; } table.dataTable tbody td { padding: 0.6rem !important; font-size: 0.88rem; border-bottom: 1px solid var(--border-color) !important; vertical-align: middle; color: var(--text-primary); } /* Row classes */ table.dataTable tbody tr.row-warranty { background: var(--row-warranty) !important; } table.dataTable tbody tr.row-service-contract { border-left: 3px solid var(--success) !important; } table.dataTable tbody tr.row-broken { background: var(--badge-broken-bg) !important; } /* --- Status badges --- */ .badge-status { padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.78rem; font-weight: 600; display: inline-block; } .badge-status-ok { background: var(--badge-ok-bg); color: var(--badge-ok-color); } .badge-status-broken { background: var(--badge-broken-bg); color: var(--badge-broken-color); } .badge-status-service { background: var(--badge-service-bg); color: var(--badge-service-color); } .badge-status-default { background: var(--badge-default-bg); color: var(--badge-default-color); } /* Dark theme badge overrides for more contrast */ [data-theme="dark"] .badge-status-broken { background: #EF4444 !important; color: #fff !important; } [data-theme="dark"] .badge-status-ok { background: #22C55E !important; color: #fff !important; } [data-theme="dark"] .badge-status-service { background: #FBBF24 !important; color: #000 !important; } /* --- Toolbar --- */ .toolbar-btn { border-radius: 8px; font-size: 0.85rem; padding: 0.5rem 1rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.2s; } /* Toolbar area background in dark mode */ [data-theme="dark"] .toolbar-area { background: var(--bg-card); border-radius: 8px; padding: 0.75rem; border: 1px solid var(--border-color); } /* ============================================================ DARK MODE BUTTONS - ciemnoszare, NIE białe ============================================================ */ [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-action-dark { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-action-dark:hover { background: #475569 !important; color: #fff !important; } [data-theme="dark"] .btn-primary { background: #38BDF8 !important; border-color: #38BDF8 !important; color: #0F172A !important; } [data-theme="dark"] .btn-primary:hover { background: #0EA5E9 !important; border-color: #0EA5E9 !important; } [data-theme="dark"] .btn-outline-info, [data-theme="dark"] .btn-info { background: #0EA5E9; border-color: #0EA5E9; color: #fff; } [data-theme="dark"] .btn-outline-info:hover { background: #0284C7; border-color: #0284C7; } [data-theme="dark"] .btn-outline-warning, [data-theme="dark"] .btn-warning { background: #FBBF24; border-color: #FBBF24; color: #000; } [data-theme="dark"] .btn-outline-warning:hover { background: #F59E0B; border-color: #F59E0B; } [data-theme="dark"] .btn-outline-success { background: #334155; border-color: #475569; color: #F1F5F9; } [data-theme="dark"] .btn-outline-success:hover { background: #22C55E; border-color: #22C55E; color: #fff; } /* ============================================================ DARK MODE INPUTS - ciemne tło, NIE białe ============================================================ */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #94A3B8 !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #38BDF8 !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important; outline: none !important; } [data-theme="dark"] .form-check-input { background-color: #334155; border-color: #475569; } [data-theme="dark"] .form-check-input:checked { background-color: #38BDF8; border-color: #38BDF8; } /* ============================================================ DJANGO ADMIN DARK MODE INPUTS - comprehensive selectors ============================================================ */ [data-theme="dark"] .vTextField, [data-theme="dark"] .vDateField, [data-theme="dark"] .vTimeField, [data-theme="dark"] .vIntegerField, [data-theme="dark"] .vBigIntegerField, [data-theme="dark"] .vPositiveSmallIntegerField, [data-theme="dark"] .vForeignKeyRawIdAdminField, [data-theme="dark"] .vURLField, [data-theme="dark"] .vLargeTextField, [data-theme="dark"] input.vTextField, [data-theme="dark"] input.vDateField, [data-theme="dark"] input.vTimeField, [data-theme="dark"] input.vIntegerField, [data-theme="dark"] textarea.vLargeTextField, [data-theme="dark"] #changelist input[type="text"], [data-theme="dark"] #changelist-filter input, [data-theme="dark"] #toolbar input, [data-theme="dark"] .paginator input, [data-theme="dark"] .actions select, [data-theme="dark"] .aligned input, [data-theme="dark"] .aligned textarea, [data-theme="dark"] .aligned select, [data-theme="dark"] .form-row input, [data-theme="dark"] .form-row textarea, [data-theme="dark"] .form-row select, [data-theme="dark"] fieldset input, [data-theme="dark"] fieldset textarea, [data-theme="dark"] fieldset select { background: #334155 !important; border: 1px solid #475569 !important; color: #F8FAFC !important; border-radius: 4px; } [data-theme="dark"] .aligned input:focus, [data-theme="dark"] .aligned textarea:focus, [data-theme="dark"] .aligned select:focus, [data-theme="dark"] .form-row input:focus, [data-theme="dark"] .form-row textarea:focus, [data-theme="dark"] .form-row select:focus, [data-theme="dark"] fieldset input:focus, [data-theme="dark"] fieldset textarea:focus, [data-theme="dark"] fieldset select:focus { border-color: #38BDF8 !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important; outline: none !important; } /* Django admin labels and fieldsets in dark mode */ [data-theme="dark"] .aligned label, [data-theme="dark"] .form-row label, [data-theme="dark"] fieldset label, [data-theme="dark"] .module h2, [data-theme="dark"] .module caption { color: #F8FAFC !important; } [data-theme="dark"] .help, [data-theme="dark"] .help-block, [data-theme="dark"] p.help { color: #94A3B8 !important; } /* Django admin module backgrounds */ [data-theme="dark"] .module, [data-theme="dark"] fieldset { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .module h2, [data-theme="dark"] fieldset h2, [data-theme="dark"] .collapse-toggle { background: #0F172A !important; color: #F8FAFC !important; border-color: #334155 !important; } /* Django admin changelist dark mode */ [data-theme="dark"] #changelist, [data-theme="dark"] #changelist-filter, [data-theme="dark"] .results, [data-theme="dark"] #toolbar, [data-theme="dark"] .paginator, [data-theme="dark"] .actions { background: #1E293B !important; color: #F8FAFC !important; } [data-theme="dark"] #changelist-filter h2, [data-theme="dark"] #changelist-filter h3 { background: #0F172A !important; color: #F8FAFC !important; } [data-theme="dark"] #changelist-filter li a { color: #CBD5E1 !important; } [data-theme="dark"] #changelist-filter li a:hover, [data-theme="dark"] #changelist-filter li.selected a { color: #38BDF8 !important; } /* Django admin result list table dark mode */ [data-theme="dark"] #result_list th, [data-theme="dark"] #result_list thead th { background: #0F172A !important; color: #F8FAFC !important; border-color: #334155 !important; } [data-theme="dark"] #result_list td { background: transparent !important; color: #F8FAFC !important; border-color: #334155 !important; } [data-theme="dark"] #result_list a { color: #38BDF8 !important; } [data-theme="dark"] #result_list a:hover { color: #7DD3FC !important; } /* ============================================================ ROW SELECTION STYLES - .is-selected class ============================================================ */ /* Light theme selection */ html[data-theme="light"] tr.is-selected, html:not([data-theme]) tr.is-selected { background: #DBEAFE !important; } /* Dark theme selection */ html[data-theme="dark"] tr.is-selected { background: #1E3A8A !important; color: #F8FAFC !important; } html[data-theme="dark"] tr.is-selected td { color: #F8FAFC !important; } /* Blue theme selection */ html[data-theme="blue"] tr.is-selected { background: #BAE6FD !important; } /* Green theme selection */ html[data-theme="green"] tr.is-selected { background: #BBF7D0 !important; } /* Selection row styles override zebra striping */ tr.is-selected, tr.is-selected td { background: inherit !important; } /* --- Selection counter --- */ .selection-counter { background: var(--primary); color: white; border-radius: 20px; padding: 0.25rem 0.75rem; font-size: 0.82rem; font-weight: 600; display: none; animation: fadeIn 0.3s; } .selection-counter.visible { display: inline-flex; } /* --- Preview panel --- */ #device-preview-panel { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; display: none; animation: slideUp 0.3s ease-out; max-height: 600px; overflow-y: auto; box-shadow: var(--shadow-md); } #device-preview-panel.visible { display: block; } .preview-header { background: var(--bg-card-alt) !important; border-radius: 12px 12px 0 0; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color) !important; position: sticky; top: 0; z-index: 10; } .preview-header h5 { color: var(--text-primary); } .preview-body { padding: 1.5rem; } .preview-field-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.2rem; } .preview-field-value { font-size: 0.95rem; color: var(--text-primary); } /* Preview panel dark mode specifics */ [data-theme="dark"] #device-preview-panel { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .preview-main-header { border-color: #334155 !important; } [data-theme="dark"] #device-preview-panel .preview-sidebar { border-color: #334155; } [data-theme="dark"] #device-preview-panel .preview-sidebar .nav-link { color: #CBD5E1; } [data-theme="dark"] #device-preview-panel .preview-sidebar .nav-link:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] #device-preview-panel .preview-sidebar .nav-link.active { background: rgba(56,189,248,0.12); color: #38BDF8; border-left-color: #38BDF8; } /* --- DataTables paging --- */ .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; border-radius: 6px; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: white !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-color) !important; border-radius: 6px; padding: 0.35rem 0.6rem; } .dataTables_wrapper .dataTables_info { color: var(--text-muted) !important; font-size: 0.85rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; background: var(--btn-default-bg); border: 1px solid var(--btn-default-border); border-radius: 6px; margin: 0 2px; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: #334155; border-color: #475569; color: #F1F5F9 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #38BDF8 !important; border-color: #38BDF8 !important; color: #0F172A !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #94A3B8 !important; background: #1E293B; border-color: #334155; } /* --- Column search --- */ .column-search input { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-color) !important; border-radius: 4px; padding: 0.3rem 0.5rem; font-size: 0.8rem; width: 100%; } .column-search input::placeholder { color: var(--text-muted); } .column-search input:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15); } /* Dark mode search inputs */ [data-theme="dark"] .column-search input { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] .column-search input::placeholder { color: #94A3B8; } [data-theme="dark"] .dataTables_filter input { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] .dataTables_filter input::placeholder { color: #94A3B8; } /* --- Loading overlay --- */ .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--loading-overlay); display: flex; align-items: center; justify-content: center; z-index: 100; border-radius: 12px; } /* --- View toggle --- */ .view-toggle .btn-check:checked + .btn { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; } /* --- Theme switcher dropdown (legacy compat) --- */ .theme-dropdown .dropdown-menu { background: var(--dropdown-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); min-width: 180px; } .theme-dropdown .dropdown-item { color: var(--text-primary); padding: 0.5rem 1rem; font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } .theme-dropdown .dropdown-item:hover { background: var(--dropdown-hover); color: var(--text-primary); } .theme-dropdown .dropdown-item.active { background: var(--primary); color: white; } [data-theme="dark"] .theme-dropdown .dropdown-menu { background: #1E293B; border-color: #334155; } [data-theme="dark"] .theme-dropdown .dropdown-item { color: #F1F5F9; } [data-theme="dark"] .theme-dropdown .dropdown-item:hover { background: #334155; } /* --- ColVis dropdown --- */ .colvis-dropdown .dropdown-menu { background: var(--dropdown-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); max-height: 400px; overflow-y: auto; min-width: 220px; } .colvis-dropdown .dropdown-item { color: var(--text-primary); padding: 0.4rem 1rem; font-size: 0.85rem; cursor: pointer; } .colvis-dropdown .dropdown-item:hover { background: var(--dropdown-hover); } .colvis-dropdown .dropdown-item .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } [data-theme="dark"] .colvis-dropdown .dropdown-menu { background: #1E293B; border-color: #334155; } [data-theme="dark"] .colvis-dropdown .dropdown-item { color: #F1F5F9; } [data-theme="dark"] .colvis-dropdown .dropdown-item:hover { background: #334155; } /* Dark dropdown generic */ [data-theme="dark"] .dropdown-menu { background: #1E293B; border-color: #334155; } [data-theme="dark"] .dropdown-item { color: #F1F5F9; } [data-theme="dark"] .dropdown-item:hover { background: #334155; } /* --- Scrollbar styling --- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* --- Animations --- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- Responsive adjustments --- */ @media (max-width: 992px) { .main-header .header-nav-link { padding: 0.4rem 0.5rem; font-size: 0.8rem; } .main-header .brand-logo { padding: 0.4rem 0.5rem; font-size: 1rem; } } /* --- Print styles --- */ @media print { body { background: white !important; color: black !important; } .main-header, .top-navbar, .toolbar-area, .selection-counter { display: none !important; } table.dataTable tbody tr { background: white !important; } table.dataTable tbody tr:nth-child(even) { background: #f5f5f5 !important; } } /* ============================================================ ADMIN PANEL / DJANGO ADMIN STYLES ============================================================ */ /* Django admin dark mode support */ [data-theme="dark"] #container, [data-theme="dark"] .content, [data-theme="dark"] #content-main { background: #020617 !important; color: #F1F5F9 !important; } [data-theme="dark"] .module, [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] fieldset { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .module h2, [data-theme="dark"] .card-header, [data-theme="dark"] legend { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] table, [data-theme="dark"] .results table { background: #1E293B !important; } [data-theme="dark"] table th { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] table td { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] table tr:nth-child(even) td { background: #161E2E !important; } [data-theme="dark"] a { color: #38BDF8; } [data-theme="dark"] a:hover { color: #7DD3FC; } /* Admin form inputs in dark mode */ [data-theme="dark"] #changelist-filter input, [data-theme="dark"] #changelist-filter select, [data-theme="dark"] .admin-form input, [data-theme="dark"] .admin-form select, [data-theme="dark"] .admin-form textarea { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } /* Bootstrap form-control in dark mode */ [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: #334155 !important; border-color: #38BDF8 !important; color: #F1F5F9 !important; box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important; } /* Bootstrap cards in dark mode */ [data-theme="dark"] .card { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .card-header { background: #0F172A !important; border-color: #334155 !important; color: #F1F5F9 !important; } [data-theme="dark"] .card-body { background: #1E293B !important; color: #F1F5F9 !important; } /* Modal dark mode */ [data-theme="dark"] .modal-content { background: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important; } [data-theme="dark"] .modal-header { background: #0F172A !important; border-color: #334155 !important; } [data-theme="dark"] .modal-footer { border-color: #334155 !important; } [data-theme="dark"] .close, [data-theme="dark"] .btn-close { color: #F1F5F9 !important; filter: invert(1); } /* Alert/Notification dark mode */ [data-theme="dark"] .alert { border-color: #334155 !important; } [data-theme="dark"] .alert-info { background: rgba(56, 189, 248, 0.15) !important; color: #7DD3FC !important; } [data-theme="dark"] .alert-success { background: rgba(74, 222, 128, 0.15) !important; color: #86EFAC !important; } [data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.15) !important; color: #FDE047 !important; } [data-theme="dark"] .alert-danger { background: rgba(248, 113, 113, 0.15) !important; color: #FCA5A5 !important; } /* List group dark mode */ [data-theme="dark"] .list-group-item { background: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important; } [data-theme="dark"] .list-group-item:hover { background: #334155 !important; } /* Nav tabs dark mode */ [data-theme="dark"] .nav-tabs { border-color: #334155 !important; } [data-theme="dark"] .nav-tabs .nav-link { color: #CBD5E1 !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #475569 !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background: #1E293B !important; border-color: #334155 #334155 #1E293B !important; color: #38BDF8 !important; } /* Table borders in all themes */ .table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border-color) !important; } /* ============================================================ WELCOME BANNER / PULPIT HERO SECTION Per-theme backgrounds for dashboard hero section ============================================================ */ /* Light theme: subtle light blue gradient */ html[data-theme="light"] .welcome-banner, html:not([data-theme]) .welcome-banner { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important; color: #FFFFFF !important; } /* Dark theme: dark slate gradient */ html[data-theme="dark"] .welcome-banner { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important; color: #F8FAFC !important; border: 1px solid #334155; } /* Blue theme: bright blue gradient */ html[data-theme="blue"] .welcome-banner { background: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%) !important; color: #FFFFFF !important; } /* Green theme: business green gradient */ html[data-theme="green"] .welcome-banner { background: linear-gradient(135deg, #15803D 0%, #166534 100%) !important; color: #FFFFFF !important; } .welcome-banner h2, .welcome-banner p { color: inherit !important; } .welcome-banner h2 i { color: inherit !important; opacity: 0.9; } /* ============================================================ DJANGO ADMIN OLD VIEW STYLES Theme-aware styles for legacy Django admin interface ============================================================ */ /* Admin header bar */ #header { background: var(--navbar-bg) !important; color: var(--navbar-text) !important; border-bottom: 1px solid var(--navbar-border) !important; } #header h1, #header h1 a, #header #user-tools, #header #user-tools a { color: var(--navbar-text) !important; } /* Admin body background */ body.change-list, body.change-form { background: var(--bg-primary) !important; } /* Admin content area */ #container, #content, #content-main { background: transparent !important; } /* Admin module/card styling */ .module, .dashboard #content-related .module { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; box-shadow: var(--shadow-sm); } .module h2, .module caption { background: var(--table-header-bg) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color) !important; } /* Admin table styling */ #result_list, .results table { background: var(--bg-card) !important; } #result_list thead th, .results table thead th { background: var(--table-header-bg) !important; color: var(--table-header-color) !important; border-color: var(--border-color) !important; } #result_list tbody tr:nth-child(odd), .results table tbody tr:nth-child(odd) { background: var(--table-stripe-odd) !important; } #result_list tbody tr:nth-child(even), .results table tbody tr:nth-child(even) { background: var(--table-stripe-even) !important; } #result_list tbody td, .results table tbody td { color: var(--text-primary) !important; border-color: var(--border-color) !important; } #result_list tbody tr:hover, .results table tbody tr:hover { background: var(--table-hover) !important; } /* Admin links */ #result_list a, .results table a, #changelist a { color: var(--primary) !important; } /* Admin breadcrumbs */ .breadcrumbs { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-color) !important; } .breadcrumbs a { color: var(--primary) !important; } /* Admin forms */ fieldset { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; } fieldset h2 { background: var(--table-header-bg) !important; color: var(--text-primary) !important; } /* Admin sidebar/filter */ #changelist-filter { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; } #changelist-filter h2, #changelist-filter h3 { color: var(--text-primary) !important; } #changelist-filter ul li, #changelist-filter ul li a { color: var(--text-secondary) !important; } #changelist-filter ul li a:hover, #changelist-filter ul li.selected a { color: var(--primary) !important; } /* Admin toolbar */ #toolbar, #changelist #toolbar { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; padding: 8px 12px; } /* Admin submit row */ .submit-row { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; } /* Admin action checkboxes row */ .action-checkbox-column { background: var(--bg-card) !important; } /* Admin object-tools */ .object-tools li a { background: var(--primary) !important; color: #fff !important; border-radius: 6px; } .object-tools li a:hover { background: var(--primary-dark) !important; } /* Dark theme specific overrides for Django admin */ [data-theme="dark"] #header { background: #0F172A !important; } [data-theme="dark"] #header h1, [data-theme="dark"] #header h1 a, [data-theme="dark"] #header #user-tools, [data-theme="dark"] #header #user-tools a { color: #F8FAFC !important; } [data-theme="dark"] .module { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .module h2, [data-theme="dark"] .module caption { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] #result_list thead th, [data-theme="dark"] .results table thead th { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] #result_list tbody td, [data-theme="dark"] .results table tbody td { color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] fieldset { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] fieldset h2 { background: #0F172A !important; color: #F1F5F9 !important; } [data-theme="dark"] .breadcrumbs { background: #0F172A !important; color: #CBD5E1 !important; border-color: #334155 !important; } [data-theme="dark"] #changelist-filter { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] #changelist-filter h2, [data-theme="dark"] #changelist-filter h3 { color: #F1F5F9 !important; } [data-theme="dark"] #changelist-filter ul li, [data-theme="dark"] #changelist-filter ul li a { color: #CBD5E1 !important; } [data-theme="dark"] #toolbar, [data-theme="dark"] #changelist #toolbar { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .submit-row { background: #0F172A !important; border-color: #334155 !important; } /* Green theme specific overrides for main header */ html[data-theme="green"] .main-header { background: #15803D !important; } html[data-theme="green"] .main-header, html[data-theme="green"] .main-header *:not(.theme-dot):not(.header-btn-logout) { color: #FFFFFF !important; } html[data-theme="green"] .main-header .brand-logo span { color: #86EFAC !important; } html[data-theme="green"] .main-header .header-btn-logout { color: #FCA5A5 !important; } /* Green theme Django admin header */ [data-theme="green"] #header { background: #15803D !important; } [data-theme="green"] #header h1, [data-theme="green"] #header h1 a, [data-theme="green"] #header #user-tools, [data-theme="green"] #header #user-tools a { color: #FFFFFF !important; } /* ============================================================ DARK MODE - COMPREHENSIVE FIX FOR ALL WHITE ELEMENTS ============================================================ */ /* Dashboard stat cards - muszą być ciemne */ [data-theme="dark"] .stat-card, [data-theme="dark"] .card, [data-theme="dark"] .bg-white, [data-theme="dark"] [class*="bg-white"], [data-theme="dark"] .bg-light { background: #1E293B !important; background-color: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important; } /* Wszystkie kontenery i wrapery */ [data-theme="dark"] .container, [data-theme="dark"] .container-fluid, [data-theme="dark"] .row > div, [data-theme="dark"] .col, [data-theme="dark"] [class*="col-"], [data-theme="dark"] .wrapper, [data-theme="dark"] .content-wrapper, [data-theme="dark"] .table-wrapper, [data-theme="dark"] .form-wrapper, [data-theme="dark"] .panel, [data-theme="dark"] .panel-body, [data-theme="dark"] .panel-default, [data-theme="dark"] .box, [data-theme="dark"] .widget { background-color: transparent !important; } /* Specjalna klasa dla głównych sekcji */ [data-theme="dark"] .section, [data-theme="dark"] .main-content, [data-theme="dark"] main, [data-theme="dark"] #main, [data-theme="dark"] #content { background-color: #020617 !important; } /* Karty z ikonkami na dashboardzie */ [data-theme="dark"] .stat-card, [data-theme="dark"] .dashboard-card, [data-theme="dark"] .info-card, [data-theme="dark"] .summary-card { background: #1E293B !important; border: 1px solid #334155 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } /* Ikony w kartach */ [data-theme="dark"] .stat-card .icon-wrapper, [data-theme="dark"] .stat-card .stat-icon, [data-theme="dark"] .card .icon-wrapper { background: #334155 !important; } /* Wartości statystyk */ [data-theme="dark"] .stat-value, [data-theme="dark"] .stat-number, [data-theme="dark"] .stat-count, [data-theme="dark"] h2.stat-value, [data-theme="dark"] .display-4, [data-theme="dark"] .display-5 { color: #F1F5F9 !important; } /* Etykiety statystyk */ [data-theme="dark"] .stat-label, [data-theme="dark"] .stat-title, [data-theme="dark"] .card-subtitle, [data-theme="dark"] .text-muted { color: #94A3B8 !important; } /* Sekcje z tabelami */ [data-theme="dark"] .table-responsive, [data-theme="dark"] .dataTables_wrapper { background: transparent !important; } [data-theme="dark"] table.table, [data-theme="dark"] table.dataTable, [data-theme="dark"] .table { background: #1E293B !important; color: #F1F5F9 !important; } /* Nagłówki tabel */ [data-theme="dark"] table thead, [data-theme="dark"] table thead tr, [data-theme="dark"] table thead th, [data-theme="dark"] .table thead th, [data-theme="dark"] .table-dark thead th { background: #0F172A !important; background-color: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } /* Komórki tabeli */ [data-theme="dark"] table tbody td, [data-theme="dark"] .table tbody td { color: #F1F5F9 !important; border-color: #334155 !important; background: transparent !important; } /* Sekcja "Ostatnie zgłoszenia" i podobne */ [data-theme="dark"] .recent-section, [data-theme="dark"] .list-section, [data-theme="dark"] .activity-section { background: #1E293B !important; border-color: #334155 !important; } /* Nagłówki sekcji */ [data-theme="dark"] .section-header, [data-theme="dark"] .section-title, [data-theme="dark"] .card-title, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #F1F5F9 !important; } /* Formularze - WSZYSTKIE inputy ciemne */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text, [data-theme="dark"] .custom-select { background: #334155 !important; background-color: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } /* Placeholdery */ [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] .form-control::placeholder { color: #94A3B8 !important; } /* Input groups */ [data-theme="dark"] .input-group, [data-theme="dark"] .input-group-prepend, [data-theme="dark"] .input-group-append { background: transparent !important; } [data-theme="dark"] .input-group-text { background: #475569 !important; border-color: #475569 !important; color: #F1F5F9 !important; } /* Przyciski secondary/outline - ciemne */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-outline-light, [data-theme="dark"] .btn-default { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-light:hover, [data-theme="dark"] .btn-default:hover { background: #475569 !important; border-color: #64748B !important; color: #FFFFFF !important; } /* Dropdown menus */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .dropdown-content { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .dropdown-item, [data-theme="dark"] .dropdown-menu a { color: #F1F5F9 !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-menu a:hover { background: #334155 !important; } /* Charts/Wykresy backgrounds */ [data-theme="dark"] .chart-container, [data-theme="dark"] .chart-wrapper, [data-theme="dark"] [class*="chart"] { background: transparent !important; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb, [data-theme="dark"] nav[aria-label="breadcrumb"] { background: #0F172A !important; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: #CBD5E1 !important; } [data-theme="dark"] .breadcrumb-item.active { color: #94A3B8 !important; } /* Pagination */ [data-theme="dark"] .pagination .page-item .page-link { background: #334155 !important; border-color: #475569 !important; color: #F1F5F9 !important; } [data-theme="dark"] .pagination .page-item.active .page-link { background: #38BDF8 !important; border-color: #38BDF8 !important; color: #0F172A !important; } [data-theme="dark"] .pagination .page-item.disabled .page-link { background: #1E293B !important; color: #64748B !important; } /* Borders domyślne */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: #334155 !important; } /* Shadow boxes */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } /* Listy */ [data-theme="dark"] ul, [data-theme="dark"] ol, [data-theme="dark"] li { color: #F1F5F9; } /* Paragraphs and text */ [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div { color: inherit; } /* Labels */ [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .control-label { color: #CBD5E1 !important; } /* Helptext */ [data-theme="dark"] .help-block, [data-theme="dark"] .form-text, [data-theme="dark"] small.text-muted { color: #94A3B8 !important; } /* Icons */ [data-theme="dark"] i.fa, [data-theme="dark"] i.fas, [data-theme="dark"] i.far, [data-theme="dark"] i.bi, [data-theme="dark"] .icon { color: inherit; } /* ============================================================ ROW SELECTION STYLES - Per-theme selection colors ============================================================ */ /* Light theme selection */ html[data-theme="light"] tr.is-selected, html[data-theme="light"] tr.is-selected td, html:not([data-theme]) tr.is-selected, html:not([data-theme]) tr.is-selected td, [data-theme="light"] .table tbody tr.is-selected, [data-theme="light"] .table tbody tr.is-selected td { background: #DBEAFE !important; background-color: #DBEAFE !important; } /* Dark theme selection */ html[data-theme="dark"] tr.is-selected, html[data-theme="dark"] tr.is-selected td, [data-theme="dark"] .table tbody tr.is-selected, [data-theme="dark"] .table tbody tr.is-selected td { background: #1E3A8A !important; background-color: #1E3A8A !important; color: #F8FAFC !important; } /* Blue theme selection */ html[data-theme="blue"] tr.is-selected, html[data-theme="blue"] tr.is-selected td, [data-theme="blue"] .table tbody tr.is-selected, [data-theme="blue"] .table tbody tr.is-selected td { background: #BAE6FD !important; background-color: #BAE6FD !important; } /* Green theme selection */ html[data-theme="green"] tr.is-selected, html[data-theme="green"] tr.is-selected td, [data-theme="green"] .table tbody tr.is-selected, [data-theme="green"] .table tbody tr.is-selected td { background: #BBF7D0 !important; background-color: #BBF7D0 !important; } /* DataTables selection override */ table.dataTable tbody tr.selected, table.dataTable tbody tr.is-selected { background: var(--table-selected) !important; } table.dataTable tbody tr.selected td, table.dataTable tbody tr.is-selected td { background: transparent !important; } /* Django admin result_list selection */ #result_list tbody tr.is-selected, #result_list tbody tr.is-selected td { background: var(--table-selected) !important; } /* ============================================================ DARK MODE - Django Admin Form Inputs (Complete Fix) ============================================================ */ /* All input types in dark mode */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="month"], [data-theme="dark"] input[type="week"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #334155 !important; background-color: #334155 !important; border-color: #475569 !important; color: #F8FAFC !important; } /* Django admin specific input classes */ [data-theme="dark"] .vTextField, [data-theme="dark"] .vDateField, [data-theme="dark"] .vTimeField, [data-theme="dark"] .vURLField, [data-theme="dark"] .vIntegerField, [data-theme="dark"] .vBigIntegerField, [data-theme="dark"] .vDecimalField, [data-theme="dark"] .vFloatField, [data-theme="dark"] .vForeignKeyRawIdAdminField, [data-theme="dark"] .vLargeTextField, [data-theme="dark"] .vPositiveIntegerField, [data-theme="dark"] .vPositiveSmallIntegerField, [data-theme="dark"] .vSmallIntegerField { background: #334155 !important; background-color: #334155 !important; border-color: #475569 !important; color: #F8FAFC !important; } /* Readonly fields */ [data-theme="dark"] .readonly, [data-theme="dark"] .grp-readonly, [data-theme="dark"] input[readonly], [data-theme="dark"] textarea[readonly] { background: #1E293B !important; border-color: #334155 !important; color: #94A3B8 !important; } /* Django admin form row */ [data-theme="dark"] .form-row, [data-theme="dark"] .grp-row, [data-theme="dark"] .field-box { background: transparent !important; } [data-theme="dark"] .form-row label, [data-theme="dark"] .grp-row label { color: #CBD5E1 !important; } /* Django admin aligned forms */ [data-theme="dark"] .aligned label, [data-theme="dark"] .aligned p.help { color: #CBD5E1 !important; } /* Django admin inlines */ [data-theme="dark"] .inline-group, [data-theme="dark"] .tabular, [data-theme="dark"] .stacked { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .inline-group h2, [data-theme="dark"] .tabular h2, [data-theme="dark"] .stacked h2 { background: #0F172A !important; color: #F1F5F9 !important; } /* ============================================================ DJANGO ADMIN CHANGELIST - Complete Theme Support ============================================================ */ /* Changelist main container */ #changelist { background: transparent; } /* Changelist toolbar */ #changelist #toolbar { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; padding: 10px 15px; margin-bottom: 15px; } #changelist #toolbar form input[type="text"], #changelist #toolbar form input[type="search"] { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-color) !important; border-radius: 4px; padding: 6px 10px; } #changelist #toolbar form input[type="submit"] { background: var(--primary) !important; color: #fff !important; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; } /* Changelist filter sidebar */ #changelist-filter { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; padding: 10px; } #changelist-filter h2 { background: var(--table-header-bg) !important; color: var(--text-primary) !important; padding: 8px 12px; margin: -10px -10px 10px -10px; border-radius: 8px 8px 0 0; font-size: 0.9rem; font-weight: 600; } #changelist-filter h3 { color: var(--text-primary) !important; font-size: 0.85rem; font-weight: 600; margin: 10px 0 5px 0; } #changelist-filter ul { margin: 0; padding: 0; list-style: none; } #changelist-filter ul li { margin: 2px 0; } #changelist-filter ul li a { color: var(--text-secondary) !important; text-decoration: none; display: block; padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; } #changelist-filter ul li a:hover { background: var(--table-hover); } #changelist-filter ul li.selected a { background: var(--primary) !important; color: #fff !important; font-weight: 600; } /* Changelist results table */ #changelist .results { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; overflow: hidden; } #changelist table#result_list { width: 100%; margin: 0; } #changelist table#result_list thead th { background: var(--table-header-bg) !important; color: var(--table-header-color) !important; border-bottom: 2px solid var(--border-color) !important; padding: 10px 8px; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; } #changelist table#result_list tbody td { padding: 8px; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color) !important; } #changelist table#result_list tbody tr:hover { background: var(--table-hover) !important; } /* Paginator */ #changelist .paginator, .paginator { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; padding: 10px; margin-top: 15px; color: var(--text-secondary) !important; } .paginator a { color: var(--primary) !important; padding: 4px 10px; border-radius: 4px; } .paginator a:hover { background: var(--table-hover); } /* Actions dropdown */ #changelist .actions { background: var(--bg-card) !important; padding: 10px; border: 1px solid var(--border-color) !important; border-radius: 8px; margin-bottom: 15px; } #changelist .actions select { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-color) !important; border-radius: 4px; padding: 6px 10px; } #changelist .actions button, #changelist .actions input[type="submit"] { background: var(--primary) !important; color: #fff !important; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; } /* Dark theme specific changelist */ [data-theme="dark"] #changelist #toolbar { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] #changelist #toolbar form input[type="text"], [data-theme="dark"] #changelist #toolbar form input[type="search"] { background: #334155 !important; border-color: #475569 !important; color: #F8FAFC !important; } [data-theme="dark"] #changelist-filter { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] #changelist-filter h2 { background: #0F172A !important; color: #F1F5F9 !important; } [data-theme="dark"] #changelist .results { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] #changelist table#result_list thead th { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] #changelist table#result_list tbody td { color: #F1F5F9 !important; border-color: #334155 !important; } [data-theme="dark"] #changelist .paginator, [data-theme="dark"] .paginator { background: #1E293B !important; border-color: #334155 !important; color: #CBD5E1 !important; } [data-theme="dark"] #changelist .actions { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] #changelist .actions select { background: #334155 !important; border-color: #475569 !important; color: #F8FAFC !important; } /* Override any inline white backgrounds */ [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background: rgb(255"], [data-theme="dark"] [style*="background-color: rgb(255"] { background: #1E293B !important; background-color: #1E293B !important; } color: #4a148c !important; font-weight: 600 !important; } /* ============================================================ BADGE STATUS — widoczne we WSZYSTKICH motywach ============================================================ */ html[data-theme="blue"] .badge-status-ok { background: #28a745 !important; color: #fff !important; } html[data-theme="blue"] .badge-status-broken { background: #dc3545 !important; color: #fff !important; } html[data-theme="blue"] .badge-status-service { background: #ffc107 !important; color: #000 !important; } html[data-theme="blue"] .badge-status-default { background: #6c757d !important; color: #fff !important; } html[data-theme="green"] .badge-status-ok { background: #28a745 !important; color: #fff !important; } html[data-theme="green"] .badge-status-broken { background: #dc3545 !important; color: #fff !important; } html[data-theme="green"] .badge-status-service { background: #ffc107 !important; color: #000 !important; } html[data-theme="green"] .badge-status-default { background: #6c757d !important; color: #fff !important; } /* ============================================================ ADMIN MENU BAR (#hd) - Theme Support ============================================================ */ /* Dark theme - admin menu bar */ [data-theme="dark"] #hd { background-color: #2d3142 !important; color: #e0e0e0 !important; border-bottom: 1px solid #4a4e69; } [data-theme="dark"] #hd a, [data-theme="dark"] #hd .top-nav a { color: #e0e0e0 !important; } [data-theme="dark"] #hd a:hover, [data-theme="dark"] #hd .top-nav a:hover { color: #ffffff !important; } /* Light theme - admin menu bar */ [data-theme="light"] #hd { background-color: #4a7c8c !important; color: #ffffff !important; } [data-theme="light"] #hd a, [data-theme="light"] #hd .top-nav a { color: #ffffff !important; } /* Blue theme - admin menu bar */ [data-theme="blue"] #hd { background-color: #3b5bdb !important; color: #ffffff !important; border-bottom: 1px solid #364fc7; } [data-theme="blue"] #hd a, [data-theme="blue"] #hd .top-nav a { color: #ffffff !important; } [data-theme="blue"] #hd a:hover, [data-theme="blue"] #hd .top-nav a:hover { color: #ffd43b !important; } /* Green theme - admin menu bar */ [data-theme="green"] #hd { background-color: #2b8a3e !important; color: #ffffff !important; border-bottom: 1px solid #237032; } [data-theme="green"] #hd a, [data-theme="green"] #hd .top-nav a { color: #ffffff !important; } [data-theme="green"] #hd a:hover, [data-theme="green"] #hd .top-nav a:hover { color: #ffd43b !important; } /* ============================================================ Select2 Autocomplete Widgets - All Themes ============================================================ */ /* Select2 - Dark Mode */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #334155 !important; color: #F8FAFC !important; border-color: #475569 !important; } [data-theme="dark"] .select2-container--default .select2-selection__rendered { color: #F8FAFC !important; } [data-theme="dark"] .select2-container--default .select2-selection__arrow b { border-color: #F8FAFC transparent transparent transparent !important; } [data-theme="dark"] .select2-dropdown { background-color: #334155 !important; border-color: #475569 !important; } [data-theme="dark"] .select2-results { background-color: #334155 !important; } [data-theme="dark"] .select2-results__option { background-color: #334155 !important; color: #F8FAFC !important; } [data-theme="dark"] .select2-results__option--highlighted { background-color: #475569 !important; color: #F8FAFC !important; } [data-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: #38BDF8 !important; color: #020617 !important; } [data-theme="dark"] .select2-search__field { background-color: #334155 !important; color: #F8FAFC !important; border-color: #475569 !important; } /* Select2 - Light/White Mode */ [data-theme="light"] .select2-container--default .select2-selection--single, [data-theme="light"] .select2-container--default .select2-selection--multiple { background-color: #FFFFFF !important; color: #1E293B !important; border-color: #E2E8F0 !important; } [data-theme="light"] .select2-container--default .select2-selection__rendered { color: #1E293B !important; } [data-theme="light"] .select2-dropdown { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; } [data-theme="light"] .select2-results { background-color: #FFFFFF !important; } [data-theme="light"] .select2-results__option { background-color: #FFFFFF !important; color: #1E293B !important; } [data-theme="light"] .select2-results__option--highlighted { background-color: #F1F5F9 !important; color: #1E293B !important; } [data-theme="light"] .select2-results__option[aria-selected="true"] { background-color: #3B82F6 !important; color: #FFFFFF !important; } [data-theme="light"] .select2-search__field { background-color: #FFFFFF !important; color: #1E293B !important; border-color: #E2E8F0 !important; } /* Select2 - Blue Mode */ [data-theme="blue"] .select2-container--default .select2-selection--single, [data-theme="blue"] .select2-container--default .select2-selection--multiple { background-color: #FFFFFF !important; color: #0369A1 !important; border-color: #BAE6FD !important; } [data-theme="blue"] .select2-container--default .select2-selection__rendered { color: #0369A1 !important; } [data-theme="blue"] .select2-dropdown { background-color: #FFFFFF !important; border-color: #BAE6FD !important; } [data-theme="blue"] .select2-results { background-color: #FFFFFF !important; } [data-theme="blue"] .select2-results__option { background-color: #FFFFFF !important; color: #0369A1 !important; } [data-theme="blue"] .select2-results__option--highlighted { background-color: #F0F9FF !important; color: #0369A1 !important; } [data-theme="blue"] .select2-results__option[aria-selected="true"] { background-color: #0EA5E9 !important; color: #FFFFFF !important; } [data-theme="blue"] .select2-search__field { background-color: #FFFFFF !important; color: #0369A1 !important; border-color: #BAE6FD !important; } /* Select2 - Green Mode */ [data-theme="green"] .select2-container--default .select2-selection--single, [data-theme="green"] .select2-container--default .select2-selection--multiple { background-color: #FFFFFF !important; color: #15803D !important; border-color: #BBF7D0 !important; } [data-theme="green"] .select2-container--default .select2-selection__rendered { color: #15803D !important; } [data-theme="green"] .select2-dropdown { background-color: #FFFFFF !important; border-color: #BBF7D0 !important; } [data-theme="green"] .select2-results { background-color: #FFFFFF !important; } [data-theme="green"] .select2-results__option { background-color: #FFFFFF !important; color: #15803D !important; } [data-theme="green"] .select2-results__option--highlighted { background-color: #F0FDF4 !important; color: #15803D !important; } [data-theme="green"] .select2-results__option[aria-selected="true"] { background-color: #22C55E !important; color: #FFFFFF !important; } [data-theme="green"] .select2-search__field { background-color: #FFFFFF !important; color: #15803D !important; border-color: #BBF7D0 !important; } /* ============================================================ FIX 1: GREEN THEME DROPDOWN MENU - MUST BE AT END OF FILE Override wildcard rules for dropdown visibility ============================================================ */ /* Green dropdown - white background, dark green text */ html[data-theme="green"] .main-header .header-nav-dropdown, html[data-theme="green"] .main-header .dropdown-menu, html[data-theme="green"] .main-header .header-nav .dropdown-menu { background-color: #FFFFFF !important; border: 1px solid #BBF7D0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } html[data-theme="green"] .main-header .header-nav-dropdown li a, html[data-theme="green"] .main-header .dropdown-menu a, html[data-theme="green"] .main-header .dropdown-menu li a, html[data-theme="green"] .main-header .header-nav .dropdown-menu a { color: #14532D !important; background-color: #FFFFFF !important; } html[data-theme="green"] .main-header .header-nav-dropdown li a:hover, html[data-theme="green"] .main-header .dropdown-menu a:hover, html[data-theme="green"] .main-header .dropdown-menu li a:hover, html[data-theme="green"] .main-header .header-nav .dropdown-menu a:hover { background-color: #DCFCE7 !important; color: #166534 !important; } /* Blue dropdown fix (similar pattern) */ html[data-theme="blue"] .main-header .header-nav-dropdown, html[data-theme="blue"] .main-header .dropdown-menu, html[data-theme="blue"] .main-header .header-nav .dropdown-menu { background-color: #FFFFFF !important; border: 1px solid #BAE6FD !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } html[data-theme="blue"] .main-header .header-nav-dropdown li a, html[data-theme="blue"] .main-header .dropdown-menu a, html[data-theme="blue"] .main-header .dropdown-menu li a, html[data-theme="blue"] .main-header .header-nav .dropdown-menu a { color: #0C4A6E !important; background-color: #FFFFFF !important; } html[data-theme="blue"] .main-header .header-nav-dropdown li a:hover, html[data-theme="blue"] .main-header .dropdown-menu a:hover, html[data-theme="blue"] .main-header .dropdown-menu li a:hover, html[data-theme="blue"] .main-header .header-nav .dropdown-menu a:hover { background-color: #E0F2FE !important; color: #0369A1 !important; } /* ============================================================ FIX 2: ADMIN MENU BAR (#hd) DROPDOWN SUBMENU STYLES ============================================================ */ /* Dark theme - #hd dropdown submenu */ [data-theme="dark"] #hd li.active, [data-theme="dark"] #hd li:hover { background-color: #3d4256 !important; } [data-theme="dark"] #hd li ul, [data-theme="dark"] #hd .top-nav li ul { background-color: #2d3142 !important; border: 1px solid #4a4e69 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] #hd li ul li, [data-theme="dark"] #hd .top-nav li ul li { background-color: #2d3142 !important; } [data-theme="dark"] #hd li ul li a, [data-theme="dark"] #hd .top-nav li ul li a { color: #e0e0e0 !important; background-color: #2d3142 !important; } [data-theme="dark"] #hd li ul li:hover, [data-theme="dark"] #hd li ul li a:hover, [data-theme="dark"] #hd .top-nav li ul li:hover a { background-color: #3d4256 !important; color: #ffffff !important; } /* Light theme - #hd dropdown submenu */ [data-theme="light"] #hd li.active, [data-theme="light"] #hd li:hover { background-color: #3a6878 !important; } [data-theme="light"] #hd li ul, [data-theme="light"] #hd .top-nav li ul { background-color: #4a7c8c !important; border: 1px solid #3a6878 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] #hd li ul li, [data-theme="light"] #hd .top-nav li ul li { background-color: #4a7c8c !important; } [data-theme="light"] #hd li ul li a, [data-theme="light"] #hd .top-nav li ul li a { color: #ffffff !important; background-color: #4a7c8c !important; } [data-theme="light"] #hd li ul li:hover, [data-theme="light"] #hd li ul li a:hover, [data-theme="light"] #hd .top-nav li ul li:hover a { background-color: #5a8c9c !important; color: #ffffff !important; } /* Blue theme - #hd dropdown submenu */ [data-theme="blue"] #hd li.active, [data-theme="blue"] #hd li:hover { background-color: #4c6beb !important; } [data-theme="blue"] #hd li ul, [data-theme="blue"] #hd .top-nav li ul { background-color: #3b5bdb !important; border: 1px solid #364fc7 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; } [data-theme="blue"] #hd li ul li, [data-theme="blue"] #hd .top-nav li ul li { background-color: #3b5bdb !important; } [data-theme="blue"] #hd li ul li a, [data-theme="blue"] #hd .top-nav li ul li a { color: #ffffff !important; background-color: #3b5bdb !important; } [data-theme="blue"] #hd li ul li:hover, [data-theme="blue"] #hd li ul li a:hover, [data-theme="blue"] #hd .top-nav li ul li:hover a { background-color: #4c6beb !important; color: #ffd43b !important; } /* Green theme - #hd dropdown submenu */ [data-theme="green"] #hd li.active, [data-theme="green"] #hd li:hover { background-color: #359a4e !important; } [data-theme="green"] #hd li ul, [data-theme="green"] #hd .top-nav li ul { background-color: #2b8a3e !important; border: 1px solid #237032 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; } [data-theme="green"] #hd li ul li, [data-theme="green"] #hd .top-nav li ul li { background-color: #2b8a3e !important; } [data-theme="green"] #hd li ul li a, [data-theme="green"] #hd .top-nav li ul li a { color: #ffffff !important; background-color: #2b8a3e !important; } [data-theme="green"] #hd li ul li:hover, [data-theme="green"] #hd li ul li a:hover, [data-theme="green"] #hd .top-nav li ul li:hover a { background-color: #359a4e !important; color: #ffd43b !important; } /* ============================================================ FIX 3: FORM FIELDS STYLING FOR ALL THEMES (except dark - already exists) ============================================================ */ /* Light theme - form fields */ [data-theme="light"] .vTextField, [data-theme="light"] .vDateField, [data-theme="light"] .vLargeTextField, [data-theme="light"] input.vTextField, [data-theme="light"] input.vDateField, [data-theme="light"] textarea.vLargeTextField, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="date"], [data-theme="light"] input[type="datetime-local"], [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .form-control, [data-theme="light"] #content input[type="text"], [data-theme="light"] #content input[type="number"], [data-theme="light"] #content textarea, [data-theme="light"] #content select { background-color: #FFFFFF !important; color: #1E293B !important; border: 1px solid #CBD5E1 !important; } [data-theme="light"] .vTextField:focus, [data-theme="light"] .vDateField:focus, [data-theme="light"] input[type="text"]:focus, [data-theme="light"] input[type="number"]:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus, [data-theme="light"] .form-control:focus { border-color: #3B82F6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; outline: none !important; } /* Blue theme - form fields */ [data-theme="blue"] .vTextField, [data-theme="blue"] .vDateField, [data-theme="blue"] .vLargeTextField, [data-theme="blue"] input.vTextField, [data-theme="blue"] input.vDateField, [data-theme="blue"] textarea.vLargeTextField, [data-theme="blue"] input[type="text"], [data-theme="blue"] input[type="number"], [data-theme="blue"] input[type="email"], [data-theme="blue"] input[type="password"], [data-theme="blue"] input[type="date"], [data-theme="blue"] input[type="datetime-local"], [data-theme="blue"] textarea, [data-theme="blue"] select, [data-theme="blue"] .form-control, [data-theme="blue"] #content input[type="text"], [data-theme="blue"] #content input[type="number"], [data-theme="blue"] #content textarea, [data-theme="blue"] #content select { background-color: #FFFFFF !important; color: #0C4A6E !important; border: 1px solid #BAE6FD !important; } [data-theme="blue"] .vTextField:focus, [data-theme="blue"] .vDateField:focus, [data-theme="blue"] input[type="text"]:focus, [data-theme="blue"] input[type="number"]:focus, [data-theme="blue"] textarea:focus, [data-theme="blue"] select:focus, [data-theme="blue"] .form-control:focus { border-color: #0EA5E9 !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important; outline: none !important; } /* Green theme - form fields */ [data-theme="green"] .vTextField, [data-theme="green"] .vDateField, [data-theme="green"] .vLargeTextField, [data-theme="green"] input.vTextField, [data-theme="green"] input.vDateField, [data-theme="green"] textarea.vLargeTextField, [data-theme="green"] input[type="text"], [data-theme="green"] input[type="number"], [data-theme="green"] input[type="email"], [data-theme="green"] input[type="password"], [data-theme="green"] input[type="date"], [data-theme="green"] input[type="datetime-local"], [data-theme="green"] textarea, [data-theme="green"] select, [data-theme="green"] .form-control, [data-theme="green"] #content input[type="text"], [data-theme="green"] #content input[type="number"], [data-theme="green"] #content textarea, [data-theme="green"] #content select { background-color: #FFFFFF !important; color: #14532D !important; border: 1px solid #BBF7D0 !important; } [data-theme="green"] .vTextField:focus, [data-theme="green"] .vDateField:focus, [data-theme="green"] input[type="text"]:focus, [data-theme="green"] input[type="number"]:focus, [data-theme="green"] textarea:focus, [data-theme="green"] select:focus, [data-theme="green"] .form-control:focus { border-color: #22C55E !important; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important; outline: none !important; } /* Additional admin form field selectors for all themes */ [data-theme="light"] #changelist-filter input, [data-theme="light"] .aligned input, [data-theme="light"] .aligned textarea, [data-theme="light"] .aligned select { background-color: #FFFFFF !important; color: #1E293B !important; border: 1px solid #CBD5E1 !important; } [data-theme="blue"] #changelist-filter input, [data-theme="blue"] .aligned input, [data-theme="blue"] .aligned textarea, [data-theme="blue"] .aligned select { background-color: #FFFFFF !important; color: #0C4A6E !important; border: 1px solid #BAE6FD !important; } [data-theme="green"] #changelist-filter input, [data-theme="green"] .aligned input, [data-theme="green"] .aligned textarea, [data-theme="green"] .aligned select { background-color: #FFFFFF !important; color: #14532D !important; border: 1px solid #BBF7D0 !important; } /* ============================================ FIX: NEW VIEW DROPDOWN MENU TEXT VISIBILITY These rules override wildcard selectors that make dropdown text white on white background ============================================ */ /* GREEN THEME - New View Dropdown Fix */ html[data-theme="green"] .main-header .header-nav-item .header-nav-dropdown li a, html[data-theme="green"] .main-header .header-left .header-nav-item .header-nav-dropdown li a { color: rgb(20, 83, 45) !important; background-color: rgb(255, 255, 255) !important; } html[data-theme="green"] .main-header .header-nav-item .header-nav-dropdown li a:hover, html[data-theme="green"] .main-header .header-left .header-nav-item .header-nav-dropdown li a:hover { background-color: rgb(220, 252, 231) !important; color: rgb(22, 101, 52) !important; } /* BLUE THEME - New View Dropdown Fix */ html[data-theme="blue"] .main-header .header-nav-item .header-nav-dropdown li a, html[data-theme="blue"] .main-header .header-left .header-nav-item .header-nav-dropdown li a { color: rgb(12, 74, 110) !important; background-color: rgb(255, 255, 255) !important; } html[data-theme="blue"] .main-header .header-nav-item .header-nav-dropdown li a:hover, html[data-theme="blue"] .main-header .header-left .header-nav-item .header-nav-dropdown li a:hover { background-color: rgb(224, 242, 254) !important; color: rgb(3, 105, 161) !important; } [data-theme="minecraft"] tr.is-selected td, [data-theme="minecraft"] .doc-table tbody tr.is-selected td { background: #5B8731 !important; color: #FFFFFF !important; border-color: #1A1A0A !important; } [data-theme="minecraft"] tr.is-selected td:first-child { border-left: 4px solid #A8C878 !important; } [data-theme="ubuntu"] tr.is-selected td, [data-theme="ubuntu"] .doc-table tbody tr.is-selected td { background: #FDBA74 !important; color: #3D3935 !important; border-color: #E95420 !important; } [data-theme="ubuntu"] tr.is-selected td:first-child { border-left: 3px solid #E95420 !important; } /* ============================================================ ROW-CHECKED (checkbox zaznaczenie wiersza) — wszystkie motywy ============================================================ */ tr.row-checked td { background: var(--table-selected, #DBEAFE) !important; } tr.row-checked td:first-child { border-left: 3px solid var(--primary, #0EA5E9) !important; padding-left: calc(.85rem - 3px) !important; } /* Checkboxy — kolor akcentu według motywu */ [data-theme="light"] .form-check-input:checked, [data-theme="blue"] .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; } [data-theme="green"] .form-check-input:checked { background-color: #22C55E !important; border-color: #22C55E !important; } /* ── MINECRAFT: checkboxy + is-selected + row-checked ── */ [data-theme="minecraft"] .form-check-input { border: 3px solid #1A1A0A !important; border-radius: 0 !important; background-color: #C9A96E !important; width: 16px !important; height: 16px !important; accent-color: #5B8731; } [data-theme="minecraft"] .form-check-input:checked { background-color: #5B8731 !important; border-color: #1A1A0A !important; accent-color: #5B8731; } [data-theme="minecraft"] tr.row-checked td { background: #5B8731 !important; color: #FFFFFF !important; border-color: #1A1A0A !important; } [data-theme="minecraft"] tr.row-checked td:first-child { border-left: 4px solid #A8C878 !important; } /* Override any zebra-striping for is-selected in minecraft */ html[data-theme="minecraft"] tr.is-selected, html[data-theme="minecraft"] tr.is-selected td, [data-theme="minecraft"] table tbody tr.is-selected, [data-theme="minecraft"] table tbody tr.is-selected td, html[data-theme="minecraft"] #devices-table tbody tr.is-selected td { background: #5B8731 !important; color: #FFFFFF !important; border-color: #1A1A0A !important; } html[data-theme="minecraft"] tr.is-selected td:first-child, html[data-theme="minecraft"] #devices-table tbody tr.is-selected td:first-child { border-left: 4px solid #A8C878 !important; padding-left: calc(.85rem - 4px) !important; } /* ── UBUNTU: checkboxy + is-selected + row-checked ── */ [data-theme="ubuntu"] .form-check-input { border-color: #CFC9C4 !important; background-color: #FFFFFF !important; accent-color: #E95420; } [data-theme="ubuntu"] .form-check-input:checked { background-color: #E95420 !important; border-color: #E95420 !important; accent-color: #E95420; } [data-theme="ubuntu"] tr.row-checked td { background: #FDBA74 !important; color: #3D3935 !important; border-color: #E95420 !important; } [data-theme="ubuntu"] tr.row-checked td:first-child { border-left: 3px solid #E95420 !important; } html[data-theme="ubuntu"] tr.is-selected, html[data-theme="ubuntu"] tr.is-selected td, [data-theme="ubuntu"] table tbody tr.is-selected, [data-theme="ubuntu"] table tbody tr.is-selected td, html[data-theme="ubuntu"] #devices-table tbody tr.is-selected td { background: #FDBA74 !important; color: #3D3935 !important; border-color: #E95420 !important; } html[data-theme="ubuntu"] tr.is-selected td:first-child, html[data-theme="ubuntu"] #devices-table tbody tr.is-selected td:first-child { border-left: 3px solid #E95420 !important; padding-left: calc(.85rem - 3px) !important; } /* ── DARK: checkboxy ── */ [data-theme="dark"] tr.row-checked td { background: #1E3A8A !important; color: #E2E8F0 !important; border-color: #2563EB !important; } [data-theme="dark"] tr.row-checked td:first-child { border-left: 3px solid #38BDF8 !important; } /* ============================================================ CHECKBOX FIX — dark/minecraft/ubuntu (Bootstrap override) Bootstrap używa SVG data-URL jako background-image dla checked state — musimy nadpisać z !important i SVG ============================================================ */ /* Dark — niebieski checkbox */ [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] .form-check-input[type="checkbox"] { background-color: #334155 !important; border-color: #64748B !important; width: 1.1em !important; height: 1.1em !important; cursor: pointer; } [data-theme="dark"] input[type="checkbox"]:checked, [data-theme="dark"] .form-check-input[type="checkbox"]:checked { background-color: #38BDF8 !important; border-color: #38BDF8 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; } [data-theme="dark"] input[type="checkbox"]:focus, [data-theme="dark"] .form-check-input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(56,189,248,0.3) !important; border-color: #38BDF8 !important; } /* Minecraft — zielony checkbox kwadratowy */ [data-theme="minecraft"] input[type="checkbox"], [data-theme="minecraft"] .form-check-input[type="checkbox"] { background-color: #C9A96E !important; border: 3px solid #1A1A0A !important; border-radius: 0 !important; width: 16px !important; height: 16px !important; cursor: pointer; } [data-theme="minecraft"] input[type="checkbox"]:checked, [data-theme="minecraft"] .form-check-input[type="checkbox"]:checked { background-color: #5B8731 !important; border-color: #1A1A0A !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='square' stroke-linejoin='miter' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; } /* Ubuntu — pomarańczowy checkbox */ [data-theme="ubuntu"] input[type="checkbox"], [data-theme="ubuntu"] .form-check-input[type="checkbox"] { background-color: #FFFFFF !important; border-color: #9D9288 !important; width: 1.1em !important; height: 1.1em !important; cursor: pointer; } [data-theme="ubuntu"] input[type="checkbox"]:checked, [data-theme="ubuntu"] .form-check-input[type="checkbox"]:checked { background-color: #E95420 !important; border-color: #E95420 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; } [data-theme="ubuntu"] input[type="checkbox"]:focus, [data-theme="ubuntu"] .form-check-input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(233,84,32,0.25) !important; border-color: #E95420 !important; } /* ============================================================ ROW COLORS: is-selected (1 klik) vs row-checked (checkbox) Różne kolory żeby odróżnić! ============================================================ DARK: is-selected = granatowy #1E3A8A (ciemnoniebieski) row-checked = turkusowy #164E63 (ciemnoczeal) + lewa kreska #38BDF8 MINECRAFT: is-selected = ciemnozielony #5B8731 (trawa) row-checked = brązowy #6B4A1E (drewno) + lewa kreska #C9A96E UBUNTU: is-selected = pomarańcz jasny #FDBA74 row-checked = oberżyna jasny #D4B0C4 + lewa kreska #E95420 ============================================================ */ /* DARK row-checked */ html[data-theme="dark"] tr.row-checked td, [data-theme="dark"] table tbody tr.row-checked td { background: #164E63 !important; color: #E2E8F0 !important; } html[data-theme="dark"] tr.row-checked td:first-child, [data-theme="dark"] table tbody tr.row-checked td:first-child { border-left: 3px solid #38BDF8 !important; } /* DARK is-selected stays #1E3A8A — already set above, ensure no conflict */ html[data-theme="dark"] tr.is-selected td, [data-theme="dark"] table tbody tr.is-selected td { background: #1E3A8A !important; color: #F1F5F9 !important; } html[data-theme="dark"] tr.is-selected td:first-child { border-left: 3px solid #38BDF8 !important; } /* MINECRAFT row-checked = drewno/brąz */ html[data-theme="minecraft"] tr.row-checked td, [data-theme="minecraft"] table tbody tr.row-checked td { background: #6B4A1E !important; color: #F5DEB3 !important; } html[data-theme="minecraft"] tr.row-checked td:first-child, [data-theme="minecraft"] table tbody tr.row-checked td:first-child { border-left: 4px solid #C9A96E !important; } /* UBUNTU row-checked = oberżyna jasny */ html[data-theme="ubuntu"] tr.row-checked td, [data-theme="ubuntu"] table tbody tr.row-checked td { background: #D4B0C4 !important; color: #3D3935 !important; } html[data-theme="ubuntu"] tr.row-checked td:first-child, [data-theme="ubuntu"] table tbody tr.row-checked td:first-child { border-left: 3px solid #300A24 !important; } /* ============================================================ UBUNTU — toolbar list views + guziki + karty ============================================================ */ /* Toolbar (pasek nad tabelą) */ [data-theme="ubuntu"] .toolbar { background: #300A24 !important; border-bottom: 2px solid #E95420 !important; } [data-theme="ubuntu"] .toolbar * { color: #F4EDE8 !important; } [data-theme="ubuntu"] .toolbar .header-btn, [data-theme="ubuntu"] .toolbar .btn, [data-theme="ubuntu"] .toolbar button { background: rgba(255,255,255,0.08) !important; border-color: rgba(233,84,32,0.5) !important; color: #F4EDE8 !important; } [data-theme="ubuntu"] .toolbar .header-btn:hover, [data-theme="ubuntu"] .toolbar .btn:hover, [data-theme="ubuntu"] .toolbar button:hover { background: #E95420 !important; border-color: #E95420 !important; color: #fff !important; } [data-theme="ubuntu"] .toolbar .toolbar-sep { background: rgba(233,84,32,0.45) !important; } [data-theme="ubuntu"] .toolbar span, [data-theme="ubuntu"] .toolbar label { color: #F4EDE8 !important; } /* content-wrap tło */ [data-theme="ubuntu"] .content-wrap { background: #FEF3E8 !important; } /* Guziki poza toolbar — ciepłe tło */ [data-theme="ubuntu"] .header-btn:not(.header-btn-logout) { background: #FFF0E6 !important; border-color: #E9A87C !important; color: #7A2A10 !important; } [data-theme="ubuntu"] .header-btn:not(.header-btn-logout):hover { background: #E95420 !important; border-color: #E95420 !important; color: #fff !important; } /* Main card */ [data-theme="ubuntu"] .main-card { background: #FFF8F2 !important; border-color: #E9C9B0 !important; } /* Stat cards */ [data-theme="ubuntu"] .stat-card { background: #FFF8F2 !important; border: 1px solid #E9C9B0 !important; border-top: 3px solid #E95420 !important; } /* Filter/search bar */ [data-theme="ubuntu"] .filter-bar, [data-theme="ubuntu"] .filter-row, [data-theme="ubuntu"] [class*="filter"] { background: #FDEBD4 !important; border-color: #E9C9B0 !important; } /* DataTables filter input */ [data-theme="ubuntu"] .dataTables_filter input, [data-theme="ubuntu"] .dataTables_length select { background: #FFF8F2 !important; border-color: #E9C9B0 !important; color: #3D3935 !important; } /* Pagination buttons */ [data-theme="ubuntu"] .dataTables_paginate .paginate_button { background: #FFF0E6 !important; border-color: #E9C9B0 !important; color: #7A2A10 !important; } [data-theme="ubuntu"] .dataTables_paginate .paginate_button.current, [data-theme="ubuntu"] .dataTables_paginate .paginate_button:hover { background: #E95420 !important; border-color: #E95420 !important; color: #fff !important; } /* ============================================ FIX: HIDE DJANGO ADMIN NAV-SIDEBAR Ensures consistent layout with custom Bootstrap top menu ============================================ */ #nav-sidebar { display: none !important; } /* Restore full width for main content when sidebar is hidden */ .main > #nav-sidebar + .content { max-width: 100% !important; } /* ============================================================ MINECRAFT THEME Pikselowy, zero zaokrągleń, twarde ramki, grunt i drewno ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); [data-theme="minecraft"] { --navbar-bg: #3D2B1F; --navbar-border: #1A1A0A; --navbar-text: #FFFFFF; --bg-dark: #7CB35C; --bg-primary: #7CB35C; --bg-secondary: #6AA34A; --bg-card: #C9A96E; --bg-card-alt: #B8904A; --table-stripe-odd: #C9A96E; --table-stripe-even: #D4B47A; --btn-default-bg: #8B8B8B; --btn-default-border: #1A1A0A; --btn-default-color: #FFFFFF; --input-bg: #C9A96E; --input-border: #1A1A0A; --input-color: #1A1A0A; --text-primary: #1A1A0A; --text-secondary: #2D2D10; --text-muted: #5A4A2A; --primary: #5B8731; --primary-dark: #3D5C20; --primary-rgb: 91, 135, 49; --accent: #5B8731; --accent-bg: rgba(91,135,49,0.2); --success: #5B8731; --success-rgb: 91,135,49; --warning: #FFB300; --warning-rgb: 255,179,0; --danger: #B22222; --danger-rgb: 178,34,34; --info: #4682B4; --info-rgb: 70,130,180; --border-color: #1A1A0A; --shadow-sm: 4px 4px 0 #1A1A0A; --shadow-md: 4px 4px 0 #1A1A0A; --shadow-lg: 6px 6px 0 #1A1A0A; --table-hover: rgba(91,135,49,0.15); --table-selected: #5B8731; --table-active: rgba(91,135,49,0.2); --table-header-bg: #3D2B1F; --table-header-color: #F5DEB3; --badge-ok-bg: rgba(91,135,49,0.3); --badge-ok-color: #1A3A0A; --badge-broken-bg: rgba(178,34,34,0.25); --badge-broken-color: #8B0000; --badge-service-bg: rgba(255,179,0,0.25); --badge-service-color: #7A5000; --badge-default-bg: rgba(100,100,80,0.2); --badge-default-color: #2D2D10; --loading-overlay: rgba(124,179,92,0.85); --scrollbar-track: #B8904A; --scrollbar-thumb: #3D2B1F; --row-warranty: rgba(70,130,180,0.1); --row-service-contract: rgba(91,135,49,0.1); --brand-highlight: #5B8731; --toolbar-bg: #C9A96E; --dropdown-bg: #C9A96E; --dropdown-hover: #B8904A; /* Pixel font + zero radius */ --mc-font: 'Press Start 2P', monospace; --border-radius-override: 0px; } /* Minecraft: pełna pikselizacja */ [data-theme="minecraft"] body, [data-theme="minecraft"] .main-header, [data-theme="minecraft"] .sticky-header { font-family: var(--mc-font) !important; font-size: 10px !important; image-rendering: pixelated; } [data-theme="minecraft"] *, [data-theme="minecraft"] *::before, [data-theme="minecraft"] *::after { border-radius: 0 !important; } [data-theme="minecraft"] .main-header { background: var(--navbar-bg) !important; border-bottom: 3px solid #1A1A0A !important; } [data-theme="minecraft"] .brand-logo { font-family: var(--mc-font) !important; font-size: 11px !important; color: #5B8731 !important; text-shadow: 2px 2px 0 #1A1A0A !important; letter-spacing: 1px; } [data-theme="minecraft"] .brand-logo span { color: #A8C878 !important; } [data-theme="minecraft"] .header-nav-link { font-family: var(--mc-font) !important; font-size: 7px !important; color: #F5DEB3 !important; } [data-theme="minecraft"] .header-nav-link:hover, [data-theme="minecraft"] .header-nav-link.active { background: #5B8731 !important; color: #fff !important; box-shadow: none !important; } [data-theme="minecraft"] .header-btn, [data-theme="minecraft"] .theme-btn { font-family: var(--mc-font) !important; font-size: 9px !important; background: #8B8B8B !important; border: 2px solid #1A1A0A !important; box-shadow: 3px 3px 0 #1A1A0A !important; color: #fff !important; border-radius: 0 !important; } [data-theme="minecraft"] .header-btn:hover, [data-theme="minecraft"] .theme-btn:hover { background: #5B8731 !important; transform: translate(1px,1px); box-shadow: 2px 2px 0 #1A1A0A !important; } [data-theme="minecraft"] .main-card, [data-theme="minecraft"] .stat-card, [data-theme="minecraft"] .ticket-modal-content, [data-theme="minecraft"] .doc-modal-content, [data-theme="minecraft"] .theme-panel-box { border: 3px solid #1A1A0A !important; box-shadow: 4px 4px 0 #1A1A0A !important; border-radius: 0 !important; } [data-theme="minecraft"] .ticket-modal-header, [data-theme="minecraft"] .doc-modal-header { background: #3D2B1F !important; color: #F5DEB3 !important; border-bottom: 3px solid #1A1A0A !important; } [data-theme="minecraft"] .toolbar { background: #B8904A !important; border-bottom: 3px solid #1A1A0A !important; } [data-theme="minecraft"] .btn { border-radius: 0 !important; border: 2px solid #1A1A0A !important; box-shadow: 3px 3px 0 #1A1A0A !important; font-family: var(--mc-font) !important; font-size: 9px !important; } [data-theme="minecraft"] .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1A1A0A !important; } [data-theme="minecraft"] .modal-content { border: 4px solid #1A1A0A !important; border-radius: 0 !important; box-shadow: 8px 8px 0 #1A1A0A !important; } [data-theme="minecraft"] input, [data-theme="minecraft"] select, [data-theme="minecraft"] textarea { border: 2px solid #1A1A0A !important; border-radius: 0 !important; font-family: var(--mc-font) !important; font-size: 8px !important; background: #C9A96E !important; } [data-theme="minecraft"] table thead th { font-family: var(--mc-font) !important; font-size: 7px !important; background: #3D2B1F !important; color: #F5DEB3 !important; border: 2px solid #1A1A0A !important; } [data-theme="minecraft"] table tbody td { border: 1px solid #1A1A0A !important; font-size: 9px !important; } [data-theme="minecraft"] .info-label { font-family: var(--mc-font) !important; font-size: 6px !important; } [data-theme="minecraft"] .info-value { font-size: 8px !important; } /* ============================================================ UBUNTU THEME (Yaru / Aubergine) Charakterystyczny pomarańcz, ciemna oberżyna, Cantarell ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); [data-theme="ubuntu"] { --navbar-bg: #300A24; --navbar-border: #1A0514; --navbar-text: #FFFFFF; --bg-dark: #FEF3E8; --bg-primary: #FEF3E8; --bg-secondary: #FDEBD4; --bg-card: #FFF8F2; --bg-card-alt: #FDEBD4; --table-stripe-odd: #FFF8F2; --table-stripe-even: #FEF3E8; --btn-default-bg: #FFFFFF; --btn-default-border: #CFC9C4; --btn-default-color: #3D3935; --input-bg: #FFFFFF; --input-border: #CFC9C4; --input-color: #3D3935; --text-primary: #3D3935; --text-secondary: #5D5753; --text-muted: #7D7773; --primary: #E95420; --primary-dark: #C7411A; --primary-rgb: 233,84,32; --accent: #E95420; --accent-bg: rgba(233,84,32,0.08); --success: #0E8420; --success-rgb: 14,132,32; --warning: #F99B11; --warning-rgb: 249,155,17; --danger: #C7162B; --danger-rgb: 199,22,43; --info: #0073E5; --info-rgb: 0,115,229; --border-color: #CFC9C4; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 2px 8px rgba(0,0,0,0.12); --shadow-lg: 0 4px 16px rgba(0,0,0,0.15); --table-hover: rgba(233,84,32,0.05); --table-selected: #FDBA74; --table-active: rgba(233,84,32,0.08); --table-header-bg: #300A24; --table-header-color: #FFFFFF; --badge-ok-bg: rgba(14,132,32,0.12); --badge-ok-color: #0A5E18; --badge-broken-bg: rgba(199,22,43,0.12); --badge-broken-color: #A0001A; --badge-service-bg: rgba(249,155,17,0.15); --badge-service-color: #8A5A00; --badge-default-bg: rgba(100,100,90,0.1); --badge-default-color: #5D5753; --loading-overlay: rgba(254,243,232,0.85); --scrollbar-track: #FDEBD4; --scrollbar-thumb: #E9A87C; --row-warranty: rgba(0,115,229,0.06); --row-service-contract: rgba(14,132,32,0.04); --brand-highlight: #E95420; --toolbar-bg: #300A24; --dropdown-bg: #FFF8F2; --dropdown-hover: #FDEBD4; } /* Ubuntu: Cantarell/Ubuntu font + charakterystyczne akcenty */ [data-theme="ubuntu"] body { font-family: 'Ubuntu', 'Cantarell', system-ui, sans-serif !important; } [data-theme="ubuntu"] .main-header, [data-theme="ubuntu"] .sticky-header { font-family: 'Ubuntu', 'Cantarell', system-ui, sans-serif !important; } [data-theme="ubuntu"] .main-header { background: var(--navbar-bg) !important; border-bottom: 2px solid #E95420 !important; } [data-theme="ubuntu"] .brand-logo { color: #FFFFFF !important; font-weight: 700 !important; letter-spacing: .5px; } [data-theme="ubuntu"] .brand-logo span { color: #E95420 !important; } [data-theme="ubuntu"] .header-nav-link { color: #E0D8D8 !important; } [data-theme="ubuntu"] .header-nav-link:hover, [data-theme="ubuntu"] .header-nav-link.active { background: #E95420 !important; color: #FFFFFF !important; } [data-theme="ubuntu"] .header-btn { border-radius: 4px !important; font-family: 'Ubuntu', sans-serif !important; } [data-theme="ubuntu"] .header-btn:hover { background: rgba(233,84,32,0.1) !important; color: #E95420 !important; border-color: #E95420 !important; } [data-theme="ubuntu"] .theme-btn:hover { background: rgba(233,84,32,0.12) !important; color: #E95420 !important; border-color: #E95420 !important; } [data-theme="ubuntu"] .toolbar { background: #300A24 !important; border-bottom: 2px solid #E95420 !important; } [data-theme="ubuntu"] .toolbar .toolbar-sep { background: rgba(233,84,32,0.4) !important; } [data-theme="ubuntu"] .toolbar .header-btn, [data-theme="ubuntu"] .toolbar .btn { color: #F4F0EB !important; border-color: rgba(255,255,255,0.2) !important; background: rgba(255,255,255,0.07) !important; } [data-theme="ubuntu"] .toolbar .header-btn:hover, [data-theme="ubuntu"] .toolbar .btn:hover { background: #E95420 !important; border-color: #E95420 !important; color: #fff !important; } [data-theme="ubuntu"] table thead th { background: #300A24 !important; color: #FFFFFF !important; font-weight: 500 !important; border-bottom: 2px solid #E95420 !important; } [data-theme="ubuntu"] .stat-card { border-top: 3px solid #E95420 !important; } [data-theme="ubuntu"] .ticket-modal-header, [data-theme="ubuntu"] .doc-modal-header { background: #300A24 !important; color: #FFFFFF !important; } [data-theme="ubuntu"] .ticket-modal-header .text-primary, [data-theme="ubuntu"] .doc-modal-header .text-primary { color: #E95420 !important; }