/* ============================================ CARTA ERP — Multi-Theme Architecture ============================================ 3 teme: Dark Glass Blue (DEFAULT) / Light / Sage Mid Green Switching: Persistence: localStorage 'carta_theme' Boot script u index.html primjenjuje temu prije first paint. ============================================ */ /* ============================================ LAYER 1 — THEME TOKENS (--t-*) Svaka tema definira ove varijable. Komponente referenciraju --t-* preko Layer 2 component varijabli ispod. ============================================ */ [data-theme="dark"], :root { /* Background palette */ --t-bg-page: #000; --t-bg-radial-1: rgba(0, 55, 170, 0.18); --t-bg-radial-2: rgba(0, 25, 110, 0.14); --t-bg-radial-3: rgba(0, 12, 48, 0.40); --t-bg-deep: rgba(0, 5, 18, 0.82); --t-bg-card: rgba(12, 40, 100, 0.11); --t-bg-card-hover: rgba(12, 40, 100, 0.18); --t-bg-input: rgba(8, 22, 55, 0.55); --t-bg-input-readonly: rgba(0, 5, 18, 0.55); --t-bg-modal: rgba(8, 22, 55, 0.96); --t-bg-modal-overlay: rgba(0, 5, 18, 0.75); --t-bg-row-hover: rgba(70, 130, 220, 0.06); --t-bg-thead: rgba(70, 130, 220, 0.08); --t-sidebar-bg: rgba(0, 5, 18, 0.82); --t-sidebar-hover: rgba(70, 130, 220, 0.07); --t-topheader-bg: rgba(0, 6, 22, 0.82); /* Brand */ --t-primary: #6aacee; --t-primary-bright: #82bdff; --t-primary-mid: #4a80bb; --t-primary-deep: #3266a8; /* Text */ --t-text-hi: #ddeeff; --t-text-mid: rgba(160, 200, 240, 0.65); --t-text-lo: rgba(90, 140, 200, 0.42); /* Status */ --t-success: #7ecfb0; --t-success-bg: rgba(126, 207, 176, 0.10); --t-warning: #e9b566; --t-warning-bg: rgba(233, 181, 102, 0.10); --t-danger: #b07e8a; --t-danger-bg: rgba(176, 126, 138, 0.12); --t-info: #6aacee; --t-info-bg: rgba(106, 172, 238, 0.10); /* Glass */ --t-glass-bg: rgba(12, 40, 100, 0.11); --t-glass-border: rgba(70, 130, 220, 0.16); --t-glass-border-strong: rgba(70, 130, 220, 0.28); --t-glass-blur: blur(22px) saturate(1.3); /* Lines */ --t-border: rgba(70, 130, 220, 0.16); --t-grid: rgba(70, 130, 220, 0.06); --t-tick: rgba(90, 140, 200, 0.40); /* Shadows & glow */ --t-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); --t-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55); --t-glow-primary: 0 0 14px rgba(106, 172, 238, 0.28); /* Remap (inline-style overrideovi iz view fragmenata) */ --t-remap-warning-bg: rgba(233, 181, 102, 0.06); --t-remap-info-bg: rgba(106, 172, 238, 0.06); --t-remap-success-bg: rgba(126, 207, 176, 0.06); --t-remap-danger-bg: rgba(176, 126, 138, 0.06); --t-remap-grey-bg: rgba(70, 130, 220, 0.05); --t-remap-text: #ddeeff; /* Gradient slots (card-header banneri itd.) */ --t-gradient-info: linear-gradient(135deg, rgba(106, 172, 238, 0.18) 0%, rgba(70, 130, 220, 0.12) 100%); --t-gradient-warning: linear-gradient(135deg, rgba(233, 181, 102, 0.18) 0%, rgba(180, 100, 60, 0.12) 100%); --t-gradient-success: linear-gradient(135deg, rgba(126, 207, 176, 0.18) 0%, rgba(80, 160, 120, 0.12) 100%); --t-gradient-danger: linear-gradient(135deg, rgba(176, 126, 138, 0.18) 0%, rgba(140, 80, 90, 0.12) 100%); --t-gradient-purple: linear-gradient(135deg, rgba(150, 70, 175, 0.45) 0%, rgba(180, 100, 200, 0.35) 100%); /* PVND specials (zadržava semantic žuto/zeleno u svim temama) */ --t-pvnd-row-wh-bg: #2a2210; --t-pvnd-row-wh-hover: #5a4520; --t-pvnd-row-nli-bg: #112820; --t-pvnd-row-nli-hover: #2a4a38; /* Logo color filter (Carta PNG je zelen, ovaj filter ga preliva u theme primary) */ --t-logo-filter: brightness(0) saturate(100%) invert(63%) sepia(82%) saturate(382%) hue-rotate(184deg) brightness(102%) contrast(91%); /* Postava color tokens (raspored-nli/wh/tisak) — semantic identity 6 boja */ --t-postava-1: rgba(106, 172, 238, 0.35); /* plava (P1, T1) */ --t-postava-2: rgba(233, 130, 60, 0.35); /* narandžasta (P2, T2) */ --t-postava-3: rgba(126, 207, 176, 0.35); /* zelena (P3, T3) */ --t-postava-4: rgba(219, 123, 160, 0.35); /* roza (P4) */ --t-postava-5: rgba(180, 100, 200, 0.35); /* ljubičasta (P5) */ --t-postava-6: rgba(233, 181, 102, 0.35); /* amber (P6) */ --t-postava-text: #fff; /* Native form controls (scrollbar, calendar picker itd.) */ --t-color-scheme: dark; } [data-theme="light"] { /* Background palette */ --t-bg-page: #f5f7fa; --t-bg-radial-1: transparent; --t-bg-radial-2: transparent; --t-bg-radial-3: transparent; --t-bg-deep: #ffffff; --t-bg-card: #ffffff; --t-bg-card-hover: #f8f9fa; --t-bg-input: #ffffff; --t-bg-input-readonly: #f5f5f5; --t-bg-modal: #ffffff; --t-bg-modal-overlay: rgba(0, 0, 0, 0.40); --t-bg-row-hover: rgba(25, 118, 210, 0.06); --t-bg-thead: #f5f5f5; --t-sidebar-bg: #ffffff; --t-sidebar-hover: #f0f4f8; --t-topheader-bg: #ffffff; /* Brand */ --t-primary: #1976d2; --t-primary-bright: #2196f3; --t-primary-mid: #1565c0; --t-primary-deep: #0d47a1; /* Text */ --t-text-hi: #1a1a1a; --t-text-mid: #555555; --t-text-lo: #888888; /* Status */ --t-success: #2e7d32; --t-success-bg: rgba(46, 125, 50, 0.08); --t-warning: #f57c00; --t-warning-bg: rgba(245, 124, 0, 0.08); --t-danger: #c62828; --t-danger-bg: rgba(198, 40, 40, 0.08); --t-info: #1976d2; --t-info-bg: rgba(25, 118, 210, 0.08); /* Glass (degraded — light tema nema glass blur, samo soft cards) */ --t-glass-bg: #ffffff; --t-glass-border: #e0e0e0; --t-glass-border-strong: #bdbdbd; --t-glass-blur: blur(0); /* Lines */ --t-border: #e0e0e0; --t-grid: #eeeeee; --t-tick: #999999; /* Shadows */ --t-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --t-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15); --t-glow-primary: 0 0 0 3px rgba(25, 118, 210, 0.15); /* Remap (zadržava originalne pastel boje za light bg) */ --t-remap-warning-bg: #fff8e1; --t-remap-info-bg: #e3f2fd; --t-remap-success-bg: #e8f5e9; --t-remap-danger-bg: #ffebee; --t-remap-grey-bg: #f5f5f5; --t-remap-text: #1a1a1a; /* Gradient slots */ --t-gradient-info: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); --t-gradient-warning: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); --t-gradient-success: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); --t-gradient-danger: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); --t-gradient-purple: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); /* PVND specials — pastel žuto/zeleno kao original */ --t-pvnd-row-wh-bg: #fffde7; --t-pvnd-row-wh-hover: #fff9c4; --t-pvnd-row-nli-bg: #e8f5e9; --t-pvnd-row-nli-hover: #c8e6c9; /* Light primary je tamnija plava — logo filter prilagođen */ --t-logo-filter: brightness(0) saturate(100%) invert(35%) sepia(99%) saturate(1050%) hue-rotate(195deg) brightness(95%) contrast(95%); /* Postava — pastel originale za light temu */ --t-postava-1: #e3f2fd; --t-postava-2: #fff3e0; --t-postava-3: #e8f5e9; --t-postava-4: #fce4ec; --t-postava-5: #f3e5f5; --t-postava-6: #fff8e1; --t-postava-text: #1a1a1a; --t-color-scheme: light; } [data-theme="sage"] { /* Background palette */ --t-bg-page: #4a5550; --t-bg-radial-1: rgba(155, 184, 155, 0.10); --t-bg-radial-2: rgba(80, 110, 90, 0.10); --t-bg-radial-3: rgba(40, 60, 50, 0.20); --t-bg-deep: rgba(40, 50, 45, 0.85); --t-bg-card: rgba(60, 75, 65, 0.45); --t-bg-card-hover: rgba(70, 90, 75, 0.55); --t-bg-input: rgba(50, 65, 55, 0.65); --t-bg-input-readonly: rgba(35, 45, 40, 0.75); --t-bg-modal: rgba(50, 65, 55, 0.96); --t-bg-modal-overlay: rgba(20, 30, 25, 0.75); --t-bg-row-hover: rgba(155, 184, 155, 0.08); --t-bg-thead: rgba(155, 184, 155, 0.12); --t-sidebar-bg: rgba(40, 50, 45, 0.85); --t-sidebar-hover: rgba(155, 184, 155, 0.08); --t-topheader-bg: rgba(40, 50, 45, 0.85); /* Brand */ --t-primary: #9bb89b; --t-primary-bright: #b8d0b8; --t-primary-mid: #7a9a7a; --t-primary-deep: #5a7a5a; /* Text */ --t-text-hi: #f0ece0; --t-text-mid: #c5d0c0; --t-text-lo: #8a958c; /* Status (muted/earthy) */ --t-success: #a5c994; --t-success-bg: rgba(165, 201, 148, 0.12); --t-warning: #d4b870; --t-warning-bg: rgba(212, 184, 112, 0.12); --t-danger: #c98a8a; --t-danger-bg: rgba(201, 138, 138, 0.14); --t-info: #9bb89b; --t-info-bg: rgba(155, 184, 155, 0.12); /* Glass */ --t-glass-bg: rgba(60, 75, 65, 0.40); --t-glass-border: rgba(155, 184, 155, 0.20); --t-glass-border-strong: rgba(155, 184, 155, 0.35); --t-glass-blur: blur(20px) saturate(1.2); /* Lines */ --t-border: rgba(155, 184, 155, 0.20); --t-grid: rgba(155, 184, 155, 0.10); --t-tick: rgba(155, 184, 155, 0.50); /* Shadows */ --t-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); --t-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50); --t-glow-primary: 0 0 14px rgba(155, 184, 155, 0.30); /* Remap */ --t-remap-warning-bg: rgba(212, 184, 112, 0.10); --t-remap-info-bg: rgba(155, 184, 155, 0.10); --t-remap-success-bg: rgba(165, 201, 148, 0.10); --t-remap-danger-bg: rgba(201, 138, 138, 0.12); --t-remap-grey-bg: rgba(155, 184, 155, 0.06); --t-remap-text: #f0ece0; /* Gradient slots */ --t-gradient-info: linear-gradient(135deg, rgba(155, 184, 155, 0.20) 0%, rgba(120, 150, 120, 0.12) 100%); --t-gradient-warning: linear-gradient(135deg, rgba(212, 184, 112, 0.20) 0%, rgba(170, 140, 80, 0.12) 100%); --t-gradient-success: linear-gradient(135deg, rgba(165, 201, 148, 0.20) 0%, rgba(120, 160, 100, 0.12) 100%); --t-gradient-danger: linear-gradient(135deg, rgba(201, 138, 138, 0.20) 0%, rgba(160, 100, 100, 0.12) 100%); --t-gradient-purple: linear-gradient(135deg, rgba(170, 130, 180, 0.40) 0%, rgba(140, 100, 160, 0.30) 100%); /* PVND specials (sage varijante žuto/zeleno) */ --t-pvnd-row-wh-bg: #3d3a25; --t-pvnd-row-wh-hover: #5d5430; --t-pvnd-row-nli-bg: #2d3d33; --t-pvnd-row-nli-hover: #3d5a45; /* Sage tema — logo zadržava prirodni zeleni ton (nema filter, samo drop-shadow) */ --t-logo-filter: brightness(0) saturate(100%) invert(78%) sepia(11%) saturate(680%) hue-rotate(70deg) brightness(95%) contrast(85%); /* Postava — sage muted varijante */ --t-postava-1: rgba(155, 184, 155, 0.30); --t-postava-2: rgba(212, 184, 112, 0.30); --t-postava-3: rgba(165, 201, 148, 0.30); --t-postava-4: rgba(201, 138, 138, 0.25); --t-postava-5: rgba(170, 130, 180, 0.30); --t-postava-6: rgba(212, 184, 112, 0.30); --t-postava-text: #f0ece0; --t-color-scheme: dark; } /* ============================================ LAYER 2 — COMPONENT VARS (existing names → theme tokens) Postojeća pravila u styles.css koja koriste --primary, --bg-card, --text-hi itd. NE mijenjaju se. Ovi aliasi sad referenciraju --t-* tokene per-theme. ============================================ */ :root { /* Brand aliases */ --blue: var(--t-primary); --blue-bright: var(--t-primary-bright); --blue-mid: var(--t-primary-mid); --blue-deep: var(--t-primary-deep); --blue-dim: rgba(106, 172, 238, 0.50); --primary: var(--t-primary); --primary-light: var(--t-primary-bright); --primary-dark: var(--t-primary-mid); --accent: var(--t-primary); /* Status */ --success: var(--t-success); --success-bg: var(--t-success-bg); --warning: var(--t-warning); --warning-bg: var(--t-warning-bg); --danger: var(--t-danger); --danger-bg: var(--t-danger-bg); --info: var(--t-info); --info-bg: var(--t-info-bg); /* Backgrounds */ --bg-body: var(--t-bg-page); --bg-deep: var(--t-bg-deep); --bg-card: var(--t-bg-card); --bg-card-hover: var(--t-bg-card-hover); --bg-input: var(--t-bg-input); --bg-input-readonly: var(--t-bg-input-readonly); --bg-table-row-hover: var(--t-bg-row-hover); --bg-thead: var(--t-bg-thead); --bg-modal: var(--t-bg-modal); --bg-modal-overlay: var(--t-bg-modal-overlay); --sidebar-bg: var(--t-sidebar-bg); --sidebar-hover: var(--t-sidebar-hover); --topheader-bg: var(--t-topheader-bg); /* Glass */ --glass-bg: var(--t-glass-bg); --glass-border: var(--t-glass-border); --glass-border-strong: var(--t-glass-border-strong); --glass-blur: var(--t-glass-blur); /* Text */ --text-primary: var(--t-text-hi); --text-secondary: var(--t-text-mid); --text-muted: var(--t-text-lo); --text-light: var(--t-text-lo); --text-hi: var(--t-text-hi); --text-mid: var(--t-text-mid); --text-lo: var(--t-text-lo); /* Lines */ --border: var(--t-border); --grid: var(--t-grid); --tick: var(--t-tick); /* Shadows */ --shadow: var(--t-shadow); --shadow-lg: var(--t-shadow-lg); --glow-blue: var(--t-glow-primary); /* Remap (za inline-style overrideove) */ --remap-warning-bg: var(--t-remap-warning-bg); --remap-info-bg: var(--t-remap-info-bg); --remap-success-bg: var(--t-remap-success-bg); --remap-danger-bg: var(--t-remap-danger-bg); --remap-grey-bg: var(--t-remap-grey-bg); --remap-text: var(--t-remap-text); /* Gradients (card banneri) */ --gradient-info: var(--t-gradient-info); --gradient-warning: var(--t-gradient-warning); --gradient-success: var(--t-gradient-success); --gradient-danger: var(--t-gradient-danger); --gradient-purple: var(--t-gradient-purple); /* PVND row tinte */ --pvnd-row-wh-bg: var(--t-pvnd-row-wh-bg); --pvnd-row-wh-hover: var(--t-pvnd-row-wh-hover); --pvnd-row-nli-bg: var(--t-pvnd-row-nli-bg); --pvnd-row-nli-hover: var(--t-pvnd-row-nli-hover); /* Postava color tokens (raspored-nli/wh/tisak) */ --postava-1: var(--t-postava-1); --postava-2: var(--t-postava-2); --postava-3: var(--t-postava-3); --postava-4: var(--t-postava-4); --postava-5: var(--t-postava-5); --postava-6: var(--t-postava-6); --postava-text: var(--t-postava-text); /* Layout (theme-invariant) */ --radius: 14px; --radius-sm: 8px; --radius-xs: 6px; --top-header-h: 56px; --sidebar-width: 56px; /* mini collapsed (samo ikone) */ --sidebar-width-expanded: 220px; /* hover expand širina */ --transition: all 0.22s ease; /* Native form controls (scrollbar, date picker, autofill) */ color-scheme: var(--t-color-scheme); } /* === RESET & BASE === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-body); color: var(--text-primary); line-height: 1.5; min-height: 100vh; /* overflow-x na razini .main-content (ne body) — sidebar/header ostaju fiksni */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.30s ease, color 0.30s ease; } /* Radial atmosphere (cijeli viewport pozadina, theme-aware) */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 1100px 700px at 8% 10%, var(--t-bg-radial-1) 0%, transparent 65%), radial-gradient(ellipse 700px 600px at 92% 80%, var(--t-bg-radial-2) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 50% 50%, var(--t-bg-radial-3) 0%, transparent 70%); transition: background 0.30s ease; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-bright); } /* === LAYOUT === */ .app-container { position: relative; z-index: 1; display: grid; grid-template-areas: "header header" "sidebar main"; grid-template-rows: var(--top-header-h) 1fr; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } /* === TOP HEADER === */ .top-header { grid-area: header; position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; background: var(--topheader-bg); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .top-header-left { display: flex; align-items: center; gap: 14px; min-width: 220px; /* drži logo + naslov vidljive bez obzira na sidebar collapse */ } .top-header-logo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-hi); } /* Carta logotip — PNG je zelen. Filter chain pretvara bilo koju boju → #6aacee (plava). Generirano kroz https://codepen.io/sosuke/pen/Pjoqqp pattern. Prvo brightness(0) otkrcava postojeću boju u crno, onda invert+sepia+saturate gradi novu boju. */ .top-header-logo .carta-logo-img { height: 28px; width: auto; display: block; filter: var(--t-logo-filter) drop-shadow(0 0 6px rgba(106, 172, 238, 0.30)); } .top-header-title { display: flex; flex-direction: column; line-height: 1.1; } .top-header-title strong { font-size: 14px; color: var(--text-hi); letter-spacing: 0.4px; } .top-header-title span { font-size: 10px; color: var(--text-lo); letter-spacing: 0.6px; text-transform: uppercase; } /* Top breadcrumb / view title */ .top-header-center { flex: 1; text-align: center; font-size: 13px; color: var(--text-mid); letter-spacing: 0.4px; } .top-header-right { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(12, 40, 100, 0.16); color: var(--text-mid); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); position: relative; } .icon-btn:hover { color: var(--blue); border-color: var(--glass-border-strong); background: rgba(70, 130, 220, 0.10); } .user-avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #0e2e6a, #4a8ccc); color: #cce4ff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(106, 172, 238, 0.35); box-shadow: var(--glow-blue); cursor: pointer; } /* === SIDEBAR (collapsible mini-mode) === Default: 56px (samo ikone). Hover NA SIDEBARU: expand na 220px. Glavni content NE pomiče se (sidebar je grid-area cell s fiksnom shirinom); expanded sidebar overlapa sadržaj kroz absolute positioning. */ .sidebar { grid-area: sidebar; position: fixed; top: var(--top-header-h); left: 0; height: calc(100vh - var(--top-header-h)); width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: flex; flex-direction: column; overflow: hidden; z-index: 40; transition: width 0.22s ease, box-shadow 0.22s ease; } .sidebar:hover, .sidebar.sidebar-pinned { width: var(--sidebar-width-expanded); box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45); overflow-y: auto; overflow-x: hidden; } .sidebar-header { display: none; /* logo je sad u top header-u */ } .sidebar-menu { flex: 1; padding: 12px 0; overflow-y: auto; overflow-x: hidden; } .nav-separator { font-size: 9px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-lo); padding: 14px 16px 6px; font-weight: 600; white-space: nowrap; overflow: hidden; /* Sakrij section labele kad je sidebar collapsed */ opacity: 0; transition: opacity 0.18s ease; height: 0; padding-top: 0; padding-bottom: 0; } .sidebar:hover .nav-separator, .sidebar.sidebar-pinned .nav-separator { opacity: 1; height: auto; padding: 14px 16px 6px; } .nav-item { display: flex; align-items: center; gap: 14px; padding: 10px 18px; color: var(--text-mid); text-decoration: none; font-size: 12.5px; border-left: 2px solid transparent; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; white-space: nowrap; overflow: hidden; position: relative; } /* Tekst labele se sakrije kad je sidebar collapsed */ .nav-item .nav-text { opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } .sidebar:hover .nav-item .nav-text, .sidebar.sidebar-pinned .nav-item .nav-text { opacity: 1; pointer-events: auto; } .nav-item:hover { color: var(--text-hi); background: var(--sidebar-hover); } .nav-item.active { color: var(--blue); background: rgba(70, 130, 220, 0.09); border-left-color: var(--blue); font-weight: 600; } .nav-icon { width: 16px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; } .nav-item:hover .nav-icon { opacity: 0.9; } .nav-item.active .nav-icon { opacity: 1; filter: drop-shadow(0 0 4px rgba(106, 172, 238, 0.55)); } /* SVG icons (mask-image) inside nav already inherit currentColor */ .nav-icon.svg-icon { width: 14px; height: 14px; } .sidebar-footer { padding: 10px 12px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.25); flex-shrink: 0; overflow: hidden; } .user-info { flex: 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } .sidebar:hover .user-info, .sidebar.sidebar-pinned .user-info { opacity: 1; pointer-events: auto; } .user-name { font-weight: 600; font-size: 11.5px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 10px; color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-logout, .btn-password, .btn-notif { width: 30px; height: 30px; background: rgba(12, 40, 100, 0.20); border: 1px solid var(--glass-border); color: var(--text-mid); font-size: 13px; cursor: pointer; border-radius: 7px; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; } .btn-logout:hover { color: var(--danger); border-color: rgba(176, 126, 138, 0.4); } .btn-password:hover, .btn-notif:hover { color: var(--blue); border-color: var(--glass-border-strong); } /* === MAIN === */ .main-content { grid-area: main; padding: 18px 22px; min-height: calc(100vh - var(--top-header-h)); position: relative; overflow-x: auto; /* horizontalni scrollbar kad je content širi od viewporta */ min-width: 0; /* CSS grid hack — bez ovoga 1fr cell se proširuje na content i scroll ne radi */ } #app-content { max-width: 100%; margin: 0 auto; } /* === TYPOGRAPHY === */ h1, h2, h3, h4, h5, h6 { color: var(--text-hi); font-weight: 700; } h1 { font-size: 1.55em; margin-bottom: 18px; letter-spacing: -0.3px; } h2 { font-size: 1.3em; margin-bottom: 14px; } h3 { font-size: 1.1em; margin-bottom: 12px; } /* === GLASS CARDS === */ .card, .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); position: relative; overflow: hidden; } .card { padding: 16px 18px; margin-bottom: 14px; } /* Subtle highlight stroke at top + inner sheen — matches reference */ .card::after, .glass::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 190, 255, 0.35), transparent); pointer-events: none; } .card::before, .glass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(100, 170, 255, 0.04) 0%, transparent 55%); pointer-events: none; border-radius: inherit; } .card-header { font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-mid); font-weight: 600; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--grid); display: flex; align-items: center; justify-content: flex-start; gap: 10px; } /* Akcijski wrapper desno (npr. "Svi nalozi →" gumb) ide na desno */ .card-header .card-header-actions, .card-header > .btn:last-child:nth-child(n+2), .card-header > a:last-child:nth-child(n+2) { margin-left: auto; } .card-body { position: relative; z-index: 1; } .card-header-actions { display: flex; gap: 8px; } /* === STATUS CARDS (KPI) === */ .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } .status-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 14px 16px; position: relative; overflow: hidden; transition: var(--transition); text-align: left; cursor: pointer; } .status-card::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 190, 255, 0.35), transparent); pointer-events: none; } .status-card::before { content: ''; position: absolute; top: -28px; right: -28px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--blue), transparent 70%); opacity: 0.07; pointer-events: none; } .status-card:hover { transform: translateY(-2px); border-color: var(--glass-border-strong); background: var(--bg-card-hover); } .status-card-icon { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-lo); margin-bottom: 8px; } .status-card-value { font-size: 1.65em; font-weight: 700; color: var(--text-hi); line-height: 1; letter-spacing: -0.3px; } .status-card-label { font-size: 11px; color: var(--text-lo); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.6px; } .status-card.success .status-card-value { color: var(--success); } .status-card.warning .status-card-value { color: var(--warning); } .status-card.danger .status-card-value { color: var(--danger); } .status-card.info .status-card-value { color: var(--blue); } /* === TABLES === */ .table-container { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--grid); background: rgba(0, 5, 18, 0.30); } table { width: 100%; border-collapse: collapse; background: transparent; color: var(--text-mid); } table th { background: rgba(70, 130, 220, 0.08); color: var(--text-lo); padding: 10px 12px; text-align: left; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; } table td { padding: 10px 12px; border-bottom: 1px solid var(--grid); font-size: 12.5px; color: var(--text-mid); } table tr:hover td { background: var(--bg-table-row-hover); color: var(--text-hi); } table tr:last-child td { border-bottom: none; } /* === FORMS === */ .form-group { margin-bottom: 14px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-mid); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .form-control { width: 100%; padding: 9px 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-hi); background: var(--bg-input); transition: var(--transition); font-family: inherit; } .form-control::placeholder { color: var(--text-lo); } .form-control:focus { outline: none; border-color: var(--blue); background: rgba(8, 22, 55, 0.85); box-shadow: 0 0 0 3px rgba(106, 172, 238, 0.15); } .form-control:disabled { background: rgba(0, 5, 18, 0.40); color: var(--text-lo); cursor: not-allowed; opacity: 0.7; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .form-row .form-group { margin-bottom: 0; } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aacee' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; } select.form-control option { background: #07142e; color: var(--text-hi); } textarea.form-control { resize: vertical; min-height: 90px; font-family: inherit; } /* Date pickers */ .date-picker-group, .date-range-group { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; } .date-picker-group .form-group, .date-range-group .form-group { margin-bottom: 0; min-width: 150px; } /* === BUTTONS === */ .btn { padding: 8px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; background: var(--glass-bg); color: var(--text-hi); font-family: inherit; letter-spacing: 0.2px; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, rgba(106, 172, 238, 0.20) 0%, rgba(70, 130, 220, 0.30) 100%); border-color: rgba(106, 172, 238, 0.4); color: var(--blue-bright); } .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, rgba(106, 172, 238, 0.32) 0%, rgba(70, 130, 220, 0.45) 100%); border-color: var(--blue); box-shadow: 0 0 14px rgba(106, 172, 238, 0.30); color: #fff; } .btn-success { color: var(--success); border-color: rgba(126, 207, 176, 0.30); background: rgba(126, 207, 176, 0.08); } .btn-success:hover:not(:disabled) { background: rgba(126, 207, 176, 0.18); border-color: var(--success); } .btn-warning { color: var(--warning); border-color: rgba(233, 181, 102, 0.30); background: rgba(233, 181, 102, 0.08); } .btn-warning:hover:not(:disabled) { background: rgba(233, 181, 102, 0.18); border-color: var(--warning); } .btn-danger { color: var(--danger); border-color: rgba(176, 126, 138, 0.35); background: rgba(176, 126, 138, 0.10); } .btn-danger:hover:not(:disabled) { background: rgba(176, 126, 138, 0.20); border-color: var(--danger); } .btn-secondary { color: var(--text-mid); } .btn-secondary:hover:not(:disabled) { color: var(--text-hi); background: rgba(70, 130, 220, 0.10); } .btn-info { color: var(--blue); border-color: var(--glass-border-strong); } .btn-outline { background: transparent; border: 1px solid var(--blue); color: var(--blue); } .btn-outline:hover:not(:disabled) { background: rgba(106, 172, 238, 0.12); color: var(--blue-bright); } .btn-sm { padding: 5px 11px; font-size: 11px; } .btn-lg { padding: 12px 24px; font-size: 14px; } .btn-block { width: 100%; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } /* === BADGES === */ .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; border: 1px solid transparent; } .badge-success { color: var(--success); background: var(--success-bg); border-color: rgba(126, 207, 176, 0.25); } .badge-warning { color: var(--warning); background: var(--warning-bg); border-color: rgba(233, 181, 102, 0.25); } .badge-danger { color: var(--danger); background: var(--danger-bg); border-color: rgba(176, 126, 138, 0.30); } .badge-info { color: var(--blue); background: var(--info-bg); border-color: rgba(106, 172, 238, 0.25); } .badge-primary { color: var(--blue); background: var(--info-bg); border-color: rgba(106, 172, 238, 0.30); } .badge-secondary{ color: var(--text-mid); background: rgba(70, 130, 220, 0.08); border-color: var(--glass-border); } /* === TABS === */ .tab-navigation { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; } .tab-btn { padding: 10px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-lo); transition: var(--transition); margin-bottom: -1px; font-family: inherit; letter-spacing: 0.3px; } .tab-btn:hover { color: var(--text-mid); background: rgba(70, 130, 220, 0.05); } .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); } .tab-content { display: none; } .tab-content.active { display: block; } /* === MODALS === */ .modal { position: fixed; inset: 0; background: rgba(0, 5, 18, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 20px; } /* Modal-content kao FLEX kolona — header sticky top, body scrolla, actions sticky bottom */ .modal-content { background: rgba(8, 22, 55, 0.96); border: 1px solid var(--glass-border-strong); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 30, 90, 0.6); position: relative; display: flex; flex-direction: column; overflow: hidden; /* radius clipping; scroll je u body-u */ } .modal-content::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 190, 255, 0.45), transparent); } .modal-header { padding: 14px 20px; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: rgba(70, 130, 220, 0.05); } .modal-header h2, .modal-header h3 { font-size: 1em; color: var(--text-hi); margin: 0; font-weight: 700; letter-spacing: 0.3px; } .modal-close { font-size: 1.6em; cursor: pointer; color: var(--text-lo); line-height: 1; background: none; border: none; padding: 0 4px; transition: var(--transition); } .modal-close:hover { color: var(--danger); } .modal-body { padding: 20px; flex: 1 1 auto; overflow-y: auto; overflow-x: auto; min-height: 0; /* allows flex child to shrink */ } .modal-actions, .modal-footer { padding: 12px 20px; border-top: 1px solid var(--glass-border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: rgba(0, 5, 18, 0.55); } .modal-lg .modal-content { max-width: 900px; } .modal-sm .modal-content { max-width: 400px; } /* === TOAST === */ .toast-container { position: fixed; top: calc(var(--top-header-h) + 12px); right: 18px; z-index: 10000; } .toast { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 8px; box-shadow: var(--shadow-lg); animation: slideIn 0.28s ease; max-width: 360px; display: flex; align-items: center; gap: 10px; font-size: 13px; border: 1px solid; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .toast-icon { font-size: 1.1em; } .toast-text { flex: 1; } .toast-success { background: rgba(126, 207, 176, 0.15); color: var(--success); border-color: rgba(126, 207, 176, 0.40); } .toast-error { background: rgba(176, 126, 138, 0.18); color: var(--danger); border-color: rgba(176, 126, 138, 0.45); } .toast-warning { background: rgba(233, 181, 102, 0.15); color: var(--warning); border-color: rgba(233, 181, 102, 0.40); } .toast-info { background: rgba(106, 172, 238, 0.15); color: var(--blue); border-color: rgba(106, 172, 238, 0.40); } .toast.fade-out { animation: fadeOut 0.28s ease forwards; } @keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* === LOADING === */ .loading-overlay { position: fixed; inset: 0; background: rgba(0, 5, 18, 0.70); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 9999; } .loading-content { background: rgba(8, 22, 55, 0.96); border: 1px solid var(--glass-border-strong); padding: 32px 40px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow-lg); color: var(--text-hi); } .spinner { border: 3px solid rgba(70, 130, 220, 0.15); border-top: 3px solid var(--blue); border-radius: 50%; width: 44px; height: 44px; animation: spin 0.9s linear infinite; margin: 0 auto 16px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* === LOGIN === */ .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 1; } .login-box { background: var(--glass-bg); border: 1px solid var(--glass-border-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 44px 36px; border-radius: var(--radius); box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 30, 90, 0.5); width: 100%; max-width: 420px; text-align: center; position: relative; overflow: hidden; } .login-box::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 190, 255, 0.5), transparent); } .login-logo { width: 90px; height: 90px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: rgba(70, 130, 220, 0.10); border: 1px solid var(--glass-border-strong); box-shadow: var(--glow-blue); } .login-logo img { max-width: 70px; max-height: 70px; filter: var(--t-logo-filter) drop-shadow(0 0 8px rgba(106, 172, 238, 0.4)); } .login-title { font-size: 1.7em; color: var(--text-hi); margin-bottom: 6px; letter-spacing: -0.3px; } .login-subtitle { color: var(--text-lo); margin-bottom: 24px; font-size: 13px; } .pin-input-container { display: flex; gap: 10px; justify-content: center; margin: 24px 0; } .pin-input { width: 52px; height: 62px; text-align: center; font-size: 26px; font-weight: 700; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-hi); transition: var(--transition); } .pin-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(106, 172, 238, 0.20); } /* === SEARCH BOX === */ .search-box { position: relative; margin-bottom: 16px; } .search-box input { padding-left: 42px; } .search-box::before { content: ''; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background-color: var(--text-lo); -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* === EMPTY STATE === */ .empty-state { text-align: center; padding: 50px 20px; color: var(--text-lo); } .empty-state-icon { font-size: 3.2em; margin-bottom: 16px; opacity: 0.4; } .empty-state-text { font-size: 1em; margin-bottom: 16px; } /* === ACTION BTN (table icons) === */ .action-btn { padding: 5px 8px; font-size: 0.95em; background: transparent; border: 1px solid transparent; cursor: pointer; border-radius: 4px; transition: var(--transition); color: var(--text-mid); } .action-btn:hover { background: rgba(70, 130, 220, 0.10); border-color: var(--glass-border); color: var(--text-hi); } .action-btn.edit:hover { color: var(--warning); } .action-btn.delete:hover { color: var(--danger); } .action-btn.view:hover { color: var(--blue); } /* === KPI HELPER (mini change indicators) === */ .kpi-change { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; margin-top: 5px; } .kpi-change.up { color: var(--success); } .kpi-change.dn { color: var(--danger); } .cbadge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .cbadge.up { color: var(--success); background: rgba(126, 207, 176, 0.10); border: 1px solid rgba(126, 207, 176, 0.25); } .cbadge.dn { color: var(--danger); background: rgba(176, 126, 138, 0.10); border: 1px solid rgba(176, 126, 138, 0.30); } /* === SCROLLBARS === */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(0, 5, 18, 0.30); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: rgba(106, 172, 238, 0.30); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(106, 172, 238, 0.55); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-width: thin; scrollbar-color: rgba(106, 172, 238, 0.30) rgba(0, 5, 18, 0.30); } /* === NOTIFICATIONS PANEL (override original light styling) === */ #notifPanel { background: rgba(8, 22, 55, 0.96) !important; border: 1px solid var(--glass-border-strong) !important; color: var(--text-hi); backdrop-filter: blur(20px); } #notifPanel > div:first-child { background: rgba(70, 130, 220, 0.08) !important; border-bottom: 1px solid var(--glass-border) !important; color: var(--text-hi); } .notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--grid); cursor: pointer; transition: background 0.15s; } .notif-item:hover { background: var(--bg-table-row-hover); } .notif-item:last-child { border-bottom: none; } .notif-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(70, 130, 220, 0.15); display: flex; align-items: center; justify-content: center; font-size: 15px; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-weight: 600; font-size: 12.5px; color: var(--text-hi); margin-bottom: 2px; } .notif-message { font-size: 11.5px; color: var(--text-mid); margin-bottom: 4px; overflow-wrap: break-word; } .notif-meta { font-size: 10.5px; color: var(--text-lo); } /* === MOBILE HEADER === */ .mobile-header { display: none; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--topheader-bg); color: var(--text-hi); border-bottom: 1px solid var(--glass-border); } .menu-toggle { background: none; border: none; color: var(--text-hi); font-size: 1.3em; cursor: pointer; padding: 4px 8px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { :root { --sidebar-width: 180px; } .nav-item { font-size: 12px; padding: 8px 14px; } } @media (max-width: 768px) { :root { --sidebar-width: 0; --top-header-h: 48px; } body { font-size: 12px; } .app-container { grid-template-areas: "header" "main"; grid-template-columns: 1fr; grid-template-rows: var(--top-header-h) 1fr; } .top-header { display: none; } .mobile-header { display: flex; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 240px; transform: translateX(-100%); transition: transform 0.28s ease; z-index: 9000; } .sidebar.open { transform: translateX(0); box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5); } .main-content { padding: 8px; } .card { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; } .card-header { padding-bottom: 6px; margin-bottom: 8px; font-size: 10px; } .status-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; } .status-card { padding: 8px 10px; border-radius: 10px; } .status-card-value { font-size: 1.3em; } .status-card-label { font-size: 9px; } .btn { padding: 6px 10px; font-size: 11px; } .btn-sm { padding: 4px 8px; font-size: 10px; } .btn-lg { padding: 9px 14px; font-size: 12px; } table th { padding: 6px 6px; font-size: 9px; } table td { padding: 6px 6px; font-size: 11px; } .form-row { grid-template-columns: 1fr; gap: 8px; } .form-group { margin-bottom: 8px; } .form-group label { font-size: 10px; } .form-control { padding: 7px 10px; font-size: 12px; } .tab-navigation { gap: 2px; margin-bottom: 8px; overflow-x: auto; flex-wrap: nowrap; } .tab-btn { padding: 6px 10px; font-size: 10.5px; white-space: nowrap; flex-shrink: 0; } .modal-content { margin: 4px; max-height: calc(100vh - 8px); border-radius: 10px; } .modal-header { padding: 10px 12px; } .modal-body { padding: 10px 12px; max-height: calc(100vh - 130px); } .modal-actions, .modal-footer { padding: 8px 12px; gap: 6px; } .badge { padding: 2px 7px; font-size: 9.5px; } .pin-input { width: 42px; height: 50px; font-size: 18px; } h1 { font-size: 1.2em; } h2 { font-size: 1.1em; } h3 { font-size: 1em; } #notifPanel { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px; } } @media (max-width: 480px) { body { font-size: 11px; } .main-content { padding: 6px; } .status-card-value { font-size: 1.15em; } .status-card-label { font-size: 8.5px; } .btn { padding: 5px 9px; font-size: 10.5px; } table th, table td { padding: 5px 5px; font-size: 10px; } .card-header { font-size: 9.5px; } } /* ============================================ RASPOREDI (NLI / WH / TISAK) — module-shared theme-aware classes Sva 3 modula koriste iste class-imena. Boje postava (.p1-.p6, .t1-.t3) su theme-aware preko --postava-* tokena. ============================================ */ /* Tab strip i tabovi (raspored-wh / raspored-tisak Pregled/Edit tabovi) */ .raspored-tabs { display: flex; gap: 4px; margin-bottom: 0; border-bottom: 1px solid var(--glass-border); } .raspored-tab { padding: 10px 22px; background: var(--bg-card) !important; border: 1px solid var(--glass-border) !important; border-bottom: none !important; color: var(--text-mid) !important; cursor: pointer; font-weight: 600; border-radius: 8px 8px 0 0; font-family: inherit; font-size: 14px; } .raspored-tab:hover { background: var(--bg-card-hover) !important; color: var(--text-hi) !important; } .raspored-tab.active { background: var(--gradient-info) !important; color: var(--blue-bright) !important; border-color: var(--blue) !important; } .raspored-tab.disabled { opacity: 0.5; cursor: not-allowed; } /* Kontrole banner (date pickers + akcije) */ .raspored-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 18px; background: var(--gradient-info) !important; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-sm); margin-bottom: 16px; color: var(--text-hi); } .raspored-controls .form-group { margin-bottom: 0; } .raspored-controls label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-mid) !important; font-size: 0.85em; } .raspored-controls input[type="date"], .raspored-controls select, .raspored-controls input[type="text"] { background: var(--bg-input) !important; color: var(--text-hi) !important; border-color: var(--glass-border) !important; padding: 9px 12px; border-radius: 6px; } /* Glavna tablica rasporeda */ .raspored-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-card) !important; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: none !important; color: var(--text-hi); } .raspored-table th { background: var(--bg-thead) !important; color: var(--text-hi) !important; padding: 12px 8px; text-align: center; font-weight: 700; border: 1px solid var(--glass-border); text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.4px; } .raspored-table td { padding: 8px; text-align: center; border: 1px solid var(--grid); color: var(--text-hi); vertical-align: top; } /* Smjena cell */ .smjena-cell { min-width: 140px; padding: 6px !important; } /* Postava color BG cells (.bg-p1..p6 za NLI/WH, .bg-t1..t3 za Tisak) */ .smjena-cell.bg-p1, .smjena-cell.bg-t1 { background: var(--postava-1) !important; border-left: 3px solid var(--postava-1) !important; } .smjena-cell.bg-p2, .smjena-cell.bg-t2 { background: var(--postava-2) !important; border-left: 3px solid var(--postava-2) !important; } .smjena-cell.bg-p3, .smjena-cell.bg-t3 { background: var(--postava-3) !important; border-left: 3px solid var(--postava-3) !important; } .smjena-cell.bg-p4 { background: var(--postava-4) !important; border-left: 3px solid var(--postava-4) !important; } .smjena-cell.bg-p5 { background: var(--postava-5) !important; border-left: 3px solid var(--postava-5) !important; } .smjena-cell.bg-p6 { background: var(--postava-6) !important; border-left: 3px solid var(--postava-6) !important; } .smjena-cell.bg-p1, .smjena-cell.bg-p2, .smjena-cell.bg-p3, .smjena-cell.bg-p4, .smjena-cell.bg-p5, .smjena-cell.bg-p6, .smjena-cell.bg-t1, .smjena-cell.bg-t2, .smjena-cell.bg-t3 { color: var(--postava-text) !important; } /* Postava badge pillovi (P1, P2, ... T1, T2, T3) */ .postava-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 11px; margin-bottom: 4px; color: var(--postava-text) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); } .postava-badge.p1, .postava-badge.t1 { background: var(--postava-1) !important; } .postava-badge.p2, .postava-badge.t2 { background: var(--postava-2) !important; } .postava-badge.p3, .postava-badge.t3 { background: var(--postava-3) !important; } .postava-badge.p4 { background: var(--postava-4) !important; } .postava-badge.p5 { background: var(--postava-5) !important; } .postava-badge.p6 { background: var(--postava-6) !important; } /* Direktni .p1..p6 / .t1..t3 (kad nisu kao postava-badge — npr. inline span za color) */ .p1, .t1 { background: var(--postava-1); } .p2, .t2 { background: var(--postava-2); } .p3, .t3 { background: var(--postava-3); } .p4 { background: var(--postava-4); } .p5 { background: var(--postava-5); } .p6 { background: var(--postava-6); } /* Djelatnik lista u smjena cell */ .djelatnik-lista { font-size: 11px; color: var(--text-hi) !important; line-height: 1.4; text-align: left; margin-top: 4px; } .djelatnik-lista .bottomer { color: var(--blue-bright); } .djelatnik-lista .tuber { color: var(--success); } .djelatnik-lista .tiskar { color: #d180e0; font-weight: 500; } /* Special row tinte: subota (žuti), nedjelja (crveni), today (plavi info), slobodni (gray) */ .subota-row { background: var(--remap-warning-bg) !important; } .subota-row td { color: var(--text-hi) !important; } .nedjelja-row { background: var(--remap-danger-bg) !important; } .nedjelja-row td { color: var(--text-mid) !important; } .today-row { background: var(--remap-info-bg) !important; outline: 2px solid var(--blue); outline-offset: -2px; } .today-row td { color: var(--text-hi) !important; font-weight: 600; } .slobodni-cell { background: var(--bg-table-row-hover) !important; color: var(--text-lo) !important; font-style: italic; font-size: 11px; } .neradna-cell { background: var(--remap-danger-bg) !important; color: var(--danger) !important; font-weight: 500; } .subota-row.radna-subota { background: var(--remap-warning-bg) !important; } .subota-row.radna-subota td { color: var(--text-hi) !important; } .radna-subota-badge { display: inline-block; background: var(--warning) !important; color: #fff !important; font-size: 9px; padding: 2px 6px; border-radius: 8px; margin-left: 5px; font-weight: 700; } /* Week info banner + week-A/B/C badges */ .week-info { display: flex; gap: 22px; flex-wrap: wrap; padding: 12px 18px; background: var(--gradient-purple) !important; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-sm); margin-bottom: 14px; color: #fff; } .week-info-item { display: flex; align-items: center; gap: 8px; } .week-info-item .label { color: rgba(255, 255, 255, 0.75); font-size: 0.85em; } .week-info-item .value { font-weight: 700; color: #fff; } .week-badge { padding: 4px 12px; border-radius: 14px; font-weight: 700; font-size: 0.85em; color: #fff !important; } .week-a, .week-badge.week-a { background: var(--postava-1) !important; } .week-b, .week-badge.week-b { background: var(--postava-2) !important; } .week-c, .week-badge.week-c { background: var(--postava-3) !important; } /* Legenda */ .legenda { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px; background: var(--bg-card) !important; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-hi); } .legenda-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mid); } .legenda-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--glass-border); } /* Postave grid + cards (admin edit za postave) */ .postave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 12px 0; } .postava-card { background: var(--bg-card) !important; border: 1px solid var(--glass-border-strong) !important; border-radius: var(--radius-sm); overflow: hidden; color: var(--text-hi); } .postava-card-header { padding: 10px 14px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; } .postava-card-body { padding: 12px; } /* Stroj sekcija (unutar postava-card) */ .stroj-sekcija { margin-bottom: 12px; } .stroj-sekcija:last-child { margin-bottom: 0; } .stroj-naziv { font-size: 11px; color: var(--text-mid) !important; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px; } /* Clan badge (član postave) + dodaj-btn */ .clanovi-lista { display: flex; flex-wrap: wrap; gap: 5px; } .clan-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-card-hover) !important; border: 1px solid var(--glass-border) !important; color: var(--text-hi) !important; padding: 4px 10px; border-radius: 12px; font-size: 11px; } .clan-badge .ukloni { cursor: pointer; color: var(--danger); font-weight: bold; font-size: 12px; margin-left: 2px; } .clan-badge .ukloni:hover { color: var(--text-hi); } .dodaj-btn { background: var(--success-bg) !important; border: 1px dashed var(--success) !important; color: var(--success) !important; padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: inherit; } .dodaj-btn:hover { background: rgba(126, 207, 176, 0.20) !important; } /* Edit section (admin uređivanje rasporeda) */ .edit-section { background: var(--remap-warning-bg) !important; border: 2px solid var(--warning) !important; border-radius: var(--radius-sm); padding: 18px; margin-bottom: 16px; color: var(--text-hi); } .edit-section h3 { margin: 0 0 14px 0; color: var(--warning) !important; font-size: 16px; } .edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .edit-field label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-mid) !important; font-size: 13px; } .edit-field input, .edit-field select { width: 100%; background: var(--bg-input) !important; color: var(--text-hi) !important; border-color: var(--glass-border) !important; padding: 9px; border-radius: 6px; } /* Subote section (raspored-wh radne subote) */ .subote-section { background: var(--remap-warning-bg) !important; border: 2px solid var(--warning) !important; border-radius: var(--radius-sm); padding: 18px; margin-bottom: 16px; color: var(--text-hi); } .subote-section h3 { margin: 0 0 14px 0; color: var(--warning) !important; font-size: 16px; } .subote-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; padding: 14px; background: var(--bg-card) !important; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); } .subote-form .form-group { margin-bottom: 0; } .subote-form label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-mid) !important; font-size: 12px; } .subote-form input, .subote-form select { background: var(--bg-input) !important; color: var(--text-hi) !important; border-color: var(--glass-border) !important; padding: 8px 12px; border-radius: 6px; } .subote-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-card) !important; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden; } .subote-table th { background: var(--warning) !important; color: #fff !important; padding: 10px; text-align: left; font-weight: 700; } .subote-table td { padding: 10px; border-bottom: 1px solid var(--grid); color: var(--text-hi); } .subote-table tr:hover { background: var(--bg-table-row-hover) !important; } .subote-table .btn-delete { background: var(--danger) !important; color: #fff !important; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .no-subote { text-align: center; padding: 20px; color: var(--text-lo) !important; font-style: italic; } /* Info boxovi (raspored-wh info-box, raspored-tisak rotacija-info, satnica-info) */ .info-box { background: var(--bg-card) !important; border-left: 4px solid var(--blue) !important; border: 1px solid var(--glass-border); border-left-width: 4px; padding: 12px 14px; margin-bottom: 14px; border-radius: 4px; font-size: 13px; color: var(--text-hi); } .rotacija-info { background: var(--gradient-purple) !important; border: 1px solid rgba(180, 100, 200, 0.40); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; color: #fff; } .rotacija-info h4 { margin: 0 0 10px 0; color: #fff !important; font-size: 14px; } .satnica-info { background: var(--remap-info-bg) !important; border-left: 4px solid var(--blue) !important; padding: 10px 14px; margin-bottom: 14px; border-radius: 4px; font-size: 13px; color: var(--text-hi); } /* Admin badge (raspored-wh, raspored-tisak) */ .admin-badge { display: inline-block; background: var(--danger) !important; color: #fff !important; font-size: 9px; padding: 2px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; font-weight: 700; } /* Hide edit controls for non-admin */ .hide-edit-controls .ukloni, .hide-edit-controls .dodaj-btn { display: none !important; } /* Print mode za raspored — sakrij UI kontrole, ostavi tablicu papir-bijela */ @media print { .raspored-controls, .legenda, .week-info, .info-box, .raspored-tabs, .edit-section, .subote-section, .rotacija-info, .satnica-info { display: none !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .raspored-table { font-size: 9px; } .raspored-table th { padding: 6px 4px; } .raspored-table td { padding: 4px; } } /* === PRINT === */ @media print { body, body::before { background: #fff !important; } body { color: #000; } .top-header, .sidebar, .mobile-header, .btn, .modal, .toast-container, .loading-overlay { display: none !important; } .app-container { grid-template-areas: "main"; grid-template-columns: 1fr; grid-template-rows: 1fr; } .main-content { padding: 0; } .card { box-shadow: none; border: 1px solid #ccc; background: #fff; color: #000; } .card::before, .card::after { display: none; } table { color: #000; } table th { background: #f0f0f0; color: #000; } } /* ============================================ MOBILE TOGGLE BTN (zadržano iz starog za mobile.js) ============================================ */ .mobile-toggle-btn { position: fixed; bottom: 18px; right: 18px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, rgba(106, 172, 238, 0.30) 0%, rgba(70, 130, 220, 0.45) 100%); border: 1px solid var(--blue); color: var(--blue-bright); font-size: 22px; cursor: pointer; z-index: 99999; box-shadow: 0 4px 18px rgba(106, 172, 238, 0.35); display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(20px); } .mobile-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(106, 172, 238, 0.55); } .mobile-toggle-btn:active { transform: scale(0.95); } .mobile-toggle-btn::before { content: '📱'; } body.mobile-mode .mobile-toggle-btn::before { content: '💻'; } .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--topheader-bg); border-top: 1px solid var(--glass-border); z-index: 9990; backdrop-filter: blur(20px); padding-bottom: env(safe-area-inset-bottom); } .mobile-nav-items { display: flex; justify-content: space-around; align-items: stretch; } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; color: var(--text-mid); text-decoration: none; font-size: 0.7em; border: none; background: transparent; cursor: pointer; transition: all 0.2s; min-height: 56px; } .mobile-nav-item .nav-icon { font-size: 1.4em; margin-bottom: 2px; opacity: 0.7; } .mobile-nav-item.active, .mobile-nav-item:hover { color: var(--blue); background: rgba(70, 130, 220, 0.08); } .mobile-nav-item.active .nav-icon { opacity: 1; } .mobile-menu-btn { display: none; position: fixed; top: 8px; right: 10px; z-index: 9991; background: var(--topheader-bg); border: 1px solid var(--glass-border); color: var(--text-hi); padding: 8px 12px; border-radius: 8px; font-size: 18px; cursor: pointer; } /* ============================================ MOBILE SIDE-MENU DRAWER (mobile.js stvara DOM) Default: HIDDEN. Pokazuje se samo s .active klasom. Inače padaju kao normal block content na dno stranice. ============================================ */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 5, 18, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9992; } .mobile-menu-overlay.active { display: block; } .mobile-side-menu { display: none; position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--glass-border-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); z-index: 9993; overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s ease; } .mobile-side-menu.active { display: block; transform: translateX(0); box-shadow: 6px 0 28px rgba(0, 0, 0, 0.55); } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--glass-border); background: rgba(70, 130, 220, 0.06); } .mobile-menu-header h3 { margin: 0; font-size: 14px; color: var(--text-hi); letter-spacing: 0.4px; } .mobile-menu-close { background: none; border: none; color: var(--text-mid); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .mobile-menu-close:hover { color: var(--text-hi); background: rgba(70, 130, 220, 0.10); } .mobile-menu-items { padding: 8px 0; } .mobile-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-mid); text-decoration: none; font-size: 13px; border-left: 2px solid transparent; transition: all 0.15s; } .mobile-menu-item:hover { color: var(--text-hi); background: var(--sidebar-hover); } .mobile-menu-item.active { color: var(--blue); background: rgba(70, 130, 220, 0.10); border-left-color: var(--blue); } .mobile-menu-item .menu-icon { width: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.75; } .mobile-menu-item.active .menu-icon { opacity: 1; } .mobile-menu-divider { height: 1px; background: var(--grid); margin: 8px 0 0; } body.mobile-mode .top-header { display: none; } body.mobile-mode .sidebar { transform: translateX(-100%); } body.mobile-mode .sidebar.open { transform: translateX(0); } body.mobile-mode .mobile-header { display: flex; } body.mobile-mode .app-container { grid-template-areas: "header" "main"; grid-template-columns: 1fr; } /* ============================================ GLOBAL INLINE-STYLE OVERRIDES Razlog: 40+ modula ima inline style="background:#fff" / #f5f5f5 / itd. iz light theme ere. Ovi attribute selektori ih masovno konvertiraju u dark glass ekvivalente bez da se diraju moduli pojedinacno. ============================================ */ /* Bijele pozadine (kartice, modali, sub-blokovi, table rows) → glass dark FORCE color light da text ostane čitljiv unutar overrideanih bgova. */ [style*="background: #fff"], [style*="background:#fff"], [style*="background: white"], [style*="background:white"], [style*="background: #ffffff"], [style*="background:#ffffff"] { background: rgba(12, 40, 100, 0.20) !important; border-color: var(--glass-border) !important; color: var(--text-hi) !important; } /* Light grey backgrounds → subtle blue tint */ [style*="background: #fafafa"], [style*="background:#fafafa"], [style*="background: #fafbfc"], [style*="background:#fafbfc"], [style*="background: #f5f5f5"], [style*="background:#f5f5f5"], [style*="background: #f8f9fa"], [style*="background:#f8f9fa"], [style*="background: #f0f0f0"], [style*="background:#f0f0f0"], [style*="background: #eee"], [style*="background:#eee"], [style*="background: #d5e2f1"], [style*="background:#d5e2f1"], [style*="background: #d5dde6"], [style*="background:#d5dde6"], [style*="background: #f5f9fd"], [style*="background:#f5f9fd"], [style*="background: #ecf3fb"], [style*="background:#ecf3fb"], [style*="background: #dde5ed"], [style*="background:#dde5ed"], [style*="background: #eef2f7"], [style*="background:#eef2f7"] { background: var(--remap-grey-bg) !important; border-color: var(--grid) !important; color: var(--text-hi) !important; } /* Pastel status pozadine — još tamnije (alpha 0.06) + force light text */ [style*="background: #fff3e0"], [style*="background:#fff3e0"], [style*="background: #fff8e1"], [style*="background:#fff8e1"] { background: var(--remap-warning-bg) !important; border-color: rgba(233, 181, 102, 0.20) !important; color: var(--text-hi) !important; } [style*="background: #e8f5e9"], [style*="background:#e8f5e9"], [style*="background: #e8f5d6"], [style*="background:#e8f5d6"], [style*="background: #d4edda"], [style*="background:#d4edda"], [style*="background: #c8e6c9"], [style*="background:#c8e6c9"] { background: var(--remap-success-bg) !important; border-color: rgba(126, 207, 176, 0.20) !important; color: var(--text-hi) !important; } [style*="background: #e3f2fd"], [style*="background:#e3f2fd"], [style*="background: #cce5ff"], [style*="background:#cce5ff"], [style*="background: #e1f5fe"], [style*="background:#e1f5fe"] { background: var(--remap-info-bg) !important; border-color: rgba(106, 172, 238, 0.20) !important; color: var(--text-hi) !important; } [style*="background: #fff3cd"], [style*="background:#fff3cd"] { background: rgba(233, 181, 102, 0.08) !important; color: var(--warning) !important; border-color: rgba(233, 181, 102, 0.25) !important; } [style*="background: #ffebee"], [style*="background:#ffebee"], [style*="background: #fff5f5"], [style*="background:#fff5f5"], [style*="background: #f8d7da"], [style*="background:#f8d7da"], [style*="background: #ffcdd2"], [style*="background:#ffcdd2"], [style*="background: #fce4ec"], [style*="background:#fce4ec"] { background: var(--remap-danger-bg) !important; color: var(--text-hi) !important; border-color: rgba(176, 126, 138, 0.22) !important; } [style*="background: #efebe9"], [style*="background:#efebe9"] { background: rgba(140, 110, 90, 0.10) !important; border-color: rgba(140, 110, 90, 0.25) !important; color: var(--text-hi) !important; } [style*="background: #e0f2f1"], [style*="background:#e0f2f1"] { background: rgba(80, 180, 170, 0.08) !important; border-color: rgba(80, 180, 170, 0.25) !important; color: var(--text-hi) !important; } [style*="background: #f3e5f5"], [style*="background:#f3e5f5"] { background: rgba(180, 130, 200, 0.08) !important; border-color: rgba(180, 130, 200, 0.25) !important; color: var(--text-hi) !important; } /* Tamni text u pastel kontekstima → light varijante */ [style*="color: #666"], [style*="color:#666"], [style*="color: #555"], [style*="color:#555"] { color: var(--text-mid) !important; } [style*="color: #999"], [style*="color:#999"], [style*="color: #888"], [style*="color:#888"] { color: var(--text-lo) !important; } [style*="color: #333"], [style*="color:#333"] { color: var(--text-hi) !important; } [style*="color: #c62828"], [style*="color:#c62828"], [style*="color: #d32f2f"], [style*="color:#d32f2f"], [style*="color: #e53935"], [style*="color:#e53935"], [style*="color: #f44336"], [style*="color:#f44336"], [style*="color: #721c24"], [style*="color:#721c24"] { color: var(--danger) !important; } [style*="color: #856404"], [style*="color:#856404"], [style*="color: #f57c00"], [style*="color:#f57c00"], [style*="color: #e65100"], [style*="color:#e65100"], [style*="color: #ff9800"], [style*="color:#ff9800"] { color: var(--warning) !important; } [style*="color: #155724"], [style*="color:#155724"], [style*="color: #2e7d32"], [style*="color:#2e7d32"], [style*="color: #1b5e20"], [style*="color:#1b5e20"], [style*="color: #4caf50"], [style*="color:#4caf50"] { color: var(--success) !important; } [style*="color: #004085"], [style*="color:#004085"], [style*="color: #1565c0"], [style*="color:#1565c0"], [style*="color: #1976d2"], [style*="color:#1976d2"], [style*="color: #2196f3"], [style*="color:#2196f3"] { color: var(--blue) !important; } /* Saturirani gradient banneri (card-header background) — stišaj na muted glass varijante */ [style*="linear-gradient(135deg, #d84315"], [style*="linear-gradient(135deg, #ff5722"], [style*="linear-gradient(135deg, #f57c00"], [style*="linear-gradient(135deg, #ff9800"], [style*="linear-gradient(135deg, #e65100"] { background: linear-gradient(135deg, rgba(233, 181, 102, 0.18) 0%, rgba(176, 100, 60, 0.12) 100%) !important; color: var(--warning) !important; border-bottom: 1px solid rgba(233, 181, 102, 0.30) !important; } [style*="linear-gradient(135deg, #1976d2"], [style*="linear-gradient(135deg, #2196f3"], [style*="linear-gradient(135deg, #1565c0"], [style*="linear-gradient(135deg, #42a5f5"], [style*="linear-gradient(135deg, #1e3a5f"], [style*="linear-gradient(135deg, #2d5a87"], [style*="linear-gradient(135deg, #366092"], [style*="linear-gradient(135deg, #1a237e"] { background: linear-gradient(135deg, rgba(106, 172, 238, 0.18) 0%, rgba(70, 130, 220, 0.12) 100%) !important; color: var(--blue) !important; border-bottom: 1px solid rgba(106, 172, 238, 0.30) !important; } [style*="linear-gradient(135deg, #d32f2f"], [style*="linear-gradient(135deg, #e53935"], [style*="linear-gradient(135deg, #c62828"], [style*="linear-gradient(135deg, #f44336"] { background: linear-gradient(135deg, rgba(176, 126, 138, 0.18) 0%, rgba(140, 80, 90, 0.12) 100%) !important; color: var(--danger) !important; border-bottom: 1px solid rgba(176, 126, 138, 0.30) !important; } [style*="linear-gradient(135deg, #2e7d32"], [style*="linear-gradient(135deg, #4caf50"], [style*="linear-gradient(135deg, #43a047"] { background: linear-gradient(135deg, rgba(126, 207, 176, 0.18) 0%, rgba(80, 160, 120, 0.12) 100%) !important; color: var(--success) !important; border-bottom: 1px solid rgba(126, 207, 176, 0.30) !important; } /* Linija pillovi (NLI orange / WH green) — keep recognizable but soften */ [style*="background: #e65100"], [style*="background:#e65100"], [style*="background:#d84315"], [style*="background: #d84315"] { background: rgba(233, 130, 60, 0.30) !important; color: #ffd9bf !important; border: 1px solid rgba(233, 130, 60, 0.55) !important; } [style*="background: #2e7d32"], [style*="background:#2e7d32"], [style*="background:#43a047"], [style*="background: #43a047"] { background: rgba(126, 207, 176, 0.25) !important; color: #c4ecd9 !important; border: 1px solid rgba(126, 207, 176, 0.50) !important; } [style*="background: #1565c0"], [style*="background:#1565c0"], [style*="background:#1976d2"], [style*="background: #1976d2"] { background: rgba(106, 172, 238, 0.25) !important; color: #d6eaff !important; border: 1px solid rgba(106, 172, 238, 0.50) !important; } /* Plain bijela samo (bez border keyworda) — pillovi/tekst pozadine */ [style*="background: #fff;"], [style*="background:#fff;"] { background: rgba(12, 40, 100, 0.22) !important; } /* Progress bar tracks (eee/eef2f7) → dark variant */ [style*="background:#eef2f7"], [style*="background: #eef2f7"], [style*="background:#e0e0e0"], [style*="background: #e0e0e0"] { background: rgba(70, 130, 220, 0.10) !important; } /* Pastel border-left accent (border-left:4px solid #color) — keep koler ali stišano */ /* Stari Carta koristio "linear-gradient(135deg, #f6faff 0%, #e8f1fb 100%)" za "Danas" */ [style*="linear-gradient(135deg, #f6faff"], [style*="linear-gradient(135deg, #e8f1fb"] { background: linear-gradient(135deg, rgba(106, 172, 238, 0.12) 0%, rgba(70, 130, 220, 0.06) 100%) !important; } /* ============================================ SIDEBAR / FOOTER text contrast bump (tekst je bio preblijed) ============================================ */ .nav-item { color: var(--text-mid); } .nav-item:hover { color: var(--text-hi); } .user-name { color: var(--text-hi); } .user-role { color: var(--text-mid); } /* ============================================ Card-header s INLINE style="display:flex; ..." preko toga (npr. Live brojači gdje icon + text + meta na desno) — drži flex-start za prve 2, zadnji ide na desno automatski (vidi card-header pravilo gore) ============================================ */ /* ============================================ PLANIRANJE — class-based stilovi (attribute selector ih ne hvata) ============================================ */ .note-card { background: rgba(70, 130, 220, 0.06) !important; border-left-color: var(--blue) !important; color: var(--text-hi) !important; } .note-card.note-warning { border-left-color: var(--warning) !important; background: var(--remap-warning-bg) !important; } .note-card.note-info { border-left-color: var(--blue) !important; background: var(--remap-info-bg) !important; } .note-card.note-article { border-left-color: var(--danger) !important; background: var(--remap-danger-bg) !important; } .note-card-type { background: rgba(70, 130, 220, 0.12) !important; color: var(--text-mid) !important; border: 1px solid var(--glass-border); } .note-card-type.type-article { background: rgba(176, 126, 138, 0.15) !important; color: var(--danger) !important; border-color: rgba(176, 126, 138, 0.30); } .note-card-type.type-shift { background: rgba(126, 207, 176, 0.15) !important; color: var(--success) !important; border-color: rgba(126, 207, 176, 0.30); } .btn-resolve { background: rgba(126, 207, 176, 0.18) !important; color: var(--success) !important; border: 1px solid rgba(126, 207, 176, 0.40) !important; } .btn-resolve:hover { background: rgba(126, 207, 176, 0.30) !important; } .article-warning { background: rgba(233, 181, 102, 0.08) !important; border-color: rgba(233, 181, 102, 0.40) !important; color: var(--text-hi) !important; } /* Planiranje tablica — order/RN row stilovi */ .planning-tab { background: transparent; color: var(--text-mid); } .planning-tab:hover { background: rgba(106, 172, 238, 0.10) !important; color: var(--blue) !important; } .planning-tab.active { background: rgba(106, 172, 238, 0.18) !important; color: var(--blue-bright) !important; border-color: rgba(106, 172, 238, 0.40) !important; } .tab-badge { background: var(--danger) !important; color: #fff !important; } /* Group rows (narudžba header s razvijanje) — light blue-grey klase */ [class*="order-group-row"], .rn-group-row { background: rgba(106, 172, 238, 0.07) !important; color: var(--text-hi) !important; } .rn-subgroup-row { background: rgba(70, 130, 220, 0.04) !important; color: var(--text-mid) !important; } .rn-subgroup-row:hover { background: rgba(106, 172, 238, 0.10) !important; color: var(--text-hi) !important; } /* Group toolbar btns */ .group-toolbar-btn { background: rgba(12, 40, 100, 0.20) !important; border-color: var(--glass-border) !important; color: var(--text-mid) !important; } .group-toolbar-btn:hover { background: rgba(70, 130, 220, 0.10) !important; border-color: var(--glass-border-strong) !important; color: var(--text-hi) !important; } .group-toolbar-btn:active { background: rgba(70, 130, 220, 0.18) !important; } /* Attach badge */ .attach-badge { background: rgba(106, 172, 238, 0.20) !important; color: var(--blue) !important; } .attach-badge.zero { background: rgba(70, 130, 220, 0.10) !important; color: var(--text-lo) !important; } /* Th s status backgrounds (S1/S2/Folija column headers koji koriste #e3f2fd / #efebe9 / #e8f5e9 inline) Već pokriveno gore via attribute selector, ali force readonly white text u th. */ table th[style*="background"] { color: var(--text-hi) !important; } /* ============================================ GLOBAL: tablica td/tr s INLINE style — force light text Mnogi moduli imaju ili sl., tekst unutra ostaje default-tamno-blue (#1976d2) koji nije čitljiv na svijetloj alpha pozadini. Force light text default-no za sve TR-ove sa inline background. ============================================ */ tr[style*="background"] td, tr[style*="background"] td * { color: var(--text-hi); } tr[style*="background"] td a { color: var(--blue); } tr[style*="background"] td strong { color: var(--text-hi); } /* Sticky thead overrides */ thead[style*="background"] th, thead[style*="background"] tr th { color: var(--text-lo) !important; background: rgba(8, 22, 55, 0.95) !important; } /* ============================================ MODAL CONTENT — defense-in-depth za text contrast Razlog: modali sadrže textni sadržaj (form labele, headings, table cells, info blokovi) s defaultnim ili inline tamnim color-ima. Forsiramo light text za sve descendantse modal-content-a osim onih s eksplicitnim semantic color klasama (.btn-*, .badge-*, .text-success itd.). ============================================ */ .modal-content { color: var(--text-hi); } .modal-content p, .modal-content div, .modal-content span, .modal-content li, .modal-content dt, .modal-content dd, .modal-content em { color: inherit; } .modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6 { color: var(--text-hi); } .modal-content label { color: var(--text-mid); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .modal-content small { color: var(--text-lo); } .modal-content strong, .modal-content b { color: var(--text-hi); font-weight: 700; } .modal-content table { color: var(--text-mid); } .modal-content td { color: var(--text-mid); } .modal-content th { color: var(--text-lo); background: rgba(70, 130, 220, 0.08); } .modal-content td strong, .modal-content td b { color: var(--text-hi); } .modal-content a { color: var(--blue); } .modal-content hr { border-color: var(--grid); } /* Form controls UNUTAR modala — eksplicitno dark glass */ .modal-content input.form-control, .modal-content select.form-control, .modal-content textarea.form-control, .modal-content input[type="text"], .modal-content input[type="email"], .modal-content input[type="password"], .modal-content input[type="number"], .modal-content input[type="date"], .modal-content input[type="time"], .modal-content input[type="datetime-local"], .modal-content input[type="search"] { background: var(--bg-input) !important; color: var(--text-hi) !important; border-color: var(--glass-border) !important; } .modal-content input.form-control:focus, .modal-content select.form-control:focus, .modal-content textarea.form-control:focus { background: rgba(8, 22, 55, 0.85) !important; border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(106, 172, 238, 0.15) !important; } .modal-content input.form-control[readonly], .modal-content input.form-control:disabled, .modal-content select.form-control:disabled, .modal-content textarea.form-control[readonly] { background: rgba(0, 5, 18, 0.50) !important; color: var(--text-mid) !important; cursor: not-allowed; } /* Fix za inline `` — input se loši radi "background:#f5f5f5" kao light, ali u modalu treba dark — ::placeholder zadržava lo. Stvarno: my [style*="background:#f5f5f5"] već override-a bg, ali plus dodatno force input text light. */ .modal-content input[style*="background"] { color: var(--text-hi) !important; } /* SELECT options dropdown — OS-default je bijela. Force dark. */ select option { background: #07142e !important; color: var(--text-hi) !important; } select optgroup { background: #050d22 !important; color: var(--text-lo) !important; } /* ============================================ GLOBAL: dodatne dark hex boje koje sam previdio (defensive sweep) ============================================ */ [style*="color: #0d47a1"], [style*="color:#0d47a1"], [style*="color: #0c5460"], [style*="color:#0c5460"], [style*="color: #383d41"], [style*="color:#383d41"], [style*="color: #212121"], [style*="color:#212121"], [style*="color: #444"], [style*="color:#444"], [style*="color: #1a237e"], [style*="color:#1a237e"], [style*="color: #2c3e50"], [style*="color:#2c3e50"], [style*="color: #34495e"], [style*="color:#34495e"], [style*="color: #607d8b"], [style*="color:#607d8b"] { color: var(--text-hi) !important; } /* Bootstrap-style green status (#28a745) → success */ [style*="color: #28a745"], [style*="color:#28a745"], [style*="color: #218838"], [style*="color:#218838"], [style*="color: #388e3c"], [style*="color:#388e3c"] { color: var(--success) !important; } /* Light gradient banneri unutar planiranja — lakše blue gradient pozadine */ [style*="linear-gradient(135deg, #e3f2fd"], [style*="linear-gradient(135deg,#e3f2fd"], [style*="linear-gradient(135deg, #bbdefb"], [style*="linear-gradient(135deg,#bbdefb"], [style*="linear-gradient(135deg, #f6faff"], [style*="linear-gradient(135deg,#f6faff"], [style*="linear-gradient(135deg, #e8f1fb"], [style*="linear-gradient(135deg,#e8f1fb"] { background: linear-gradient(135deg, rgba(106, 172, 238, 0.12) 0%, rgba(70, 130, 220, 0.05) 100%) !important; border-color: rgba(106, 172, 238, 0.30) !important; color: var(--text-hi) !important; } [style*="linear-gradient(135deg, #e8f5e9"], [style*="linear-gradient(135deg,#e8f5e9"] { background: linear-gradient(135deg, rgba(126, 207, 176, 0.12) 0%, rgba(80, 160, 120, 0.05) 100%) !important; border-color: rgba(126, 207, 176, 0.30) !important; color: var(--text-hi) !important; } /* Dashed border placeholderi (#fafafa border:1px dashed #ccc) — zadrži dashed look ali tamno */ [style*="border: 1px dashed #ccc"], [style*="border:1px dashed #ccc"], [style*="border: 1px dashed #ddd"], [style*="border:1px dashed #ddd"] { border-color: var(--glass-border) !important; } /* "(nova)" oznaka i sl. small s color:#28a745 → success bright (već handled gore) */ /* ============================================ DEFENSIVE: any descendant of .card or .modal-content with INLINE color that's still dark — reset to light. Lower priority (no !important) tako da semantic spans (.text-success itd.) ostanu intakni. ============================================ */ .card *[style*="color: #1"]:not([style*="color: #1976d2"]):not([style*="color: #1565c0"]), .card *[style*="color:#1"]:not([style*="color:#1976d2"]):not([style*="color:#1565c0"]) { color: var(--text-hi); } /* Headings unutar bilo kojeg darkglass containera — forsiraj svijetli */ .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--text-hi); } .card label { color: var(--text-mid); } .card small, .card .small { color: var(--text-lo); } .card hr { border-color: var(--grid); } /* Inline color attributes od dark-tone backgrounda u sub-blokovi Npr.

— bg već override-an, color #999 also already mapped. Dodatno za #ccc/#bbb */ [style*="color: #ccc"], [style*="color:#ccc"], [style*="color: #bbb"], [style*="color:#bbb"], [style*="color: #aaa"], [style*="color:#aaa"] { color: var(--text-lo) !important; } /* Table headers s inline white text (modal-headers koji su svijetli badge style) */ .modal-header h2[style*="color"], .modal-header h3[style*="color"] { color: var(--text-hi) !important; } /* Zebra-stripe alt tablica row (npr. tr:nth-child(even)) — ako koriste light bg, tone down */ tr:nth-child(even)[style=""] td, tbody tr:nth-child(even):not([style*="background"]) td { background: rgba(70, 130, 220, 0.025); } /* ============================================ ARTIKLI — class overrides (.form-section, .wizard-*, .country-*, ...) Razlog: definirane u