* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #f4f5f7; color: #222; } .layout { display: flex; min-height: 100vh; } /* ── Plutajuće toggle dugme — fiksno pozicionirano, NIJE unutar .sidebar ni .layout, da ostane vidljivo i dostupno NEZAVISNO od toga je li sidebar trenutno prikazan ili sakriven. Pomera se sa levog ivice na ivicu sidebara preko .sidebar-toggle-shifted klase na (vidi JS u app.js — ta klasa se dodaje/uklanja zajedno sa sidebar-hidden klasom na #erp-layout). ── */ .erp-sidebar-toggle { position: fixed; top: 16px; left: 8px; z-index: 200; background: #1f2937; color: #fff; border: 1px solid #374151; border-radius: 8px; width: 34px; height: 34px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: left 0.15s ease; } .erp-sidebar-toggle:hover { background: #374151; } /* Kad je sidebar OTVOREN, dugme se pomera na njegovu desnu ivicu (240px širina sidebara - malo preklapanje da ne "lebdi" usred sadržaja). */ body.sidebar-open .erp-sidebar-toggle { left: 206px; } /* ── Sidebar logo sekcija (u samom sidebaru, iznad navigacije) — logo ostaje u okviru standardnog paddinga sidebara (20px sa svake strane), bez probijanja van širine sidebara. Logo se AUTOMATSKI sakriva zajedno sa sidebarom (nije potreban poseban JS/CSS za to — .sidebar-logo je unutar .sidebar, koji već ima display:none kada je .layout.sidebar-hidden aktivan). ── */ .sidebar-logo { margin: 0 0 14px; text-align: center; } .sidebar-logo img { max-width: 100%; width: 100%; height: auto; object-fit: contain; } /* ── Sakriven sidebar — .main automatski zauzme celu širinu jer je flex:1 unutar istog flex kontejnera (.layout), bez potrebe za dodatnim width pravilima na .main. ── */ .layout.sidebar-hidden .sidebar { display: none; } .sidebar { width: 240px; background: #111827; color: #fff; padding: 20px; flex-shrink: 0; } .sidebar h2 { margin-top: 0; } .sidebar a { display: block; color: #d1d5db; text-decoration: none; padding: 11px 12px; border-radius: 8px; margin-bottom: 6px; } .sidebar a.active, .sidebar a:hover { background: #374151; color: #fff; } .sidebar a.erp-nav-disabled { color: #6b7280; cursor: not-allowed; opacity: .55; } .sidebar a.erp-nav-disabled:hover { background: none; color: #6b7280; } .sidebar .logout { margin-top: 30px; background: #7f1d1d; color: #fff; } .main { flex: 1; padding: 30px; overflow-x: auto; } h1 { margin-top: 0; font-size: 34px; } h2 { margin-top: 0; } .panel, .card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cards { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .card { min-width: 220px; } .big { font-size: 42px; font-weight: bold; } label { display: block; font-weight: bold; margin-top: 12px; margin-bottom: 5px; } input, select, textarea { width: 100%; padding: 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 14px; } button { margin-top: 14px; padding: 10px 16px; border: 0; background: #111827; color: #fff; border-radius: 7px; cursor: pointer; } button.small { padding: 7px 10px; margin-top: 6px; } button.approve { background: #166534; } button.reject { background: #991b1b; } button:hover { opacity: 0.9; } table { width: 100%; border-collapse: collapse; background: #fff; } th, td { border-bottom: 1px solid #e5e7eb; padding: 10px; text-align: left; vertical-align: middle; } th { background: #f9fafb; } td input, td select { min-width: 130px; } .alert { padding: 12px; border-radius: 8px; margin-bottom: 15px; } .alert.success { background: #dcfce7; border: 1px solid #86efac; } .alert.error { background: #fee2e2; border: 1px solid #fca5a5; } .badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: bold; } .badge.pending { background: #fef3c7; color: #92400e; } .badge.approved { background: #dcfce7; color: #166534; } .badge.rejected { background: #fee2e2; color: #991b1b; } .inline-form textarea { margin-bottom: 5px; min-width: 180px; } .form-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; } .form-row .wide { grid-column: span 3; } .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { width: 360px; background: #fff; padding: 25px; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.12); } .login-logo { display: block; max-width: 100%; width: auto; max-height: 120px; height: auto; margin: 0 auto 14px; } /* ── Org chart ─────────────────────────────────────────────────────────── */ .org-chart-wrap { overflow-x: auto; padding-bottom: 24px; } /* Glavni kontejner — position:relative je OBAVEZAN, SVG overlay (linije) se pozicionira apsolutno unutar ovog elementa i čita scrollWidth/Height preko JS-a (vidi modules/employees.php) da pokrije ceo organigram, ne samo vidljivi deo kad je širi od ekrana. */ .org-chart { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 100%; } /* SVG overlay sa linijama — crta se preko JavaScript-a (čita stvarne koordinate kartica preko getBoundingClientRect()), NE preko CSS-a. CSS pristup (border/pseudo-elementi pozicionirani relativno na flex kontejner) ne može garantovano spojiti liniju roditelja sa linijom deteta kad redovi imaju različite širine/broj kartica — zato je ovaj overlay potreban: linije idu TAČNO od centra-dno roditelja do centra-vrh svakog djeteta, bez obzira na raspored. */ .org-chart-lines { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; } /* Jedan horizontalni nivo — kartice su ravnomerno razmaknute, razmak između njih (gap) ostavlja prostor da linije iz SVG overlay-a budu vidljive i ne preklapaju kartice. VAŽNO: BEZ flex-wrap — svaki nivo MORA biti tačno jedan horizontalan red. Ako bi se nivo prelamao u 2 reda (wrap), kartice iz drugog reda bi fizički sedele na istoj Y-visini gde linija ka sledećem nivou prolazi horizontalno (midY u JS-u), pa bi je presecale. .org-chart-wrap ima overflow-x:auto — kad nivo ima puno kartica, korisnik horizontalno skroluje umesto da se nivo prelama. */ .org-level { display: flex; justify-content: center; align-items: flex-start; flex-wrap: nowrap; gap: 20px 12px; width: 100%; margin-bottom: 28px; position: relative; z-index: 1; } /* Wrapper oko jedne kartice — position:relative + z-index:1 da kartica ostane IZNAD SVG linija (linije imaju z-index:0). */ .org-node { position: relative; z-index: 1; } /* ── Kartica zaposlenog ── */ .org-card { border-radius: 6px; padding: 6px 9px; min-width: 95px; max-width: 120px; width: 110px; text-align: center; border: 1px solid; cursor: default; transition: box-shadow 0.15s; box-sizing: border-box; position: relative; z-index: 1; } .org-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.14); } .org-card.role-director { background: #ede9fe; border-color: #7c3aed; } .org-card.role-manager { background: #dbeafe; border-color: #1d4ed8; } .org-card.role-employee { background: #f3f4f6; border-color: #9ca3af; } .org-card.is-inactive { opacity: 0.5; border-style: dashed; } .org-card-name { font-weight: bold; font-size: 9px; color: #111827; white-space: normal; word-break: break-word; line-height: 1.2; } .org-card-role { font-size: 7px; font-weight: bold; border-radius: 99px; padding: 1px 5px; display: inline-block; margin-top: 2px; border: 1px solid; } .org-card.role-director .org-card-role { color:#7c3aed; border-color:#7c3aed; background:#f5f3ff; } .org-card.role-manager .org-card-role { color:#1d4ed8; border-color:#1d4ed8; background:#eff6ff; } .org-card.role-employee .org-card-role { color:#374151; border-color:#9ca3af; background:#fff; } .org-card-meta { font-size: 7px; color: #6b7280; margin-top: 3px; line-height: 1.3; white-space: normal; word-break: break-word; } /* ── Legenda ── */ .org-legend { display: flex; gap: 16px; flex-wrap: wrap; } .org-legend-item { font-size: 12px; display: flex; align-items: center; gap: 5px; } .org-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; flex-shrink: 0; } /* ── Legenda ── */ .org-legend { display: flex; gap: 16px; flex-wrap: wrap; } .org-legend-item { font-size: 12px; display: flex; align-items: center; gap: 5px; } .org-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; flex-shrink: 0; } @media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; } .grid-2, .cards, .form-row { display: block; } } /* ── Report tabovi ──────────────────────────────────────────────────────── */ .report-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; flex-wrap: wrap; } .report-tab { display: inline-block; padding: 9px 18px; font-size: 14px; font-weight: 500; color: #6b7280; text-decoration: none; border-radius: 6px 6px 0 0; border: 2px solid transparent; border-bottom: none; margin-bottom: -2px; transition: color 0.15s, background 0.15s; } .report-tab:hover { color: #1d4ed8; background: #eff6ff; } .report-tab.active { color: #1d4ed8; background: #fff; border-color: #e5e7eb; border-bottom-color: #fff; font-weight: 600; } /* ── Kalendar odmora ────────────────────────────────────────────────────── */ .erp-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; } .erp-calendar thead th { text-align: center; font-size: 12px; font-weight: 600; color: #6b7280; padding: 6px 4px; border-bottom: 2px solid #e5e7eb; } .erp-cal-empty { background: #f9fafb; } .erp-cal-day { vertical-align: top; padding: 6px 4px 8px; border: 1px solid #f3f4f6; min-height: 64px; height: 64px; } .erp-cal-today { background: #eff6ff; border-color: #bfdbfe !important; } .erp-cal-weekend { background: #fafafa; } .erp-cal-num { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; text-align: right; padding-right: 2px; } .erp-cal-today .erp-cal-num { color: #1d4ed8; } .erp-cal-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 9px; font-weight: 700; color: #fff; margin: 1px 1px 0 0; cursor: default; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }