/* ============================================================ Smiješak za sve — design system (variant 2) Light + dark themes (via [data-theme="dark"] on ), mobile-first. Fonts (Baloo 2 + Nunito) are loaded by the layout . ============================================================ */ :root { /* Brand (constant across themes) */ --brand-pink: #e0509e; --brand-pink-deep: #c53c85; --brand-blue: #00b5dd; --brand-blue-deep: #0192b4; --brand-green: #b1d332; --primary: var(--brand-pink); --primary-deep: var(--brand-pink-deep); --focus: var(--brand-blue); /* Light surfaces/text */ --bg: #FFF7F1; --surface: #ffffff; --surface-2: #FBF4EE; --ink: #233044; --ink-soft: #4A5568; --muted: #6B7280; --line: #ECE1D9; --input-bg: #ffffff; /* Status (fg / bg) */ --pending-fg: #B7791F; --pending-bg: #FBEFD8; --approved-fg: #1B7A4D; --approved-bg: #E4F6EC; --rejected-fg: #C0322B; --rejected-bg: #FBE9E8; --danger: #C0322B; --radius: 22px; --radius-md: 16px; --radius-in: 13px; --shadow: 0 14px 40px rgba(35,48,68,.12), 0 3px 10px rgba(35,48,68,.05); --shadow-sm: 0 4px 14px rgba(35,48,68,.07); --topbar-h: 64px; } [data-theme="dark"] { --bg: #14161b; --surface: #1e2128; --surface-2: #242832; --ink: #e9ecf1; --ink-soft: #c3c9d3; --muted: #93a0b2; --line: #2d323c; --input-bg: #242832; --pending-fg: #E6B35A; --pending-bg: #36301c; --approved-fg: #7FC893; --approved-bg: #18301f; --rejected-fg: #F08A84; --rejected-bg: #361e1d; --shadow: 0 16px 44px rgba(0,0,0,.45); --shadow-sm: 0 4px 14px rgba(0,0,0,.30); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Nunito', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); min-height: 100dvh; -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; } h1,h2,h3,.font-display { font-family: 'Baloo 2','Nunito',sans-serif; font-weight: 600; } a { color: var(--brand-blue-deep); } [data-theme="dark"] a { color: #4fd0ee; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; } img { max-width: 100%; } /* ---------------- Top bar + navigation ---------------- */ .topbar { position: sticky; top: 0; z-index: 100; min-height: var(--topbar-h); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 8px clamp(14px,4vw,36px); } .brand { display: flex; align-items: center; text-decoration: none; flex: none; } .brand img { display: block; } .nav-toggle, .theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .nav-toggle svg, .theme-toggle svg { width: 20px; height: 20px; } .nav-toggle:hover, .theme-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue-deep); } .nav-toggle { display: none; } .theme-toggle .moon { display: block; } .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .moon { display: none; } [data-theme="dark"] .theme-toggle .sun { display: block; } .nav-wrap { display: flex; align-items: center; gap: 14px; flex: 1; } .nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: background .15s, color .15s; } .nav a:hover { background: color-mix(in srgb, var(--brand-pink) 12%, transparent); color: var(--ink); } .nav a.is-active { background: color-mix(in srgb, var(--brand-pink) 16%, transparent); color: var(--brand-pink-deep); } [data-theme="dark"] .nav a.is-active { color: #f49ac9; } .nav a svg, .nav-link-btn svg { width: 17px; height: 17px; flex: none; } .nav a.is-todo, .nav-link-btn.is-todo { color: color-mix(in srgb, var(--muted) 70%, transparent); } /* nav buttons (dropdown parents) styled like nav links */ .nav-link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: none; background: none; color: var(--muted); font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .nav-link-btn:hover { background: color-mix(in srgb, var(--brand-pink) 12%, transparent); color: var(--ink); } .nav-link-btn.is-active { background: color-mix(in srgb, var(--brand-pink) 16%, transparent); color: var(--brand-pink-deep); } .nav-dd .chev { width: 14px !important; height: 14px !important; transition: transform .15s; } .has-pop.is-open .chev { transform: rotate(180deg); } /* generic popover (nav dropdowns + user menu) */ .has-pop { position: relative; } .pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: none; z-index: 200; } .pop.pop--end { left: auto; right: 0; } .has-pop.is-open .pop { display: block; } .nav-pop a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; } .nav-pop a:hover { background: var(--surface-2); } .nav-pop a.is-todo { color: var(--muted); } .nav-pop hr { border: none; border-top: 1px solid var(--line); margin: 6px 4px; } /* Privileged nav items — persistent highlight so the staff/admin menus read as special. Staff (Upravljanje) = soft blue chip; Admin (Administracija) = filled deep-pink pill ("specialer"). */ .nav .nav-accent--staff { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); color: color-mix(in srgb, var(--brand-blue-deep) 72%, #000); } .nav .nav-accent--staff:hover { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); color: color-mix(in srgb, var(--brand-blue-deep) 78%, #000); } .nav .nav-accent--staff.is-active { background: color-mix(in srgb, var(--brand-blue) 26%, transparent); color: color-mix(in srgb, var(--brand-blue-deep) 80%, #000); } [data-theme="dark"] .nav .nav-accent--staff { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); color: #63d3ec; } [data-theme="dark"] .nav .nav-accent--staff:hover, [data-theme="dark"] .nav .nav-accent--staff.is-active { color: #7ddcf0; } .nav .nav-accent--admin { background: var(--brand-pink-deep); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.18); } .nav .nav-accent--admin:hover, .nav .nav-accent--admin.is-active { background: #9c2c66; color: #fff; } .top-actions { display: flex; align-items: center; gap: 10px; flex: none; } .who { text-align: left; line-height: 1.15; } .who b { display: block; font-size: 13.5px; } .who small { display: block; color: var(--muted); font-size: 12px; } .user-menu { position: relative; } .user-btn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); transition: background .15s, border-color .15s, box-shadow .15s; } .user-btn:hover { border-color: var(--brand-blue); background: var(--surface-2); } .user-btn:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 28%, transparent); } .user-menu.is-open .user-btn { border-color: color-mix(in srgb, var(--brand-pink) 45%, transparent); background: color-mix(in srgb, var(--brand-pink) 8%, var(--surface)); } .user-btn .chev { transition: transform .15s; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-pink), var(--brand-blue)); color: #fff; display: grid; place-items: center; font-family: 'Baloo 2'; font-weight: 700; font-size: 13px; flex: none; } /* Reusable CIRCLE avatar (component ): photo or initials. */ .avatar-circle { display: grid; place-items: center; flex: none; overflow: hidden; color: #fff; border-radius: 50%; background: linear-gradient(135deg, var(--brand-pink), var(--brand-pink-deep)); font-family: 'Baloo 2', sans-serif; font-weight: 700; line-height: 1; } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: none; } .user-menu.is-open .user-pop { display: block; } .user-pop a, .user-pop button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; border: none; background: none; cursor: pointer; } .user-pop a:hover, .user-pop button:hover { background: var(--surface-2); } .user-pop svg { width: 16px; height: 16px; } .user-pop hr { border: none; border-top: 1px solid var(--line); margin: 6px 4px; } /* ---------------- Layout ---------------- */ .container { max-width: 1600px; margin: 0 auto; padding: clamp(18px,4vw,34px) clamp(14px,4vw,36px) 60px; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: clamp(24px,3.2vw,34px); margin: 0 0 6px; } .page-head p { margin: 0; color: var(--muted); font-size: 15.5px; } .page-head--row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(16px,3vw,24px); } .panel + .panel { margin-top: 18px; } /* Collapsible disclosure panel — shared component (dashboard "reports you owe" reminder + other-events applicants list). Pair with the .panel card class. */ .owed-panel { border: 1px solid color-mix(in srgb, #f5a623 40%, var(--line)); border-left: 4px solid #f5a623; background: color-mix(in srgb, #f5a623 12%, transparent); } .owed-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; } .owed-panel > summary::-webkit-details-marker { display: none; } .owed-panel__icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #f5a623 24%, transparent); color: #b45f04; } .owed-panel__icon svg { width: 20px; height: 20px; } .owed-panel__title { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); } .owed-panel__chevron { margin-left: auto; color: var(--muted); transition: transform .15s ease; } .owed-panel__chevron svg { width: 20px; height: 20px; display: block; } .owed-panel[open] .owed-panel__chevron { transform: rotate(180deg); } .owed-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; } .owed-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .owed-item::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ev, var(--brand-pink, #e0509e)); } .owed-item__date { font-weight: 600; color: var(--ink); min-width: 118px; } .owed-item__hosp { color: var(--ink-soft); flex: 1; min-width: 0; } .owed-item__btn { flex: none; } .owed-item__meta { flex: none; color: var(--muted); white-space: nowrap; } @media (max-width: 560px) { .owed-item { flex-wrap: wrap; } .owed-item__hosp { flex-basis: 100%; order: 3; } } /* Inside the dashboard grid the panels are columns, not a stack — the grid `gap` handles spacing, so the adjacent-sibling margin must not push the 2nd column down. */ .home-cols .panel + .panel { margin-top: 0; } /* Same on the profile page: the .pf-card panels live in a `.pf-grid` (own gap), so the adjacent-sibling margin would push grid items down and break row alignment. */ .profile-wrap .panel + .panel { margin-top: 0; } /* And in the .rgrid card grid (e.g. Bolnice i odjeli): without this, every card except the first gets margin-top:18px, so the first card sits higher and the row stretches taller — making card 1 look larger. The grid `gap` handles spacing. */ .rgrid .panel + .panel { margin-top: 0; } .panel__title { display: flex; align-items: center; gap: 9px; font-family: 'Baloo 2'; font-weight: 600; font-size: 18px; margin: 0 0 14px; } .panel__title svg { width: 19px; height: 19px; color: var(--brand-pink); } .hero-panel { border: none; color: #fff; background: radial-gradient(120% 130% at 0% 0%, rgba(255,201,150,.40), rgba(255,201,150,0) 55%), linear-gradient(135deg, var(--brand-pink), var(--brand-pink-deep)); } .hero-panel h1 { color: #fff; } /* ---------------- Badges / chips ---------------- */ .badge2 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; } .badge2 svg { width: 13px; height: 13px; } .b-pending { background: var(--pending-bg); color: var(--pending-fg); } .b-approved { background: var(--approved-bg); color: var(--approved-fg); } .b-rejected { background: var(--rejected-bg); color: var(--rejected-fg); } .hospital-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; background: color-mix(in srgb, var(--ev, var(--brand-pink)) 16%, var(--surface)); color: var(--ink); } .hospital-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ev, var(--brand-pink)); flex: none; } /* ---------------- Stat cards ---------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px,1fr)); gap: 16px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); } .stat__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; } .stat__ic svg { width: 22px; height: 22px; } .stat__num { font-family: 'Baloo 2'; font-weight: 700; font-size: 30px; line-height: 1; } .stat__lbl { color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 4px; } .ic-pink { background: color-mix(in srgb, var(--brand-pink) 14%, transparent); color: var(--brand-pink-deep); } .ic-blue { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); color: var(--brand-blue-deep); } .ic-green { background: color-mix(in srgb, var(--brand-green) 26%, transparent); color: #5C7A0E; } .ic-amber { background: var(--pending-bg); color: var(--pending-fg); } [data-theme="dark"] .ic-pink { color: #f49ac9; } [data-theme="dark"] .ic-blue { color: #4fd0ee; } [data-theme="dark"] .ic-green { color: #c4e06a; } /* ---------------- Report cards ---------------- */ .rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 18px; } .rcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s, box-shadow .15s; } .rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .rcard.is-deleted { opacity: .6; border-left: 3px dashed var(--rejected-fg); } .rcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 14px 16px 0; } .rcard__body { padding: 11px 16px 16px; flex: 1; } .rcard__name { font-weight: 800; font-size: 15.5px; } .rcard__meta { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 6px; } .rcard__meta svg { width: 14px; height: 14px; } .rcard__excerpt { margin-top: 11px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; white-space: pre-line; } .rcard__excerpt.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } /* Footer toolbar: set off from the article body with a separator + washed-out bg */ .rcard__foot { padding: 13px 16px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); background: var(--surface-2); } /* ---------------- Buttons ---------------- */ .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: none; border-radius: var(--radius-in); cursor: pointer; font-family: 'Nunito'; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); text-decoration: none; box-shadow: 0 8px 18px rgba(197,60,133,.28); transition: transform .15s, box-shadow .15s; } .btn2:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(197,60,133,.36); } .btn2:active { transform: translateY(0); } .btn2 svg { width: 17px; height: 17px; } .btn2--soft { background: var(--surface); color: var(--brand-blue-deep); border: 1.5px solid var(--line); box-shadow: none; } .btn2--soft:hover { border-color: var(--brand-blue); } [data-theme="dark"] .btn2--soft { color: #4fd0ee; } .btn2--blue { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-deep)); box-shadow: 0 8px 18px rgba(0,181,221,.28); } .btn2--green { background: linear-gradient(135deg, #c2e04e, #9bbd1f); color: #2c3a06; box-shadow: 0 8px 18px rgba(177,211,50,.30); } .btn2--danger { background: linear-gradient(135deg, #e2655d, #C0322B); box-shadow: 0 8px 18px rgba(192,50,43,.28); } .btn2--amber { background: linear-gradient(135deg, #f6ad3c, #e2820f); color: #fff; box-shadow: 0 8px 18px rgba(226,130,15,.28); } .btn2--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; } .btn2--ghost:hover { border-color: var(--brand-pink); } .btn2--sm { min-height: 38px; font-size: 14px; padding: 0 14px; } /* ---------------- Forms / filters ---------------- */ .field { margin-bottom: 18px; } .field > label, .filters label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 7px; color: var(--ink); } .control { position: relative; display: flex; align-items: center; } .control .lead-ic { position: absolute; left: 14px; display: flex; color: var(--muted); pointer-events: none; } .control .lead-ic svg { width: 18px; height: 18px; } .inp, .control input, .control select, .control textarea, .filters select, .filters input { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--ink); background: var(--input-bg); border: 1.5px solid var(--line); border-radius: var(--radius-in); transition: border-color .18s, box-shadow .18s; } .control.has-icon input { padding-left: 44px; } .inp:focus, .control input:focus, .control select:focus, .control textarea:focus, .filters select:focus, .filters input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,181,221,.16); } .inp.has-error, .control input.has-error { border-color: var(--danger); } .field-error { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--danger); font-size: 13px; font-weight: 600; } .field-error svg { width: 15px; height: 15px; flex: none; } /* Form group sub-headers, required marker, checkbox/radio option rows — shared by the additional-data FIELDS partial (status pages + editprofile). */ .form-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 22px 0 12px; } .form-group-label:first-of-type { margin-top: 4px; } .req { color: var(--danger); } textarea.inp { min-height: auto; padding-top: 11px; padding-bottom: 11px; line-height: 1.5; resize: vertical; } .opt-group { display: flex; flex-direction: column; gap: 9px; } .opt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink); cursor: pointer; } .opt input { width: 18px; height: 18px; accent-color: var(--brand-pink); cursor: pointer; flex: none; } .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .filters .f { display: flex; flex-direction: column; gap: 6px; } .filters select, .filters input { min-width: 170px; } .filters.is-centered { justify-content: center; } /* ---------------- Tables (userlist etc.) ---------------- */ .table2 { width: 100%; border-collapse: collapse; } .table2 th, .table2 td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .table2 th { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); } .table2 tr:hover td { background: var(--surface-2); } .table-wrap { overflow-x: auto; } /* ---------------- Calendar grid (Phase 4 chrome; FullCalendar themed separately) ---------------- */ .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .cal-title { font-family: 'Baloo 2'; font-weight: 600; font-size: 22px; text-transform: capitalize; } .cal-nav { display: flex; gap: 8px; } .cal-nav a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; background: var(--surface); } .cal-nav a:hover { border-color: var(--brand-pink); color: var(--brand-pink-deep); } .legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } /* FullCalendar brand theming (Phase 4) */ .fc { --fc-button-bg-color: var(--brand-pink); --fc-button-border-color: var(--brand-pink); --fc-button-hover-bg-color: var(--brand-pink-deep); --fc-button-hover-border-color: var(--brand-pink-deep); --fc-button-active-bg-color: var(--brand-pink-deep); --fc-today-bg-color: color-mix(in srgb, var(--brand-pink) 10%, transparent); --fc-border-color: var(--line); --fc-page-bg-color: var(--surface); font-family: 'Nunito', sans-serif; } /* FullCalendar toolbar buttons — neutral pill look, the SINGLE shared source for BOTH calendars (volunteering `#app-calendar` + other-events `#oe-calendar`). Scoped to FullCalendar's own `.fc-toolbar` container (present on every calendar), which gives specificity (0,3,0) — enough to beat FC's `.fc .fc-button` / `.fc .fc-button-primary` (0,2,0) regardless of stylesheet load order, so NO !important is needed. Overrides the pink `--fc-button-*` vars set on `.fc` above. */ .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 16px; flex-wrap: wrap; gap: 10px; } .fc .fc-toolbar-title { font-family: 'Baloo 2', sans-serif; font-weight: 600; } .fc .fc-toolbar .fc-button-group { gap: 6px; } .fc .fc-toolbar .fc-button-group > .fc-button { margin: 0; } .fc .fc-toolbar .fc-button { background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-soft); border-radius: 12px; box-shadow: none; text-transform: none; font-weight: 700; font-size: 14px; padding: 7px 13px; transition: background .15s, color .15s, border-color .15s; } .fc .fc-toolbar .fc-button:hover { background: color-mix(in srgb, var(--brand-pink) 12%, transparent); border-color: var(--line); color: var(--ink); } .fc .fc-toolbar .fc-button:focus, .fc .fc-toolbar .fc-button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 28%, transparent); outline: none; } .fc .fc-toolbar .fc-button .fc-icon { font-size: 1.3em; vertical-align: -2px; } .fc .fc-toolbar .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-toolbar .fc-button-primary:not(:disabled):active { background: color-mix(in srgb, var(--brand-pink) 16%, transparent); border-color: color-mix(in srgb, var(--brand-pink) 38%, transparent); color: var(--brand-pink-deep); } .fc .fc-toolbar .fc-button-primary:disabled { background: var(--surface-2); border-color: var(--line); color: var(--muted); opacity: 1; } /* ---------------- Alerts (flash) ---------------- */ .alert2 { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 13px; font-size: 14.5px; font-weight: 600; margin-bottom: 18px; } /* The [hidden] attribute (used to toggle e.g. #addEventError via JS) must override the flex display above — an author rule beats the UA [hidden]{display:none}, so restore it. */ .alert2[hidden] { display: none; } .alert2 svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .alert2--ok { background: var(--approved-bg); color: var(--approved-fg); } .alert2--warn { background: var(--rejected-bg); color: var(--rejected-fg); } .alert2--info { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); color: var(--brand-blue-deep); } [data-theme="dark"] .alert2--info { color: #4fd0ee; } .empty { text-align: center; color: var(--muted); padding: 40px 16px; font-weight: 600; } .pager { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .pager .disabled { opacity: .4; pointer-events: none; } /* Numbered pager component () — first/last + windowed numbers + jump-to-page */ .pager2 { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 24px; } .pager2__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .pager2__btn, .pager2__num { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; height: 40px; padding: 0 13px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .pager2__btn--icon { padding: 0; } .pager2__btn svg, .pager2__num svg { width: 16px; height: 16px; } .pager2__btn:hover, .pager2__num:hover { background: color-mix(in srgb, var(--brand-pink) 12%, transparent); border-color: var(--line); color: var(--ink); } .pager2__num.is-current { background: linear-gradient(135deg, #e0509e, #c53c85); border-color: transparent; color: #fff; cursor: default; box-shadow: 0 6px 14px rgba(197,60,133,.28); } .pager2 .is-disabled { opacity: .4; pointer-events: none; } .pager2__gap { padding: 0 3px; color: var(--muted); font-weight: 800; align-self: flex-end; } .pager2__jump { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .pager2__jump label { font-size: 13px; font-weight: 700; color: var(--muted); } .pager2__jump-input { width: 76px; height: 38px; text-align: center; font: inherit; font-weight: 700; border: 1.5px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink); } .pager2__jump-input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 22%, transparent); } .pager2__summary { margin: 0; color: var(--muted); font-size: 12.5px; } /* Keep it compact on narrow screens: hide the non-current numbers, leave first/prev/next/last + jump */ @media (max-width: 560px) { .pager2__num:not(.is-current) { display: none; } .pager2__gap { display: none; } } .home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .footer2 { text-align: center; color: var(--muted); font-size: 12.5px; padding: 10px 0 34px; } /* ---------------- Mobile ---------------- */ @media (max-width: 900px) { .nav-toggle { display: grid; } .nav-wrap { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 6px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px clamp(14px,4vw,36px); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .2s ease, opacity .2s ease; } .nav-wrap.is-open { max-height: 80vh; overflow-y: auto; opacity: 1; pointer-events: auto; } .nav { flex-direction: column; flex-wrap: nowrap; } .nav a, .nav-link-btn { font-size: 16px; padding: 12px 14px; width: 100%; justify-content: flex-start; } .nav-dd { width: 100%; } .nav-dd .chev { display: none; } .has-pop .pop { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 6px 30px; min-width: 0; } .nav-pop a { font-size: 15px; } .top-actions { justify-content: space-between; margin-top: 6px; } .home-cols { grid-template-columns: 1fr; } .who { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .rcard:hover, .btn2:hover { transform: none; } } /* Rendered Markdown typography — shared by /dokumentacija and /changelog */ .doc-content { color: var(--ink); line-height: 1.65; font-size: 15px; } .doc-content h1 { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 27px; margin: 0 0 14px; color: var(--ink); } .doc-content h2 { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 20px; margin: 28px 0 10px; scroll-margin-top: 18px; color: var(--ink); } .doc-content h2 { padding-top: 6px; border-top: 1px solid var(--surface-2); } .doc-content h3 { font-weight: 800; font-size: 16px; margin: 20px 0 8px; color: var(--ink); } .doc-content p { margin: 0 0 12px; } .doc-content ul, .doc-content ol { margin: 0 0 12px; padding-left: 22px; } .doc-content li { margin: 4px 0; } .doc-content li > ul, .doc-content li > ol { margin: 4px 0; } .doc-content a { color: var(--brand-blue-deep); text-decoration: underline; text-underline-offset: 2px; } .doc-content strong { font-weight: 800; } .doc-content code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 13px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; } .doc-content pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow: auto; margin: 0 0 14px; } .doc-content pre code { background: none; border: none; padding: 0; font-size: 13px; } .doc-content blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 4px solid var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface)); border-radius: 0 10px 10px 0; color: var(--ink-soft); } .doc-content blockquote p:last-child { margin: 0; } .doc-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; } .doc-content th, .doc-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; } .doc-content th { background: var(--surface-2); font-weight: 800; } .doc-content hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; } .doc-content img { max-width: 100%; border-radius: 10px; } .doc-content kbd { background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-size: 12px; }