:root { --bg: #f5f7fb; --card-bg: #ffffff; --text: #111827; --muted: #4b5563; --primary: #2563eb; --primary-rgb: 37, 99, 235; --danger: #b00020; --success: #0b6b0b; --border: #d8dee9; --radius: 12px; --shadow: 0 8px 24px rgba(17, 24, 39, 0.08); } /* Theme presets (apply by adding class on ) */ .theme-blue { --bg: #f5f7fb; --card-bg: #ffffff; --text: #111827; --muted: #4b5563; --primary: #2563eb; --primary-rgb: 37, 99, 235; --border: #d8dee9; --shadow: 0 8px 24px rgba(17, 24, 39, 0.08); } .theme-green { --bg: #f4fbf6; --card-bg: #ffffff; --text: #0f172a; --muted: #475569; --primary: #16a34a; --primary-rgb: 22, 163, 74; --border: #d8e6dd; --shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .theme-dark { --bg: #0b1220; --card-bg: #0f172a; --text: #e5e7eb; --muted: #94a3b8; --primary: #3b82f6; --primary-rgb: 59, 130, 246; --danger: #fb7185; --success: #22c55e; --border: #1f2a3a; --shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: radial-gradient(900px 500px at 20% 0%, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0) 60%), radial-gradient(900px 500px at 90% 10%, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0) 55%), var(--bg); color: var(--text); line-height: 1.45; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .page { padding: 32px 18px; } .container { max-width: 980px; margin: 0 auto; } .container-md { max-width: 760px; } .container-sm { max-width: 440px; } .box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; overflow-x: auto; } .toplinks { margin: 0 0 14px 0; color: var(--muted); } /* Button-like links (Back/Add links etc.) */ .btn, a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font-weight: 650; text-decoration: none; cursor: pointer; } .btn:hover, a.btn:hover, button.btn:hover { text-decoration: none; border-color: rgba(var(--primary-rgb), 0.35); } .toplinks a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font-weight: 650; text-decoration: none; } .toplinks a:hover { text-decoration: none; border-color: rgba(var(--primary-rgb), 0.35); } .mb-14 { margin-bottom: 14px; } .ml-10 { margin-left: 10px; } h2 { margin: 0 0 12px 0; font-size: 22px; letter-spacing: 0.2px; } p { margin: 8px 0; } .app-form label { display: block; margin-top: 12px; font-weight: 600; } .app-form input, .app-form select, .app-form textarea { width: 100%; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); } .app-form textarea { min-height: 90px; resize: vertical; } .app-form input:focus, .app-form select:focus, .app-form textarea:focus { outline: 2px solid rgba(var(--primary-rgb), 0.2); border-color: rgba(var(--primary-rgb), 0.55); } .row { display: flex; gap: 12px; } .row > div { flex: 1; } /* Budżety: drobne dopasowania layoutu bez wpływu na resztę formularzy */ .budget-page .toplinks { display: flex; flex-wrap: wrap; gap: 8px; } .budget-page .box { border-left: 4px solid rgba(var(--primary-rgb), 0.25); } .budget-page .row { flex-wrap: wrap; } @media (max-width: 720px) { .budget-page .row { flex-direction: column; } } .app-form button { margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(0,0,0,0); border-radius: 10px; background: var(--primary); color: #fff; font-weight: 650; cursor: pointer; } .app-form button:hover { filter: brightness(0.95); } .err { color: var(--danger); } .ok { color: var(--success); } .err ul { margin: 8px 0 0 18px; padding: 0; } .header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px 0; } .header .meta { color: var(--muted); } ul.nav { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } ul.nav a { display: block; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; } ul.nav a:hover { text-decoration: none; border-color: rgba(var(--primary-rgb), 0.35); } /* Dashboard tiles (index) */ .tiles { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } } .tile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); } .tile:hover { text-decoration: none; border-color: rgba(var(--primary-rgb), 0.35); background: rgba(var(--primary-rgb), 0.03); } .tile-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--primary-rgb), 0.08); color: var(--primary); flex: 0 0 auto; } .tile-ico svg { width: 18px; height: 18px; display: block; } .tile-label { font-weight: 750; letter-spacing: 0.1px; color: var(--text); font-size: 14px; } /* phpGrid/jqGrid (scoped) */ .box .ui-jqgrid, .box .ui-jqgrid * { font-family: inherit; } .box .ui-jqgrid { border: 1px solid var(--border) !important; border-radius: 10px; overflow: hidden; } .box .ui-jqgrid .ui-jqgrid-titlebar { background: var(--card-bg); border-bottom: 1px solid var(--border); color: var(--text); } .box .ui-jqgrid .ui-jqgrid-title { font-weight: 700; } .box .ui-jqgrid .ui-jqgrid-hdiv { background: var(--card-bg); border-bottom: 1px solid var(--border); } .box .ui-jqgrid .ui-jqgrid-htable th { background: var(--card-bg); color: var(--muted); font-weight: 700; } .box .ui-jqgrid .ui-jqgrid-bdiv { background: var(--card-bg); } .box .ui-jqgrid .ui-jqgrid-btable tr.jqgrow td { border-color: var(--border) !important; } .box .ui-jqgrid .ui-state-hover { background: rgba(var(--primary-rgb), 0.06) !important; border-color: rgba(var(--primary-rgb), 0.25) !important; } .box .ui-jqgrid .ui-jqgrid-pager { background: var(--card-bg); border-top: 1px solid var(--border); } .box .ui-jqgrid .ui-pg-input, .box .ui-jqgrid .ui-pg-selbox { border: 1px solid var(--border) !important; border-radius: 8px; } .box .ui-jqgrid .ui-jqdialog, .box .ui-jqgrid .ui-jqdialog-content, .box .ui-jqgrid .ui-jqdialog .ui-jqdialog-titlebar { font-family: inherit; } /* Admin/user management */ .table { width: 100%; border-collapse: collapse; background: var(--card-bg); } .table th, .table td { border-bottom: 1px solid var(--border); padding: 10px 8px; text-align: left; vertical-align: top; } .table th { color: var(--muted); font-weight: 800; background: var(--card-bg); } .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; } .scope-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; } .scope-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card-bg); } /* Theme picker (inline in headers) */ .theme-picker { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; } .theme-picker label { font-weight: 650; color: var(--muted); } .theme-picker select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font-weight: 650; } .scope-title { font-weight: 800; margin: 0 0 8px 0; } .checklist { display: grid; grid-template-columns: 1fr; gap: 6px; } .checklist label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; } .checklist input[type="checkbox"] { width: 16px; height: 16px; }