1.4.7

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "app-ts",
-  "version": "1.3.3",
+  "version": "1.4.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "app-ts",
-      "version": "1.3.3",
+      "version": "1.4.7",
       "license": "ISC",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
@@ -2089,9 +2089,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.4",
+      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^4.0.2"
@@ -3086,9 +3086,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/fastify": {
-      "version": "5.8.2",
+      "version": "5.8.4",
-      "resolved": "https://registry.npmjs.org/fastify/-/fastify-5.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/fastify/-/fastify-5.8.4.tgz",
-      "integrity": "sha512-lZmt3navvZG915IE+f7/TIVamxIwmBd+OMB+O9WBzcpIwOo6F0LTh0sluoMFk5VkrKTvvrwIaoJPkir4Z+jtAg==",
+      "integrity": "sha512-sa42J1xylbBAYUWALSBoyXKPDUvM3OoNOibIefA+Oha57FryXKKCZarA1iDntOCWp3O35voZLuDg2mdODXtPzQ==",
       "funding": [
         {
           "type": "github",
@@ -4282,9 +4282,9 @@
       "license": "MIT"
     },
     "node_modules/nodemailer": {
-      "version": "8.0.2",
+      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.4.tgz",
-      "integrity": "sha512-zbj002pZAIkWQFxyAaqoxvn+zoIwRnS40hgjqTXudKOOJkiFFgBeNqjgD3/YCR12sZnrghWYBY+yP1ZucdDRpw==",
+      "integrity": "sha512-k+jf6N8PfQJ0Fe8ZhJlgqU5qJU44Lpvp2yvidH3vp1lPnVQMgi4yEEMPXg5eJS1gFIJTVq1NHBk7Ia9ARdSBdQ==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -4540,9 +4540,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "1.3.3",
+  "version": "1.4.7",
   "description": "",
   "main": "dist/server.js",
   "scripts": {

src/admin/AdminApp.tsx

@@ -7,7 +7,18 @@ import AdminLayout from "./components/AdminLayout";
 import AlertContainer from "./components/AlertContainer";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
-import "./admin.css";
+import "./variables.css";
+import "./base.css";
+import "./forms.css";
+import "./buttons.css";
+import "./layout.css";
+import "./components.css";
+import "./tables.css";
+import "./skeleton.css";
+import "./datepicker.css";
+import "./filemanager.css";
+import "./pagination.css";
+import "./responsive.css";
 import "./login.css";
 import "./dashboard.css";
 import "./attendance.css";

src/admin/base.css

@@ -0,0 +1,420 @@
+/* ============================================================================
+   Reset & Base
+   ============================================================================ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+  min-height: 100dvh;
+  max-width: 100vw;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  overflow-x: hidden;
+  overscroll-behavior-x: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.admin-sidebar,
+.admin-header,
+.admin-card,
+.admin-modal {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+#root {
+  overflow-x: hidden;
+  touch-action: pan-y pinch-zoom;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+h1 {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+}
+h2 {
+  font-size: clamp(2rem, 4vw, 3rem);
+}
+h3 {
+  font-size: clamp(1.25rem, 2vw, 1.5rem);
+}
+
+p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+::selection {
+  background: var(--accent-color);
+  color: #fff;
+}
+
+/* ============================================================================
+   Base / Utilities
+   ============================================================================ */
+
+.text-warning {
+  color: var(--warning) !important;
+}
+
+.text-danger {
+  color: var(--danger) !important;
+}
+
+.text-success {
+  color: var(--success) !important;
+}
+
+.text-muted {
+  color: var(--text-muted) !important;
+}
+
+.text-secondary {
+  color: var(--text-secondary) !important;
+}
+
+.text-tertiary {
+  color: var(--text-tertiary) !important;
+}
+
+.text-accent {
+  color: var(--accent-color) !important;
+}
+
+.fw-600 {
+  font-weight: 600 !important;
+}
+
+.link-accent {
+  color: var(--accent-color);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.link-accent:hover {
+  text-decoration: underline;
+}
+
+/* Layout utilities */
+.flex-1 {
+  flex: 1;
+}
+.flex-row {
+  display: flex;
+  align-items: center;
+}
+.flex-row-gap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Spacing utilities */
+.mb-2 {
+  margin-bottom: var(--space-2);
+}
+.mb-4 {
+  margin-bottom: var(--space-4);
+}
+.mb-6 {
+  margin-bottom: var(--space-6);
+}
+.mt-2 {
+  margin-top: var(--space-2);
+}
+.mt-6 {
+  margin-top: var(--space-6);
+}
+.gap-2 {
+  gap: var(--space-2);
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-5 {
+  gap: var(--space-5);
+}
+
+/* Typography utilities */
+.fw-500 {
+  font-weight: 500;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+
+/* Spinner variant */
+.admin-spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+/* Monospace for data values (times, dates, numbers, IDs) */
+.admin-mono {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  letter-spacing: -0.01em;
+}
+
+/* Drag handle */
+.admin-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: grab;
+  border-radius: 4px;
+  padding: 0;
+  transition:
+    color 0.15s,
+    background 0.15s;
+  touch-action: none;
+}
+
+.admin-drag-handle:hover {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+.admin-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Error stack (DEV only) */
+.admin-error-stack {
+  max-width: 600px;
+  max-height: 200px;
+  overflow: auto;
+  padding: 0.75rem 1rem;
+  margin: 0;
+  border-radius: var(--border-radius-sm);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--danger-color);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Keyboard shortcut badge */
+.admin-kbd {
+  display: inline-block;
+  padding: 2px 7px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.4;
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  white-space: nowrap;
+}
+
+/* Loading & Animations */
+.admin-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--accent-color);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.admin-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 256px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(30px, -30px);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* ── Additional Utilities ─────────────────────────────────────────── */
+
+/* Font sizes */
+.text-xs {
+  font-size: 0.75rem;
+}
+.text-sm {
+  font-size: 0.8125rem;
+}
+.text-md {
+  font-size: 0.875rem;
+}
+.text-base {
+  font-size: 1rem;
+}
+
+/* Width utilities */
+.w-full {
+  width: 100%;
+}
+.max-w-xs {
+  max-width: 120px;
+}
+.max-w-sm {
+  max-width: 200px;
+}
+
+/* Whitespace */
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+/* Additional gaps */
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-3 {
+  gap: 0.75rem;
+}
+.gap-6 {
+  gap: 1.5rem;
+}
+
+/* Additional margins */
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+/* Display */
+.inline-flex {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Prefers reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .admin-spinner {
+    animation-duration: 0.8s !important;
+    animation-iteration-count: infinite !important;
+  }
+}

src/admin/buttons.css

@@ -0,0 +1,130 @@
+/* ============================================================================
+   Buttons
+   ============================================================================ */
+
+.admin-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 8px 14px;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  font-size: 13px;
+  font-weight: 550;
+  font-family: inherit;
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+}
+
+.admin-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+/* Prevent buttons from growing when text changes to spinner + loading text */
+.admin-modal-footer .admin-btn {
+  min-width: 100px;
+}
+.admin-modal-footer .admin-btn .admin-spinner {
+  margin: -2px 0;
+}
+
+.admin-btn-sm {
+  padding: 6px 11px;
+  font-size: 12px;
+}
+
+.admin-btn-primary {
+  background: var(--accent-color);
+  color: #fff;
+}
+
+.admin-btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3);
+}
+
+.admin-btn .admin-spinner {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.admin-btn-primary .admin-spinner {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+}
+
+.admin-btn-secondary .admin-spinner {
+  border-color: rgba(var(--text-secondary-rgb, 107, 114, 128), 0.3);
+  border-top-color: var(--text-secondary);
+}
+
+.admin-btn-secondary {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+.admin-btn-secondary:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  border-color: var(--border-color-hover);
+  color: var(--text-primary);
+}
+
+.admin-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.admin-btn-icon:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.admin-btn-icon.accent {
+  color: var(--info);
+}
+
+.admin-btn-icon.accent:hover {
+  background: color-mix(in srgb, var(--info) 15%, transparent);
+  color: var(--info);
+}
+
+.admin-btn-icon.danger {
+  color: var(--danger);
+}
+
+.admin-btn-icon.danger:hover {
+  background: var(--danger-light);
+}
+
+/* Touch targets - min 44px on mobile */
+@media (max-width: 768px) {
+  .admin-btn {
+    min-height: 44px;
+    padding: 10px 16px;
+  }
+
+  .admin-btn-sm {
+    min-height: 36px;
+  }
+
+  .admin-btn-icon {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}

src/admin/components.css

@@ -0,0 +1,925 @@
+/* ============================================================================
+   Cards
+   ============================================================================ */
+
+.admin-card {
+  background: var(--card-bg);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.admin-card:last-child {
+  margin-bottom: 0;
+}
+
+.admin-card-header {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.admin-card-title {
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+}
+
+.admin-card-body {
+  padding: 18px;
+}
+
+@media (max-width: 480px) {
+  .admin-card-body {
+    padding: 12px;
+  }
+
+  .admin-card-header {
+    padding: 12px;
+  }
+}
+
+/* ============================================================================
+   Badges
+   ============================================================================ */
+
+.admin-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 3px 9px;
+  border-radius: 9999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  border: none;
+  font-family: inherit;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.admin-badge-wrap {
+  white-space: normal;
+  word-break: break-word;
+  border-radius: var(--border-radius-sm);
+  text-align: left;
+}
+
+.admin-badge-admin {
+  background: var(--accent-soft);
+  color: var(--accent-color);
+}
+
+.admin-badge-viewer {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.admin-badge-active {
+  background: var(--success-soft);
+  color: var(--success);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.admin-badge-active:hover {
+  background: color-mix(in srgb, var(--success) 20%, transparent);
+}
+
+.admin-badge-inactive {
+  background: var(--danger-soft);
+  color: var(--danger);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.admin-badge-inactive:hover {
+  background: color-mix(in srgb, var(--danger) 20%, transparent);
+}
+
+.admin-badge-success {
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.admin-badge-warning {
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+
+.admin-badge-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+
+.admin-badge-info {
+  background: var(--info-soft);
+  color: var(--info);
+}
+
+.admin-badge-danger {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+/* Status Badges - Leave Requests */
+.badge-pending {
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  color: var(--warning);
+}
+.badge-approved {
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
+}
+.badge-rejected {
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
+}
+.badge-cancelled {
+  background: var(--muted-light);
+  color: var(--muted);
+}
+
+/* Status Badges - Orders */
+.admin-badge-order-prijata {
+  background: color-mix(in srgb, var(--info) 15%, transparent);
+  color: var(--info);
+}
+.admin-badge-order-realizace {
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  color: var(--warning);
+}
+.admin-badge-order-dokoncena {
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
+}
+.admin-badge-order-stornovana {
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
+}
+
+/* Status Badges - Projects */
+.admin-badge-project-aktivni {
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
+}
+.admin-badge-project-dokonceny {
+  background: color-mix(in srgb, var(--info) 15%, transparent);
+  color: var(--info);
+}
+.admin-badge-project-zruseny {
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
+}
+
+/* Badge on mobile - larger for touch */
+@media (max-width: 768px) {
+  .admin-badge {
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+
+  button.admin-badge {
+    min-height: 32px;
+  }
+}
+
+/* ============================================================================
+   Modals
+   ============================================================================ */
+
+.admin-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: none;
+}
+
+.admin-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  touch-action: none;
+}
+
+.admin-modal {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  max-height: calc(100vh - 2rem);
+  max-height: calc(100dvh - 2rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  touch-action: auto;
+}
+
+.admin-modal-lg {
+  max-width: 900px;
+}
+
+.admin-modal-header {
+  padding: 18px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.admin-modal-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.admin-modal-body {
+  padding: 18px;
+  overflow-y: auto;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  background: var(--bg-primary);
+}
+
+.admin-modal-footer {
+  padding: 14px 18px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .admin-modal-overlay {
+    padding: 0;
+  }
+
+  .admin-modal,
+  .admin-modal.admin-modal-lg {
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    height: 100dvh;
+    max-height: 100%;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: none;
+  }
+
+  .admin-modal-header {
+    padding: 1rem;
+    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
+  }
+
+  .admin-modal-body {
+    padding: 1rem;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .admin-modal-footer {
+    padding: 1rem;
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  .admin-modal .admin-form-input,
+  .admin-modal .admin-form-select,
+  .admin-modal .admin-form-textarea {
+    max-width: 100%;
+  }
+}
+
+/* Confirm Modal */
+.admin-confirm-modal {
+  max-width: 400px;
+}
+
+.admin-confirm-content {
+  text-align: center;
+  padding: 2rem 1.5rem;
+}
+
+.admin-confirm-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.25rem;
+}
+
+.admin-confirm-icon-danger {
+  background: var(--danger-light);
+  color: var(--danger);
+}
+
+.admin-confirm-icon-warning {
+  background: var(--warning-light);
+  color: var(--warning);
+}
+
+.admin-confirm-icon-info {
+  background: var(--info-light);
+  color: var(--info);
+}
+
+.admin-confirm-icon-default {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.admin-confirm-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.admin-confirm-message {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .admin-confirm-modal {
+    max-width: 100%;
+    height: auto;
+    max-height: calc(100% - 2rem);
+    max-height: calc(100dvh - 2rem);
+    margin: 1rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+  }
+
+  .admin-confirm-modal .admin-modal-footer {
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Confirm modal on small mobile */
+@media (max-width: 480px) {
+  .admin-confirm-content {
+    padding: 1.5rem 1rem;
+  }
+
+  .admin-confirm-title {
+    font-size: 1.1rem;
+  }
+
+  .admin-confirm-message {
+    font-size: 0.875rem;
+  }
+}
+
+/* ============================================================================
+   Toast Alerts
+   ============================================================================ */
+
+.admin-alert-container {
+  position: fixed;
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  right: 1rem;
+  z-index: 100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+  max-width: 400px;
+  width: calc(100% - 2rem);
+  pointer-events: none;
+  transform: translateZ(0);
+}
+
+@media (min-width: 640px) {
+  .admin-alert-container {
+    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
+    right: 1.5rem;
+  }
+}
+
+.admin-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-radius: var(--border-radius-sm);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+}
+
+.admin-toast-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.admin-toast-message {
+  flex: 1;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.admin-toast-close {
+  flex-shrink: 0;
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  transition: var(--transition);
+}
+
+.admin-toast-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.admin-toast-success .admin-toast-icon {
+  color: var(--success);
+}
+.admin-toast-error .admin-toast-icon {
+  color: var(--danger);
+}
+.admin-toast-warning .admin-toast-icon {
+  color: var(--warning);
+}
+.admin-toast-info .admin-toast-icon {
+  color: var(--info);
+}
+
+/* ============================================================================
+   Tabs (Global)
+   ============================================================================ */
+
+.admin-tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.625rem;
+}
+
+.admin-tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease,
+    box-shadow 0.2s ease;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.admin-tab:hover {
+  color: var(--text-primary);
+}
+
+.admin-tab.active {
+  color: var(--text-primary);
+  font-weight: 600;
+  background: var(--bg-secondary);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 0 0 1px var(--border-color);
+}
+
+/* ============================================================================
+   Empty State
+   ============================================================================ */
+
+.admin-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--text-secondary);
+}
+
+.admin-empty-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+}
+
+.admin-empty-state p {
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+  max-width: 320px;
+}
+
+.admin-role-locked-notice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--warning-light);
+  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
+  border-radius: 0.5rem;
+  color: var(--warning);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+/* ============================================================================
+   Forbidden (403)
+   ============================================================================ */
+
+.forbidden-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+  padding: 2rem;
+}
+
+.forbidden-icon {
+  color: var(--accent-color);
+  margin-bottom: 1.5rem;
+  opacity: 0.8;
+}
+
+.forbidden-title {
+  font-family: var(--font-heading);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 0.75rem;
+}
+
+.forbidden-text {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  max-width: 400px;
+  line-height: 1.6;
+  margin: 0 0 2rem;
+}
+
+.forbidden-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--accent-color);
+  color: #fff;
+  border-radius: var(--border-radius-sm);
+  text-decoration: none;
+  font-weight: 600;
+  transition: var(--transition);
+}
+
+.forbidden-link:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+/* ============================================================================
+   Stat Cards
+   ============================================================================ */
+
+.admin-stat-card {
+  position: relative;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  border-radius: var(--border-radius);
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.admin-stat-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--accent-color);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.admin-stat-card.success::before {
+  background: var(--success);
+}
+.admin-stat-card.warning::before {
+  background: var(--warning);
+}
+.admin-stat-card.danger::before {
+  background: var(--danger);
+}
+.admin-stat-card.info::before {
+  background: var(--info);
+}
+
+.admin-stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-sm);
+  background: var(--accent-soft);
+  color: var(--accent-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.admin-stat-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.admin-stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.admin-stat-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.admin-stat-footer {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.admin-stat-icon.danger {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.admin-stat-icon.info {
+  background: var(--info-soft);
+  color: var(--info);
+}
+.admin-stat-icon.success {
+  background: var(--success-soft);
+  color: var(--success);
+}
+.admin-stat-icon.warning {
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+
+/* ============================================================================
+   KPI Grid
+   ============================================================================ */
+
+.admin-kpi-grid {
+  display: grid;
+  gap: 0.875rem;
+}
+
+.admin-kpi-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.admin-kpi-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.admin-kpi-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.admin-kpi-1 {
+  grid-template-columns: 1fr;
+  max-width: 320px;
+}
+
+@media (max-width: 1024px) {
+  .admin-kpi-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .admin-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .admin-kpi-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ============================================================================
+   Editor Section Cards
+   ============================================================================ */
+
+.admin-editor-section {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .admin-editor-section {
+    padding: 1rem;
+  }
+}
+
+/* ============================================================================
+   Totals Summary
+   ============================================================================ */
+
+.admin-totals-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.admin-totals-row {
+  display: flex;
+  gap: 2rem;
+  justify-content: flex-end;
+  min-width: 250px;
+  padding: 0.25rem 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.admin-totals-row span:last-child {
+  min-width: 100px;
+  text-align: right;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.admin-totals-total {
+  border-top: 2px solid var(--text-primary);
+  margin-top: 0.25rem;
+  padding-top: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.admin-totals-total span:last-child {
+  font-weight: 700;
+}
+
+@media (max-width: 640px) {
+  .admin-totals-summary {
+    align-items: stretch;
+  }
+
+  .admin-totals-row {
+    min-width: unset;
+  }
+}
+
+/* ============================================================================
+   Scope Sections
+   ============================================================================ */
+
+.admin-scope-list {
+  margin-top: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.admin-scope-section {
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  overflow: visible;
+  transition: border-color var(--transition);
+  background: var(--bg-primary);
+}
+
+.admin-scope-content {
+  overflow: hidden;
+}
+
+.admin-scope-section:hover {
+  border-color: color-mix(
+    in srgb,
+    var(--border-color) 70%,
+    var(--accent-color)
+  );
+}
+
+.admin-scope-section-header {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 1rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 0.5rem 0.5rem 0 0;
+  gap: 0.5rem;
+}
+
+.admin-scope-section-header .admin-scope-number {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+  min-width: 1.25rem;
+}
+
+.admin-scope-section-header .admin-scope-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.admin-scope-section-header .admin-scope-actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.admin-scope-section .admin-form {
+  padding: 1rem;
+}
+
+/* ============================================================================
+   Logo Section
+   ============================================================================ */
+
+.admin-logo-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.admin-logo-preview {
+  max-width: 200px;
+  max-height: 100px;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  background: #fff;
+}
+
+.admin-logo-preview img {
+  max-width: 100%;
+  max-height: 80px;
+  object-fit: contain;
+}

src/admin/components/RichEditor.tsx

@@ -161,7 +161,7 @@ export default function RichEditor({
 
   return (
     <div
-      className="rich-editor"
+      className="admin-rich-editor"
       style={{ "--re-min-height": minHeight } as React.CSSProperties}
     >
       <ReactQuill

src/admin/components/dashboard/DashKpiCards.tsx

@@ -109,10 +109,10 @@ function buildInvoiceKpi(invoices: InvoicesData): KpiCard {
 }
 
 const KPI_CLASS_MAP: Record<number, string> = {
-  4: "dash-kpi-4",
+  4: "admin-kpi-4",
-  3: "dash-kpi-3",
+  3: "admin-kpi-3",
-  2: "dash-kpi-2",
+  2: "admin-kpi-2",
-  1: "dash-kpi-1",
+  1: "admin-kpi-1",
 };
 
 export default function DashKpiCards({ dashData }: DashKpiCardsProps) {
@@ -121,11 +121,11 @@ export default function DashKpiCards({ dashData }: DashKpiCardsProps) {
     return null;
   }
 
-  const kpiClass = KPI_CLASS_MAP[Math.min(kpiCards.length, 4)] || "dash-kpi-4";
+  const kpiClass = KPI_CLASS_MAP[Math.min(kpiCards.length, 4)] || "admin-kpi-4";
 
   return (
     <motion.div
-      className={`dash-kpi-grid ${kpiClass}`}
+      className={`admin-kpi-grid ${kpiClass}`}
       initial={{ opacity: 0, y: 12 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.25, delay: 0.06 }}

src/admin/components/dashboard/DashSessions.tsx

@@ -218,17 +218,17 @@ export default function DashSessions() {
             </div>
           )}
           {!sessionsLoading && sessions.length > 0 && (
-            <div className="sessions-list">
+            <div className="dash-sessions-list">
               {sessions.map((session) => (
                 <div
                   key={session.id}
-                  className={`session-item ${session.is_current ? "session-item-current" : ""}`}
+                  className={`dash-session-item ${session.is_current ? "dash-session-item-current" : ""}`}
                 >
-                  <div className="session-icon">
+                  <div className="dash-session-icon">
                     {getDeviceIcon(session.device_info?.icon)}
                   </div>
-                  <div className="session-info">
+                  <div className="dash-session-info">
-                    <div className="session-device">
+                    <div className="dash-session-device">
                       {session.device_info?.browser} na{" "}
                       {session.device_info?.os}
                       {session.is_current && (
@@ -240,13 +240,13 @@ export default function DashSessions() {
                         </span>
                       )}
                     </div>
-                    <div className="session-meta">
+                    <div className="dash-session-meta">
                       <span>{session.ip_address}</span>
-                      <span className="session-meta-separator">|</span>
+                      <span className="dash-session-meta-separator">|</span>
                       <span>{formatSessionDate(session.created_at)}</span>
                     </div>
                   </div>
-                  <div className="session-actions">
+                  <div className="dash-session-actions">
                     {!session.is_current && (
                       <button
                         onClick={() =>

src/admin/dashboard.css

@@ -1,103 +1,3 @@
-/* ============================================================================
-   Stat Cards
-   ============================================================================ */
-
-.admin-stat-card {
-  position: relative;
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  border-radius: var(--border-radius);
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  overflow: hidden;
-}
-
-.admin-stat-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--accent-color);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-}
-
-.admin-stat-card.success::before {
-  background: var(--success);
-}
-.admin-stat-card.warning::before {
-  background: var(--warning);
-}
-.admin-stat-card.danger::before {
-  background: var(--danger);
-}
-.admin-stat-card.info::before {
-  background: var(--info);
-}
-
-.admin-stat-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--border-radius-sm);
-  background: var(--accent-soft);
-  color: var(--accent-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.admin-stat-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.admin-stat-value {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-}
-
-.admin-stat-label {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.admin-stat-footer {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.admin-stat-icon.danger {
-  background: var(--danger-soft);
-  color: var(--danger);
-}
-.admin-stat-icon.info {
-  background: var(--info-soft);
-  color: var(--info);
-}
-.admin-stat-icon.success {
-  background: var(--success-soft);
-  color: var(--success);
-}
-.admin-stat-icon.warning {
-  background: var(--warning-soft);
-  color: var(--warning);
-}
-
 /* ============================================================================
    Dashboard
    ============================================================================ */
@@ -113,26 +13,6 @@
   margin-bottom: 0;
 }
 
-/* KPI grid */
-.dash-kpi-grid {
-  display: grid;
-  gap: 0.875rem;
-}
-
-.dash-kpi-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-.dash-kpi-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-.dash-kpi-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-.dash-kpi-1 {
-  grid-template-columns: 1fr;
-  max-width: 320px;
-}
-
 /* Quick actions */
 .dash-quick-actions {
   display: grid;
@@ -512,16 +392,9 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
-
-  .dash-kpi-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
 }
 
 @media (max-width: 768px) {
-  .dash-kpi-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
   .dash-quick-actions {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -543,9 +416,6 @@
   .dash-quick-actions {
     grid-template-columns: 1fr 1fr;
   }
-  .dash-kpi-grid {
-    grid-template-columns: 1fr;
-  }
   .dash-profile-grid {
     grid-template-columns: 1fr;
   }
@@ -555,12 +425,12 @@
    Sessions / Devices
    ============================================================================ */
 
-.sessions-list {
+.dash-sessions-list {
   display: flex;
   flex-direction: column;
 }
 
-.session-item {
+.dash-session-item {
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -569,23 +439,23 @@
   transition: var(--transition);
 }
 
-.session-item:last-child {
+.dash-session-item:last-child {
   border-bottom: none;
 }
 
-.session-item:hover {
+.dash-session-item:hover {
   background: var(--bg-tertiary);
 }
 
-.session-item-current {
+.dash-session-item-current {
   background: var(--row-current);
 }
 
-.session-item-current:hover {
+.dash-session-item-current:hover {
   background: var(--row-current-hover);
 }
 
-.session-icon {
+.dash-session-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--border-radius-sm);
@@ -597,17 +467,17 @@
   flex-shrink: 0;
 }
 
-.session-item-current .session-icon {
+.dash-session-item-current .dash-session-icon {
   background: color-mix(in srgb, var(--success) 15%, transparent);
   color: var(--success);
 }
 
-.session-info {
+.dash-session-info {
   flex: 1;
   min-width: 0;
 }
 
-.session-device {
+.dash-session-device {
   font-weight: 500;
   color: var(--text-primary);
   display: flex;
@@ -616,7 +486,7 @@
   gap: 0.25rem;
 }
 
-.session-meta {
+.dash-session-meta {
   font-size: 0.8125rem;
   color: var(--text-muted);
   margin-top: 0.25rem;
@@ -626,30 +496,30 @@
   gap: 0.5rem;
 }
 
-.session-meta-separator {
+.dash-session-meta-separator {
   color: var(--border-color);
 }
 
-.session-actions {
+.dash-session-actions {
   flex-shrink: 0;
 }
 
 @media (max-width: 640px) {
-  .session-item {
+  .dash-session-item {
     padding: 1rem;
     gap: 0.75rem;
   }
 
-  .session-icon {
+  .dash-session-icon {
     width: 36px;
     height: 36px;
   }
 
-  .session-device {
+  .dash-session-device {
     font-size: 0.875rem;
   }
 
-  .session-meta {
+  .dash-session-meta {
     font-size: 0.75rem;
   }
 }

src/admin/datepicker.css

@@ -0,0 +1,199 @@
+/* ============================================================================
+   React DatePicker Overrides
+   ============================================================================ */
+
+.react-datepicker-wrapper {
+  width: 100%;
+}
+
+.react-datepicker-popper {
+  z-index: 100 !important;
+}
+
+/* Prevent flash at top-left before popper calculates position */
+#datepicker-portal .react-datepicker-popper {
+  opacity: 0;
+  animation: dp-fade-in 0.01s forwards 0.02s;
+}
+
+@keyframes dp-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+.react-datepicker {
+  font-family: inherit !important;
+  background-color: var(--bg-secondary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--border-radius-sm) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
+  color: var(--text-primary) !important;
+  font-size: 0.875rem !important;
+}
+
+.react-datepicker__triangle {
+  display: none !important;
+}
+
+/* Header */
+.react-datepicker__header {
+  background-color: var(--bg-tertiary) !important;
+  border-bottom: 1px solid var(--border-color) !important;
+  padding-top: 0.75rem !important;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header {
+  color: var(--text-primary) !important;
+  font-weight: 600 !important;
+}
+
+.react-datepicker__day-name {
+  color: var(--text-secondary) !important;
+}
+
+/* Days */
+.react-datepicker__day {
+  color: var(--text-primary) !important;
+  border-radius: 6px !important;
+  transition:
+    background 0.15s,
+    color 0.15s !important;
+}
+
+.react-datepicker__day:hover {
+  background-color: var(--accent-light) !important;
+  color: var(--text-primary) !important;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected {
+  background-color: var(--accent-color) !important;
+  color: #fff !important;
+}
+
+.react-datepicker__day--today {
+  font-weight: 700 !important;
+}
+
+.react-datepicker__day--outside-month {
+  color: var(--text-muted) !important;
+  opacity: 0.5;
+}
+
+.react-datepicker__day--disabled {
+  color: var(--text-muted) !important;
+  opacity: 0.3 !important;
+}
+
+/* Navigation arrows */
+.react-datepicker__navigation {
+  top: 0.75rem !important;
+}
+
+.react-datepicker__navigation-icon::before {
+  border-color: var(--text-secondary) !important;
+}
+
+.react-datepicker__navigation:hover *::before {
+  border-color: var(--accent-color) !important;
+}
+
+/* Year dropdown */
+.react-datepicker__year-dropdown,
+.react-datepicker__month-dropdown,
+.react-datepicker__year-read-view,
+.react-datepicker__month-read-view {
+  color: var(--text-primary) !important;
+}
+
+/* Time picker */
+.react-datepicker__time-container {
+  border-left: 1px solid var(--border-color) !important;
+}
+
+.react-datepicker__time-container .react-datepicker__time {
+  background-color: var(--bg-secondary) !important;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box {
+  width: 100% !important;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item {
+  color: var(--text-primary) !important;
+  transition: background 0.15s !important;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item:hover {
+  background-color: var(--accent-light) !important;
+  color: var(--text-primary) !important;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item--selected {
+  background-color: var(--accent-color) !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+/* Month picker */
+.react-datepicker__monthPicker {
+  background-color: var(--bg-secondary) !important;
+}
+
+.react-datepicker-year-header {
+  background-color: var(--bg-tertiary) !important;
+  color: var(--text-primary) !important;
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+.react-datepicker__month-wrapper {
+  background-color: var(--bg-secondary) !important;
+}
+
+.react-datepicker__month-text {
+  color: var(--text-primary) !important;
+  padding: 0.5rem !important;
+  border-radius: 6px !important;
+  transition: background 0.15s !important;
+  background-color: transparent !important;
+}
+
+.react-datepicker__month-text:hover {
+  background-color: var(--accent-light) !important;
+  color: var(--text-primary) !important;
+}
+
+.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__month-text--selected {
+  background-color: var(--accent-color) !important;
+  color: #fff !important;
+}
+
+.react-datepicker__month-text--today {
+  font-weight: 700 !important;
+}
+
+/* Input */
+.react-datepicker__input-container input {
+  cursor: pointer;
+}
+
+.react-datepicker__close-icon::after {
+  background-color: var(--accent-color) !important;
+}

src/admin/filemanager.css

@@ -0,0 +1,171 @@
+/* ============================================================================
+   File Manager
+   ============================================================================ */
+
+.fm-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.fm-full-path {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-tertiary);
+  user-select: all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.fm-toolbar-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.fm-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  font-size: 12px;
+  min-height: 28px;
+}
+
+.fm-breadcrumb-segment {
+  display: inline-flex;
+  align-items: center;
+}
+
+.fm-breadcrumb-sep {
+  color: var(--text-tertiary);
+  margin: 0 4px;
+  user-select: none;
+}
+
+.fm-breadcrumb-btn {
+  background: none;
+  border: none;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  transition: all 0.15s ease;
+}
+
+.fm-breadcrumb-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.fm-breadcrumb-btn.active {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.fm-new-folder {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.fm-new-folder .admin-form-input {
+  max-width: 250px;
+}
+
+.fm-content {
+  position: relative;
+  border-radius: var(--border-radius-sm);
+  transition: border-color 0.2s ease;
+}
+
+.fm-content.fm-drag-over {
+  border: 2px dashed var(--accent-color);
+  background: var(--accent-light);
+}
+
+.fm-dropzone-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
+  border-radius: var(--border-radius-sm);
+  z-index: 5;
+  color: var(--accent-color);
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+.fm-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+.fm-folder-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--accent-color);
+  font-weight: 500;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.fm-folder-link:hover {
+  text-decoration: underline;
+}
+
+.fm-item-count {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-weight: 400;
+}
+
+.fm-file-name {
+  color: var(--text-primary);
+}
+
+.fm-meta {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.fm-actions {
+  display: inline-flex;
+  gap: 2px;
+  justify-content: flex-end;
+}
+
+.fm-name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fm-symlink-badge {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  cursor: help;
+}

src/admin/forms.css

@@ -0,0 +1,488 @@
+/* ============================================================================
+   Forms
+   ============================================================================ */
+
+.admin-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.admin-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.admin-form-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.admin-form-input {
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition:
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-sizing: border-box;
+  min-height: 36px;
+}
+
+.admin-form-input:focus {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.admin-form-input::placeholder {
+  color: var(--text-muted);
+}
+
+.admin-form-input[type="date"],
+.admin-form-input[type="time"],
+.admin-form-input[type="month"],
+.admin-form-input[type="number"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: left;
+  height: 36px;
+  max-width: 100%;
+}
+
+.admin-form-input[type="number"]::-webkit-inner-spin-button,
+.admin-form-input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.admin-form-input[type="date"]::-webkit-date-and-time-value,
+.admin-form-input[type="time"]::-webkit-date-and-time-value,
+.admin-form-input[type="month"]::-webkit-date-and-time-value {
+  text-align: left;
+  margin: 0;
+}
+
+.admin-form-input[type="date"]::-webkit-datetime-edit,
+.admin-form-input[type="time"]::-webkit-datetime-edit,
+.admin-form-input[type="month"]::-webkit-datetime-edit {
+  padding: 0;
+}
+
+.admin-form-input[type="date"]::-webkit-calendar-picker-indicator,
+.admin-form-input[type="time"]::-webkit-calendar-picker-indicator,
+.admin-form-input[type="month"]::-webkit-calendar-picker-indicator {
+  filter: var(--calendar-icon-filter, none);
+  cursor: pointer;
+}
+
+/* Select */
+.admin-form-select {
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition:
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 36px;
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: none;
+  background-image: var(--select-arrow);
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 32px;
+}
+
+.admin-form-select:focus {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.admin-form-select option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+/* Textarea */
+.admin-form-textarea {
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition:
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  resize: vertical;
+  box-sizing: border-box;
+  min-height: 80px;
+}
+
+.admin-form-textarea:focus {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+/* Checkbox */
+.admin-form-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.admin-form-checkbox input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.admin-form-checkbox input + span::before {
+  content: "";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  vertical-align: middle;
+  transition:
+    border-color var(--transition),
+    box-shadow var(--transition),
+    background var(--transition);
+  flex-shrink: 0;
+}
+
+.admin-form-checkbox input:checked + span::before {
+  background: var(--accent-color);
+  border-color: var(--accent-color);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-size: 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.admin-form-checkbox input:focus + span::before {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.admin-form-checkbox:hover
+  input:not(:checked):not(:disabled):not(:indeterminate)
+  + span::before {
+  border-color: var(--border-color-hover);
+  background: var(--bg-secondary);
+}
+
+.admin-form-checkbox input:indeterminate + span::before {
+  background: var(--accent-color);
+  border-color: var(--accent-color);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.admin-form-checkbox input:disabled + span::before {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.admin-form-checkbox:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.admin-form-checkbox span {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+/* Reorderable List */
+.admin-reorder-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.admin-reorder-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  background: var(--bg-tertiary);
+  border-radius: var(--border-radius-sm);
+}
+
+.admin-reorder-arrows {
+  display: flex;
+  gap: 2px;
+}
+
+.admin-reorder-label {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.admin-reorder-label.accent {
+  color: var(--accent-color);
+}
+
+.admin-reorder-arrows .admin-btn-icon {
+  width: 22px;
+  height: 22px;
+  color: var(--text-muted);
+}
+
+.admin-reorder-arrows .admin-btn-icon:hover:not(:disabled) {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.admin-reorder-arrows .admin-btn-icon:disabled {
+  opacity: 0.25;
+}
+
+/* Form Rows (Grid Layouts) */
+.admin-form-row {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.admin-form-row-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.admin-form-row-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.admin-form-row-5 {
+  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
+}
+
+@media (max-width: 768px) {
+  .admin-form-row-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .admin-form-row-5 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .admin-form-row,
+  .admin-form-row-3 {
+    grid-template-columns: 1fr;
+  }
+  .admin-form-row-5 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .admin-form-row-4,
+  .admin-form-row-5 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Form Utilities */
+.admin-form-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+/* Required field indicator */
+.admin-form-label.required::after {
+  content: " *";
+  color: var(--danger);
+  font-weight: 600;
+}
+
+/* Inline field errors */
+.admin-form-group.has-error .admin-form-input,
+.admin-form-group.has-error .admin-form-select,
+.admin-form-group.has-error .admin-form-textarea {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px var(--danger-light);
+}
+
+.admin-form-group.has-error .admin-form-label {
+  color: var(--danger);
+}
+
+.admin-form-error {
+  font-size: 0.75rem;
+  color: var(--danger);
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.admin-form-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+/* Touch targets - min 44px on mobile */
+@media (max-width: 768px) {
+  .admin-form-input,
+  .admin-form-select,
+  .admin-form-textarea {
+    min-height: 44px;
+    font-size: 16px; /* prevent auto-zoom on iOS */
+  }
+
+  .admin-form-checkbox {
+    min-height: 44px;
+    padding: 8px 0;
+  }
+
+  .admin-form-checkbox input + span::before {
+    width: 20px;
+    height: 20px;
+  }
+
+  .admin-form-label {
+    font-size: 13px;
+  }
+}
+
+/* ============================================================================
+   Customer Selector
+   ============================================================================ */
+
+.admin-customer-select {
+  position: relative;
+}
+
+.admin-customer-selected {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  background: var(--input-bg);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.admin-customer-selected span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-customer-selected .admin-btn-icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin-right: -4px;
+}
+
+.admin-customer-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  max-height: 260px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+.admin-customer-dropdown::-webkit-scrollbar {
+  width: 5px;
+}
+
+.admin-customer-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.admin-customer-dropdown::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 99px;
+}
+
+.admin-customer-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+.admin-customer-dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background var(--transition);
+  border-radius: 4px;
+  margin: 0 4px;
+}
+
+.admin-customer-dropdown-item:hover {
+  background: var(--bg-secondary);
+}
+
+.admin-customer-dropdown-item div:first-child {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.admin-customer-dropdown-item div:last-child {
+  font-size: 11.5px;
+  color: var(--text-tertiary);
+  margin-top: 1px;
+}
+
+.admin-customer-dropdown-empty {
+  padding: 0.75rem;
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 0.8125rem;
+}

src/admin/hooks/useAttendanceAdmin.ts

@@ -561,7 +561,9 @@ export default function useAttendanceAdmin({ alert }: AlertContext) {
   useEffect(() => {
     const loadUsers = async () => {
       try {
-        const response = await apiFetch(`${API_BASE}/users?limit=1000`);
+        const response = await apiFetch(
+          `${API_BASE}/attendance?action=attendance_users`,
+        );
         const result = await response.json();
         if (result.success) {
           const apiUsers: ApiUser[] = result.data;

src/admin/layout.css

@@ -0,0 +1,582 @@
+/* ============================================================================
+   Layout
+   ============================================================================ */
+
+.admin-layout {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: var(--bg-primary);
+}
+
+@media (min-width: 1024px) {
+  .admin-layout {
+    align-items: flex-start;
+  }
+}
+
+/* ============================================================================
+   Sidebar
+   ============================================================================ */
+
+/* -- Theme variables for sidebar -- */
+[data-theme="dark"] .admin-sidebar {
+  --sb-bg: #141414;
+  --sb-border: #2a2a2a;
+  --sb-text: #a0a0a0;
+  --sb-text-hover: #ddd;
+  --sb-hover-bg: #1f1f1f;
+  --sb-active-bg: #ffffff;
+  --sb-active-text: #141414;
+  --sb-label: #444;
+  --sb-muted: #555;
+  --sb-scrollbar: #333;
+}
+
+[data-theme="light"] .admin-sidebar {
+  --sb-bg: #ffffff;
+  --sb-border: #e8e6e1;
+  --sb-text: #7c7c84;
+  --sb-text-hover: #1a1a1a;
+  --sb-hover-bg: #f5f4f2;
+  --sb-active-bg: #141414;
+  --sb-active-text: #ffffff;
+  --sb-label: #a0a0a0;
+  --sb-muted: #a0a0a0;
+  --sb-scrollbar: #ddd;
+}
+
+.admin-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  z-index: 50;
+  background: var(--sb-bg);
+  border-right: 1px solid var(--sb-border);
+  display: flex;
+  flex-direction: column;
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform 0.3s ease,
+    visibility 0.3s ease;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.admin-sidebar.open {
+  transform: translateX(0);
+  visibility: visible;
+  touch-action: none;
+}
+
+@media (min-width: 1024px) {
+  .admin-sidebar {
+    right: auto;
+    width: 220px;
+    height: 100%;
+    transform: none;
+    visibility: visible;
+    padding: 0;
+  }
+}
+
+[data-theme="light"] .admin-sidebar {
+  box-shadow:
+    1px 0 0 0 var(--sb-border),
+    4px 0 16px rgba(0, 0, 0, 0.04);
+}
+
+/* Sidebar Overlay (mobile) */
+.admin-sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 49;
+  backdrop-filter: blur(2px);
+}
+
+.admin-sidebar-overlay.open {
+  display: block;
+}
+
+@media (min-width: 1024px) {
+  .admin-sidebar-overlay {
+    display: none !important;
+  }
+}
+
+/* Sidebar Header */
+.admin-sidebar-header {
+  padding: 0 18px;
+  height: 73px;
+  border-bottom: 1px solid var(--sb-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.admin-sidebar-logo {
+  height: 28px;
+  width: auto;
+}
+
+.admin-sidebar-close {
+  display: block;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  color: var(--sb-text);
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.admin-sidebar-close:hover {
+  background: var(--sb-hover-bg);
+  color: var(--sb-text-hover);
+}
+
+@media (min-width: 1024px) {
+  .admin-sidebar-close {
+    display: none;
+  }
+}
+
+/* Sidebar Navigation */
+.admin-sidebar-nav {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  padding: 4px 0;
+}
+
+.admin-sidebar-nav::-webkit-scrollbar {
+  width: 5px;
+}
+
+.admin-sidebar-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.admin-sidebar-nav::-webkit-scrollbar-thumb {
+  background: var(--sb-scrollbar);
+  border-radius: 99px;
+}
+
+/* Nav Section */
+.admin-nav-section {
+  padding: 14px 10px 6px;
+}
+
+.admin-nav-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--sb-label);
+  padding: 0 8px;
+  margin-bottom: 4px;
+}
+
+/* Nav Item */
+.admin-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border-radius: 7px;
+  color: var(--sb-text);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 13px;
+  font-weight: 450;
+  margin-bottom: 1px;
+  text-decoration: none;
+  user-select: none;
+}
+
+.admin-nav-item:hover {
+  background: var(--sb-hover-bg);
+  color: var(--sb-text-hover);
+}
+
+.admin-nav-item.active {
+  background: var(--sb-active-bg);
+  color: var(--sb-active-text);
+  font-weight: 600;
+}
+
+.admin-nav-item.active svg {
+  color: var(--accent-color);
+}
+
+.admin-nav-item svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 1023px) {
+  .admin-nav-item {
+    padding: 10px 12px;
+    font-size: 15px;
+    gap: 10px;
+  }
+
+  .admin-nav-item svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* Sidebar Footer */
+.admin-sidebar-footer {
+  margin-top: auto;
+  border-top: 1px solid var(--sb-border);
+  padding: 14px 10px;
+  flex-shrink: 0;
+}
+
+.admin-user-chip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+}
+
+.admin-user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.admin-user-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.admin-user-name {
+  color: var(--sb-text-hover);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.admin-user-role {
+  color: var(--sb-muted);
+  font-size: 11px;
+}
+
+.admin-logout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  background: transparent;
+  border: none;
+  color: var(--sb-text);
+  cursor: pointer;
+  border-radius: 7px;
+  font-size: 12px;
+  font-family: inherit;
+  transition: all 0.15s ease;
+}
+
+.admin-logout-btn:hover {
+  background: var(--sb-hover-bg);
+  color: var(--sb-text-hover);
+}
+
+.admin-logout-btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 480px) {
+  .admin-sidebar-footer {
+    padding: 10px 8px;
+  }
+
+  .admin-user-chip {
+    padding: 6px;
+  }
+
+  .admin-logout-btn {
+    padding: 8px;
+    font-size: 13px;
+  }
+}
+
+/* ============================================================================
+   Main Content Area
+   ============================================================================ */
+
+.admin-main {
+  flex: 1;
+  min-width: 0;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .admin-main {
+    margin-left: 220px;
+  }
+}
+
+/* Header */
+.admin-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  height: calc(73px + env(safe-area-inset-top, 0px));
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+@media (min-width: 1024px) {
+  .admin-header {
+    left: 220px;
+    padding: 0 1.5rem;
+  }
+}
+
+.admin-menu-btn {
+  display: block;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+}
+
+.admin-menu-btn:hover {
+  background: var(--bg-tertiary);
+}
+
+@media (min-width: 1024px) {
+  .admin-menu-btn {
+    display: none;
+  }
+}
+
+.admin-header-theme-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: var(--transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.admin-header-theme-btn:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-color-hover);
+  transform: scale(1.05);
+}
+
+.admin-theme-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+  opacity: 0;
+  transform: rotate(180deg) scale(0.5);
+}
+
+.admin-theme-icon.visible {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
+
+/* Content */
+.admin-content {
+  flex: 1;
+  padding: 1rem;
+  padding-top: calc(73px + 1rem + env(safe-area-inset-top, 0px));
+}
+
+@media (min-width: 1024px) {
+  .admin-content {
+    padding: 28px 32px;
+    padding-top: calc(73px + 28px);
+  }
+}
+
+/* ============================================================================
+   Page Headers
+   ============================================================================ */
+
+.admin-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 640px) {
+  .admin-page-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.admin-page-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: var(--font-heading);
+  margin-bottom: 0.25rem;
+}
+
+.admin-page-subtitle {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.admin-page-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .admin-page-actions {
+    width: 100%;
+  }
+
+  .admin-page-actions .admin-btn {
+    flex: 1;
+  }
+}
+
+/* ============================================================================
+   Grid System
+   ============================================================================ */
+
+.admin-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.admin-grid > .admin-card {
+  margin-bottom: 0;
+}
+
+.admin-grid-3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .admin-grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .admin-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.admin-grid-4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+@media (min-width: 768px) {
+  .admin-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Page header on mobile */
+@media (max-width: 480px) {
+  .admin-page-title {
+    font-size: 18px;
+  }
+
+  .admin-page-subtitle {
+    font-size: 12px;
+  }
+
+  .admin-content {
+    padding: 12px !important;
+    padding-top: calc(73px + 12px + env(safe-area-inset-top, 0px)) !important;
+  }
+}
+
+/* Grid - single column on small mobile */
+@media (max-width: 480px) {
+  .admin-grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ============================================================================
+   Settings Grid
+   ============================================================================ */
+
+.admin-settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.admin-settings-grid > .admin-card {
+  margin-bottom: 0;
+}
+
+@media (max-width: 900px) {
+  .admin-settings-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/admin/offers.css

@@ -2,63 +2,6 @@
    Offers Module
    ============================================ */
 
-/* Editor section cards */
-.offers-editor-section {
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-/* Settings grid */
-.offers-settings-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-}
-
-.offers-settings-grid > .admin-card {
-  margin-bottom: 0;
-}
-
-@media (max-width: 900px) {
-  .offers-settings-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Logo section */
-.offers-logo-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-}
-
-.offers-logo-preview {
-  max-width: 200px;
-  max-height: 100px;
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  background: #fff;
-}
-
-.offers-logo-preview img {
-  max-width: 100%;
-  max-height: 80px;
-  object-fit: contain;
-}
-
 /* Items table */
 .offers-items-table {
   overflow-x: auto;
@@ -103,213 +46,6 @@
   min-height: 32px;
 }
 
-/* Totals summary */
-.offers-totals-summary {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
-}
-
-.offers-totals-row {
-  display: flex;
-  gap: 2rem;
-  justify-content: flex-end;
-  min-width: 250px;
-  padding: 0.25rem 0;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-}
-
-.offers-totals-row span:last-child {
-  min-width: 100px;
-  text-align: right;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.offers-totals-total {
-  border-top: 2px solid var(--text-primary);
-  margin-top: 0.25rem;
-  padding-top: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.offers-totals-total span:last-child {
-  font-weight: 700;
-}
-
-/* Scope sections list wrapper */
-.offers-scope-list {
-  margin-top: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Scope section card */
-.offers-scope-section {
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  overflow: visible;
-  transition: border-color var(--transition);
-  background: var(--bg-primary);
-}
-
-.offers-scope-content {
-  overflow: hidden;
-}
-
-.offers-scope-section:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--border-color) 70%,
-    var(--accent-color)
-  );
-}
-
-.offers-scope-section-header {
-  display: flex;
-  align-items: center;
-  padding: 0.625rem 1rem;
-  background: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
-  border-radius: 0.5rem 0.5rem 0 0;
-  gap: 0.5rem;
-}
-
-.offers-scope-section-header .offers-scope-number {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-  min-width: 1.25rem;
-}
-
-.offers-scope-section-header .offers-scope-title {
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.offers-scope-section-header .offers-scope-actions {
-  display: flex;
-  gap: 0.25rem;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.offers-scope-section .admin-form {
-  padding: 1rem;
-}
-
-/* Customer selector */
-.offers-customer-select {
-  position: relative;
-}
-
-.offers-customer-selected {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 36px;
-  padding: 0 12px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-sm);
-  background: var(--input-bg);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.offers-customer-selected span {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.offers-customer-selected .admin-btn-icon {
-  flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  margin-right: -4px;
-}
-
-.offers-customer-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  max-height: 260px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-top: none;
-  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
-}
-
-.offers-customer-dropdown::-webkit-scrollbar {
-  width: 5px;
-}
-
-.offers-customer-dropdown::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.offers-customer-dropdown::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 99px;
-}
-
-.offers-customer-dropdown::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-.offers-customer-dropdown-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background var(--transition);
-  border-radius: 4px;
-  margin: 0 4px;
-}
-
-.offers-customer-dropdown-item:hover {
-  background: var(--bg-secondary);
-}
-
-.offers-customer-dropdown-item div:first-child {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary);
-  line-height: 1.3;
-}
-
-.offers-customer-dropdown-item div:last-child {
-  font-size: 11.5px;
-  color: var(--text-tertiary);
-  margin-top: 1px;
-}
-
-.offers-customer-dropdown-empty {
-  padding: 0.75rem;
-  text-align: center;
-  color: var(--text-tertiary);
-  font-size: 0.8125rem;
-}
-
 /* Template dropdown menu */
 .offers-template-menu {
   position: absolute;
@@ -361,81 +97,20 @@
   color: var(--danger);
 }
 
-/* Compact form row for 3+ columns */
-.offers-form-row-3 {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1rem;
-}
-
-@media (max-width: 768px) {
-  .offers-form-row-3 {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Tabs - zachovany pro zpetnou kompatibilitu, nove pouzivat admin-tabs/admin-tab */
-.offers-tabs {
-  display: inline-flex;
-  gap: 4px;
-  padding: 4px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.625rem;
-  margin-bottom: 1.5rem;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.offers-tab {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1.25rem;
-  background: transparent;
-  border: none;
-  border-radius: 0.5rem;
-  color: var(--text-muted);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background 0.2s ease,
-    box-shadow 0.2s ease;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-}
-
-.offers-tab:hover {
-  color: var(--text-primary);
-}
-
-.offers-tab.active {
-  color: var(--text-primary);
-  font-weight: 600;
-  background: var(--bg-secondary);
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 0 0 1px var(--border-color);
-}
-
 /* RichEditor (Quill) */
-.rich-editor {
+.admin-rich-editor {
   border: 1px solid var(--border-color);
   border-radius: 0.5rem;
   overflow: visible;
 }
 
-.rich-editor .quill {
+.admin-rich-editor .quill {
   display: flex;
   flex-direction: column;
 }
 
 /* Toolbar */
-.rich-editor .ql-toolbar.ql-snow {
+.admin-rich-editor .ql-toolbar.ql-snow {
   background: var(--bg-secondary);
   border: none;
   border-bottom: 1px solid var(--border-color);
@@ -445,60 +120,60 @@
   gap: 2px;
 }
 
-.rich-editor .ql-toolbar .ql-formats {
+.admin-rich-editor .ql-toolbar .ql-formats {
   margin-right: 8px;
 }
 
 /* Toolbar buttons */
-.rich-editor .ql-snow .ql-stroke {
+.admin-rich-editor .ql-snow .ql-stroke {
   stroke: var(--text-secondary);
 }
-.rich-editor .ql-snow .ql-fill {
+.admin-rich-editor .ql-snow .ql-fill {
   fill: var(--text-secondary);
 }
-.rich-editor .ql-snow .ql-picker-label {
+.admin-rich-editor .ql-snow .ql-picker-label {
   color: var(--text-secondary);
   border-color: var(--border-color);
 }
 
-.rich-editor .ql-snow button:hover .ql-stroke,
+.admin-rich-editor .ql-snow button:hover .ql-stroke,
-.rich-editor .ql-snow .ql-picker-label:hover .ql-stroke {
+.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-stroke {
   stroke: var(--text-primary);
 }
-.rich-editor .ql-snow button:hover .ql-fill,
+.admin-rich-editor .ql-snow button:hover .ql-fill,
-.rich-editor .ql-snow .ql-picker-label:hover .ql-fill {
+.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-fill {
   fill: var(--text-primary);
 }
-.rich-editor .ql-snow button:hover,
+.admin-rich-editor .ql-snow button:hover,
-.rich-editor .ql-snow .ql-picker-label:hover {
+.admin-rich-editor .ql-snow .ql-picker-label:hover {
   color: var(--text-primary);
 }
 
 /* Active state */
-.rich-editor .ql-snow button.ql-active {
+.admin-rich-editor .ql-snow button.ql-active {
   color: var(--accent-color);
   background: color-mix(in srgb, var(--accent-color) 15%, transparent);
   border-radius: 4px;
 }
-.rich-editor .ql-snow button.ql-active .ql-stroke {
+.admin-rich-editor .ql-snow button.ql-active .ql-stroke {
   stroke: var(--accent-color);
 }
-.rich-editor .ql-snow button.ql-active .ql-fill,
+.admin-rich-editor .ql-snow button.ql-active .ql-fill,
-.rich-editor .ql-snow button.ql-active .ql-stroke.ql-fill {
+.admin-rich-editor .ql-snow button.ql-active .ql-stroke.ql-fill {
   fill: var(--accent-color);
 }
-.rich-editor .ql-snow .ql-picker-item.ql-selected {
+.admin-rich-editor .ql-snow .ql-picker-item.ql-selected {
   color: var(--accent-color);
 }
-.rich-editor .ql-snow .ql-picker-label.ql-active {
+.admin-rich-editor .ql-snow .ql-picker-label.ql-active {
   color: var(--accent-color);
 }
-.rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke {
+.admin-rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke {
   stroke: var(--accent-color);
 }
 
 /* Dropdowns (font, size, color, align) */
-.rich-editor .ql-snow .ql-picker-options {
+.admin-rich-editor .ql-snow .ql-picker-options {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: 0.375rem;
@@ -507,23 +182,23 @@
   padding: 0.25rem;
 }
 
-.rich-editor .ql-snow .ql-picker-item {
+.admin-rich-editor .ql-snow .ql-picker-item {
   color: var(--text-secondary);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
-.rich-editor .ql-snow .ql-picker-item:hover {
+.admin-rich-editor .ql-snow .ql-picker-item:hover {
   color: var(--text-primary);
   background: var(--bg-secondary);
 }
 
 /* Font picker */
-.rich-editor .ql-snow .ql-font .ql-picker-options {
+.admin-rich-editor .ql-snow .ql-font .ql-picker-options {
   min-width: 11rem;
   max-height: 200px;
   overflow-y: auto;
 }
-.rich-editor .ql-snow .ql-size .ql-picker-options {
+.admin-rich-editor .ql-snow .ql-size .ql-picker-options {
   max-height: 200px;
   overflow-y: auto;
 }
@@ -703,13 +378,13 @@
 }
 
 /* Editor area */
-.rich-editor .ql-container.ql-snow {
+.admin-rich-editor .ql-container.ql-snow {
   border: none;
   border-radius: 0 0 0.5rem 0.5rem;
   font-size: 0.875rem;
 }
 
-.rich-editor .ql-editor {
+.admin-rich-editor .ql-editor {
   min-height: var(--re-min-height, 120px);
   padding: 0.75rem;
   color: var(--text-primary);
@@ -718,19 +393,22 @@
   background: var(--input-bg);
 }
 
-.rich-editor .ql-editor.ql-blank::before {
+.admin-rich-editor .ql-editor.ql-blank::before {
   color: var(--text-tertiary);
   font-style: normal;
 }
 
 /* Lists inside editor */
-.rich-editor .ql-editor ul,
+.admin-rich-editor .ql-editor ul,
-.rich-editor .ql-editor ol {
+.admin-rich-editor .ql-editor ol {
   padding-left: 1.5rem;
 }
 
 /* Color picker */
-.rich-editor .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"] {
+.admin-rich-editor
+  .ql-snow
+  .ql-color-picker
+  .ql-picker-options[aria-hidden="false"] {
   width: 176px;
   padding: 0.375rem;
   display: flex;
@@ -738,7 +416,7 @@
   gap: 2px;
 }
 
-.rich-editor .ql-snow .ql-color-picker .ql-picker-item {
+.admin-rich-editor .ql-snow .ql-color-picker .ql-picker-item {
   width: 18px;
   height: 18px;
   border-radius: 2px;
@@ -748,7 +426,7 @@
 }
 
 /* Tooltip (link editor) */
-.rich-editor .ql-snow .ql-tooltip {
+.admin-rich-editor .ql-snow .ql-tooltip {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: 0.375rem;
@@ -756,7 +434,7 @@
   color: var(--text-primary);
 }
 
-.rich-editor .ql-snow .ql-tooltip input[type="text"] {
+.admin-rich-editor .ql-snow .ql-tooltip input[type="text"] {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
@@ -764,12 +442,12 @@
   padding: 0.25rem 0.5rem;
 }
 
-.rich-editor .ql-snow .ql-tooltip a {
+.admin-rich-editor .ql-snow .ql-tooltip a {
   color: var(--accent-color);
 }
 
 /* Read-only rendered rich text (Quill HTML output) */
-.rich-text-view {
+.admin-rich-text-view {
   color: var(--text-secondary);
   line-height: 1.6;
   font-size: 0.875rem;
@@ -778,56 +456,44 @@
   min-width: 0;
 }
 
-.rich-text-view ul,
+.admin-rich-text-view ul,
-.rich-text-view ol {
+.admin-rich-text-view ol {
   padding-left: 1.5rem;
   margin: 0.25rem 0 0.75rem;
 }
 
-.rich-text-view li {
+.admin-rich-text-view li {
   margin-bottom: 0.15rem;
 }
 
-.rich-text-view a {
+.admin-rich-text-view a {
   color: var(--accent-color);
 }
 
-.rich-text-view strong,
+.admin-rich-text-view strong,
-.rich-text-view b {
+.admin-rich-text-view b {
   font-weight: 600;
   color: var(--text-primary);
   display: inline-block;
   margin-top: 0.5rem;
 }
 
-.rich-text-view br + b,
+.admin-rich-text-view br + b,
-.rich-text-view br + strong {
+.admin-rich-text-view br + strong {
   margin-top: 0.75rem;
 }
 
-.rich-text-view > br:first-child,
+.admin-rich-text-view > br:first-child,
-.rich-text-view ul + br,
+.admin-rich-text-view ul + br,
-.rich-text-view ol + br {
+.admin-rich-text-view ol + br {
   display: none;
 }
 
 @media (max-width: 640px) {
-  .offers-editor-section {
-    padding: 1rem;
-  }
-
   .offers-items-table {
     margin: 0 -1rem;
     width: calc(100% + 2rem);
   }
-
-  .offers-totals-summary {
-    align-items: stretch;
-  }
-
-  .offers-totals-row {
-    min-width: unset;
-  }
 }
 
 /* Offer draft row in table */

src/admin/pages/Attendance.tsx

@@ -576,10 +576,7 @@ export default function Attendance() {
                     <div className="attendance-project-header">
                       <span className="attendance-shift-label">Projekt</span>
                       {activeProjectId ? (
-                        <span
+                        <span className="admin-badge admin-badge-wrap text-sm">
-                          className="admin-badge admin-badge-wrap"
-                          style={{ fontSize: "0.8125rem" }}
-                        >
                           {projects.find(
                             (p) => String(p.id) === String(activeProjectId),
                           )
@@ -587,12 +584,7 @@ export default function Attendance() {
                             : `Projekt #${activeProjectId}`}
                         </span>
                       ) : (
-                        <span
+                        <span className="text-muted text-sm">Žádný</span>
-                          className="text-muted"
-                          style={{ fontSize: "0.8125rem" }}
-                        >
-                          Žádný
-                        </span>
                       )}
                     </div>
                     <select
@@ -601,8 +593,7 @@ export default function Attendance() {
                         handleSwitchProject(e.target.value || null)
                       }
                       disabled={switchingProject}
-                      className="admin-form-select"
+                      className="admin-form-select text-md"
-                      style={{ fontSize: "0.875rem" }}
                     >
                       <option value="">— Bez projektu —</option>
                       {projects.map((p) => (
@@ -654,8 +645,7 @@ export default function Attendance() {
                     <button
                       onClick={handleBreak}
                       disabled={submitting}
-                      className="admin-btn admin-btn-secondary"
+                      className="admin-btn admin-btn-secondary w-full"
-                      style={{ width: "100%" }}
                     >
                       Pauza (30 min)
                     </button>
@@ -663,15 +653,13 @@ export default function Attendance() {
                   <button
                     onClick={() => handlePunch("departure")}
                     disabled={submitting}
-                    className="admin-btn admin-btn-primary"
+                    className="admin-btn admin-btn-primary w-full"
-                    style={{ width: "100%" }}
                   >
                     {submitting ? "Zpracovávám..." : "Odchod"}
                   </button>
                   <button
                     onClick={() => setShowLeaveModal(true)}
-                    className="admin-btn admin-btn-secondary"
+                    className="admin-btn admin-btn-secondary w-full"
-                    style={{ width: "100%" }}
                   >
                     Žádost o nepřítomnost
                   </button>
@@ -703,16 +691,14 @@ export default function Attendance() {
                 <button
                   onClick={() => handlePunch("arrival")}
                   disabled={submitting}
-                  className="admin-btn admin-btn-primary"
+                  className="admin-btn admin-btn-primary w-full"
-                  style={{ width: "100%" }}
                 >
                   {submitting ? "Zpracovávám..." : "Příchod"}
                 </button>
 
                 <button
                   onClick={() => setShowLeaveModal(true)}
-                  className="admin-btn admin-btn-secondary"
+                  className="admin-btn admin-btn-secondary w-full"
-                  style={{ width: "100%" }}
                 >
                   Žádost o nepřítomnost
                 </button>
@@ -877,11 +863,10 @@ export default function Attendance() {
               </div>
               <div style={{ marginTop: "0.75rem" }}>
                 <div
-                  className="text-secondary"
+                  className="text-secondary text-sm"
                   style={{
                     display: "flex",
                     justifyContent: "space-between",
-                    fontSize: "0.8125rem",
                     marginBottom: "0.5rem",
                   }}
                 >
@@ -905,8 +890,8 @@ export default function Attendance() {
                 </div>
                 {data.monthly_fund.leave_hours > 0 && (
                   <div
-                    className="text-muted"
+                    className="text-muted text-xs"
-                    style={{ fontSize: "0.75rem", marginTop: "0.375rem" }}
+                    style={{ marginTop: "0.375rem" }}
                   >
                     {"Pokryto: "}
                     {data.monthly_fund.covered}h (práce{" "}

src/admin/pages/CompanySettings.tsx

@@ -515,7 +515,7 @@ export default function CompanySettings({
         </motion.div>
       )}
 
-      <div className="offers-settings-grid">
+      <div className="admin-settings-grid">
         {/* Company Info */}
         <motion.div
           className="admin-card"
@@ -1080,7 +1080,7 @@ export default function CompanySettings({
           </div>
           <div className="admin-card-body">
             <div className="admin-form-row">
-              <div className="offers-logo-section">
+              <div className="admin-logo-section">
                 <label
                   className="admin-form-label"
                   style={{ display: "block", marginBottom: 4 }}
@@ -1088,7 +1088,7 @@ export default function CompanySettings({
                   Logo (světlý režim)
                 </label>
                 {logoUrl && (
-                  <div className="offers-logo-preview">
+                  <div className="admin-logo-preview">
                     <img src={logoUrl} alt="Logo (světlý režim)" />
                   </div>
                 )}
@@ -1130,7 +1130,7 @@ export default function CompanySettings({
                   PNG, JPEG, GIF nebo WebP, max 5 MB
                 </small>
               </div>
-              <div className="offers-logo-section">
+              <div className="admin-logo-section">
                 <label
                   className="admin-form-label"
                   style={{ display: "block", marginBottom: 4 }}
@@ -1138,7 +1138,7 @@ export default function CompanySettings({
                   Logo (tmavý režim)
                 </label>
                 {logoUrlDark && (
-                  <div className="offers-logo-preview">
+                  <div className="admin-logo-preview">
                     <img src={logoUrlDark} alt="Logo (tmavý režim)" />
                   </div>
                 )}

src/admin/pages/Dashboard.tsx

@@ -338,7 +338,7 @@ export default function Dashboard() {
       {/* Skeleton loading */}
       {dashLoading && (
         <div className="admin-skeleton" style={{ padding: 0, gap: "1.25rem" }}>
-          <div className="dash-kpi-grid dash-kpi-4">
+          <div className="admin-kpi-grid admin-kpi-4">
             {[0, 1, 2, 3].map((i) => (
               <div
                 key={i}
@@ -493,7 +493,7 @@ export default function Dashboard() {
                     </span>
                   </div>
                   <div className="dash-stat-row">
-                    <span>Prošlé</span>
+                    <span>Zneplatněné</span>
                     <span className="admin-badge admin-badge-warning">
                       {dashData.offers.expired_count}
                     </span>

src/admin/pages/InvoiceDetail.tsx

@@ -270,7 +270,7 @@ function SortableInvoiceRow({
           </select>
         </td>
       ) : null}
-      <td style={{ textAlign: "right", fontWeight: 600, whiteSpace: "nowrap" }}>
+      <td className="text-right fw-600 whitespace-nowrap">
         {formatCurrency(lineTotal, currency)}
       </td>
       <td>
@@ -354,12 +354,7 @@ function SortableInvoiceEditRow({
           </svg>
         </button>
       </td>
-      <td
+      <td className="text-tertiary text-center fw-500">{index + 1}</td>
-        className="text-tertiary"
-        style={{ textAlign: "center", fontWeight: 500 }}
-      >
-        {index + 1}
-      </td>
       <td>
         <input
           type="text"
@@ -1220,14 +1215,14 @@ export default function InvoiceDetail() {
         <form onSubmit={handleCreateSubmit}>
           {/* Basic info */}
           <motion.div
-            className="offers-editor-section"
+            className="admin-editor-section"
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.25, delay: 0.06 }}
           >
             <h3 className="admin-card-title">Základní údaje</h3>
             <div className="admin-form">
-              <div className="offers-form-row-3">
+              <div className="admin-form-row admin-form-row-3">
                 <FormField label="Číslo faktury">
                   <input
                     type="text"
@@ -1242,7 +1237,7 @@ export default function InvoiceDetail() {
                   required
                 >
                   {form.customer_id ? (
-                    <div className="offers-customer-selected">
+                    <div className="admin-customer-selected">
                       <span>{form.customer_name}</span>
                       <button
                         type="button"
@@ -1271,7 +1266,7 @@ export default function InvoiceDetail() {
                     </div>
                   ) : (
                     <div
-                      className="offers-customer-select"
+                      className="admin-customer-select"
                       onClick={(e) => e.stopPropagation()}
                     >
                       <input
@@ -1287,16 +1282,16 @@ export default function InvoiceDetail() {
                         autoComplete="off"
                       />
                       {showCustomerDropdown && (
-                        <div className="offers-customer-dropdown">
+                        <div className="admin-customer-dropdown">
                           {filteredCustomers.length === 0 ? (
-                            <div className="offers-customer-dropdown-empty">
+                            <div className="admin-customer-dropdown-empty">
                               Žádní zákazníci
                             </div>
                           ) : (
                             filteredCustomers.slice(0, 10).map((c) => (
                               <div
                                 key={c.id}
-                                className="offers-customer-dropdown-item"
+                                className="admin-customer-dropdown-item"
                                 onMouseDown={() => selectCustomer(c)}
                               >
                                 <div>{c.name}</div>
@@ -1371,10 +1366,7 @@ export default function InvoiceDetail() {
                     ))}
                   </select>
                   {form.due_date && (
-                    <span
+                    <span className="text-tertiary text-xs mt-1">
-                      className="text-tertiary"
-                      style={{ fontSize: "0.75rem", marginTop: "0.25rem" }}
-                    >
                       Splatnost:{" "}
                       {new Date(form.due_date).toLocaleDateString("cs-CZ")}
                     </span>
@@ -1392,7 +1384,7 @@ export default function InvoiceDetail() {
                 </FormField>
               </div>
 
-              <div className="offers-form-row-3">
+              <div className="admin-form-row admin-form-row-3">
                 <FormField label="Forma úhrady">
                   <select
                     value={form.payment_method}
@@ -1448,10 +1440,7 @@ export default function InvoiceDetail() {
                 </FormField>
                 <FormField label="DPH">
                   <div className="flex-row-gap">
-                    <label
+                    <label className="admin-form-checkbox whitespace-nowrap">
-                      className="admin-form-checkbox"
-                      style={{ whiteSpace: "nowrap" }}
-                    >
                       <input
                         type="checkbox"
                         checked={!!form.apply_vat}
@@ -1580,8 +1569,8 @@ export default function InvoiceDetail() {
               </DndContext>
 
               {/* Totals */}
-              <div className="offers-totals-summary">
+              <div className="admin-totals-summary">
-                <div className="offers-totals-row">
+                <div className="admin-totals-row">
                   <span>Mezisoučet:</span>
                   <span>
                     {formatCurrency(createTotals.subtotal, form.currency)}
@@ -1590,13 +1579,13 @@ export default function InvoiceDetail() {
                 {form.apply_vat &&
                   Object.entries(createTotals.vatByRate).map(
                     ([rate, amount]) => (
-                      <div key={rate} className="offers-totals-row">
+                      <div key={rate} className="admin-totals-row">
                         <span>DPH {rate}%:</span>
                         <span>{formatCurrency(amount, form.currency)}</span>
                       </div>
                     ),
                   )}
-                <div className="offers-totals-row offers-totals-total">
+                <div className="admin-totals-row admin-totals-total">
                   <span>Celkem k úhradě:</span>
                   <span>
                     {formatCurrency(createTotals.total, form.currency)}
@@ -1608,7 +1597,7 @@ export default function InvoiceDetail() {
 
           {/* Notes */}
           <motion.div
-            className="offers-editor-section"
+            className="admin-editor-section"
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.25, delay: 0.15 }}
@@ -1738,14 +1727,14 @@ export default function InvoiceDetail() {
 
       {/* Info */}
       <motion.div
-        className="offers-editor-section"
+        className="admin-editor-section"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
         <h3 className="admin-card-title">Informace</h3>
         <div className="admin-form">
-          <div className="offers-form-row-3 mb-2">
+          <div className="admin-form-row admin-form-row-3 mb-2">
             <FormField label="Zákazník">
               <div className="fw-500">{invoice.customer_name || "\u2014"}</div>
               {invoice.customer && (
@@ -1778,7 +1767,7 @@ export default function InvoiceDetail() {
               <div>{invoice.currency}</div>
             </FormField>
           </div>
-          <div className="offers-form-row-3 mb-2">
+          <div className="admin-form-row admin-form-row-3 mb-2">
             <FormField label="Datum vystavení">
               <div>{formatDate(invoice.issue_date)}</div>
             </FormField>
@@ -1795,7 +1784,7 @@ export default function InvoiceDetail() {
               <div>{formatDate(invoice.tax_date)}</div>
             </FormField>
           </div>
-          <div className="offers-form-row-3">
+          <div className="admin-form-row admin-form-row-3">
             <FormField label="Forma úhrady">
               <div>{invoice.payment_method}</div>
             </FormField>
@@ -1809,7 +1798,7 @@ export default function InvoiceDetail() {
           {invoice.paid_date && (
             <div className="admin-form-row mt-2">
               <FormField label="Datum úhrady">
-                <div style={{ color: "var(--success)", fontWeight: 500 }}>
+                <div className="fw-500" style={{ color: "var(--success)" }}>
                   {formatDate(invoice.paid_date)}
                 </div>
               </FormField>
@@ -1954,16 +1943,13 @@ export default function InvoiceDetail() {
                           : 0;
                         return (
                           <tr key={item.id || index}>
-                            <td
+                            <td className="text-tertiary text-center fw-500">
-                              className="text-tertiary"
-                              style={{ textAlign: "center", fontWeight: 500 }}
-                            >
                               {index + 1}
                             </td>
                             <td className="fw-500">
                               {item.description || "\u2014"}
                             </td>
-                            <td style={{ textAlign: "center" }}>
+                            <td className="text-center">
                               {item.quantity}{" "}
                               {item.unit && (
                                 <span className="text-tertiary">
@@ -1971,7 +1957,7 @@ export default function InvoiceDetail() {
                                 </span>
                               )}
                             </td>
-                            <td style={{ textAlign: "center" }}>
+                            <td className="text-center">
                               {item.unit || "\u2014"}
                             </td>
                             <td className="admin-mono text-right">
@@ -1980,16 +1966,13 @@ export default function InvoiceDetail() {
                                 invoice.currency,
                               )}
                             </td>
-                            <td style={{ textAlign: "center" }}>
+                            <td className="text-center">
                               {Number(invoice.apply_vat)
                                 ? Number(item.vat_rate)
                                 : 0}
                               %
                             </td>
-                            <td
+                            <td className="admin-mono text-right fw-600">
-                              className="admin-mono"
-                              style={{ textAlign: "right", fontWeight: 600 }}
-                            >
                               {formatCurrency(
                                 lineSubtotal + lineVat,
                                 invoice.currency,
@@ -2007,8 +1990,8 @@ export default function InvoiceDetail() {
             </>
           )}
 
-          <div className="offers-totals-summary">
+          <div className="admin-totals-summary">
-            <div className="offers-totals-row">
+            <div className="admin-totals-row">
               <span>Mezisoučet:</span>
               <span>
                 {formatCurrency(editTotals.subtotal, invoice.currency)}
@@ -2016,12 +1999,12 @@ export default function InvoiceDetail() {
             </div>
             {Number(invoice.apply_vat) > 0 &&
               Object.entries(editTotals.vatByRate).map(([rate, amount]) => (
-                <div key={rate} className="offers-totals-row">
+                <div key={rate} className="admin-totals-row">
                   <span>DPH {rate}%:</span>
                   <span>{formatCurrency(amount, invoice.currency)}</span>
                 </div>
               ))}
-            <div className="offers-totals-row offers-totals-total">
+            <div className="admin-totals-row admin-totals-total">
               <span>Celkem k úhradě:</span>
               <span>{formatCurrency(editTotals.total, invoice.currency)}</span>
             </div>
@@ -2031,7 +2014,7 @@ export default function InvoiceDetail() {
 
       {/* Notes */}
       <motion.div
-        className="offers-editor-section"
+        className="admin-editor-section"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.15 }}

src/admin/pages/Invoices.tsx

@@ -56,7 +56,7 @@ function formatCzkWithDetail(
   if (!Array.isArray(amounts) || amounts.length === 0)
     return { value: "0 Kč", detail: null };
   const hasForeign = amounts.some((a) => a.currency !== "CZK");
-  if (hasForeign && totalCzk !== null && totalCzk !== undefined) {
+  if (hasForeign && totalCzk != null) {
     return {
       value: formatCurrency(totalCzk, "CZK"),
       detail: formatMultiCurrency(amounts),
@@ -334,7 +334,7 @@ export default function Invoices() {
               style={{ width: "140px", borderRadius: "8px" }}
             />
           </div>
-          <div className="dash-kpi-grid dash-kpi-4">
+          <div className="admin-kpi-grid admin-kpi-4">
             {[0, 1, 2, 3].map((i) => (
               <div key={i} className="admin-stat-card">
                 <div
@@ -497,15 +497,15 @@ export default function Invoices() {
           </button>
         </div>
 
-        <div className="offers-tabs mb-4" style={{ justifyContent: "center" }}>
+        <div className="admin-tabs mb-4" style={{ justifyContent: "center" }}>
           <button
-            className={`offers-tab ${activeTab === "issued" ? "active" : ""}`}
+            className={`admin-tab ${activeTab === "issued" ? "active" : ""}`}
             onClick={() => setActiveTab("issued")}
           >
             Vydané
           </button>
           <button
-            className={`offers-tab ${activeTab === "received" ? "active" : ""}`}
+            className={`admin-tab ${activeTab === "received" ? "active" : ""}`}
             onClick={() => setActiveTab("received")}
           >
             Přijaté
@@ -522,7 +522,7 @@ export default function Invoices() {
           <Suspense
             fallback={
               <div
-                className="dash-kpi-grid dash-kpi-4"
+                className="admin-kpi-grid admin-kpi-4"
                 style={{ marginBottom: "1.5rem" }}
               >
                 {[0, 1, 2, 3].map((i) => (
@@ -569,7 +569,7 @@ export default function Invoices() {
           >
             {!hasLoadedOnce.current && statsLoading ? (
               <div
-                className="dash-kpi-grid dash-kpi-4"
+                className="admin-kpi-grid admin-kpi-4"
                 style={{ marginBottom: "1.5rem" }}
               >
                 {[0, 1, 2, 3].map((i) => (
@@ -607,7 +607,7 @@ export default function Invoices() {
                   >
                     <motion.div
                       key={slideKey}
-                      className="dash-kpi-grid dash-kpi-4"
+                      className="admin-kpi-grid admin-kpi-4"
                       custom={slideDirection.current}
                       variants={{
                         enter: (dir: number) => ({
@@ -740,11 +740,11 @@ export default function Invoices() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.25, delay: 0.12 }}
           >
-            <div className="offers-tabs mb-6">
+            <div className="admin-tabs mb-6">
               {STATUS_FILTERS.map((f) => (
                 <button
                   key={f.value}
-                  className={`offers-tab ${statusFilter === f.value ? "active" : ""}`}
+                  className={`admin-tab ${statusFilter === f.value ? "active" : ""}`}
                   onClick={() => {
                     setStatusFilter(f.value);
                     setPage(1);

src/admin/pages/LeaveApproval.tsx

@@ -313,9 +313,9 @@ export default function LeaveApproval() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="offers-tabs mb-6">
+        <div className="admin-tabs mb-6">
           <button
-            className={`offers-tab ${activeTab === "pending" ? "active" : ""}`}
+            className={`admin-tab ${activeTab === "pending" ? "active" : ""}`}
             onClick={() => setActiveTab("pending")}
           >
             Ke schválení
@@ -333,7 +333,7 @@ export default function LeaveApproval() {
             )}
           </button>
           <button
-            className={`offers-tab ${activeTab === "processed" ? "active" : ""}`}
+            className={`admin-tab ${activeTab === "processed" ? "active" : ""}`}
             onClick={() => setActiveTab("processed")}
           >
             Vyřízené

src/admin/pages/LeaveRequests.tsx

@@ -61,7 +61,7 @@ export default function LeaveRequests() {
 
   const fetchRequests = useCallback(async () => {
     try {
-      const response = await apiFetch(`${API_BASE}/leave-requests`);
+      const response = await apiFetch(`${API_BASE}/leave-requests?mine=1`);
       if (response.status === 401) return;
       const result = await response.json();
       if (result.success) {

src/admin/pages/OfferDetail.tsx

@@ -180,9 +180,7 @@ function SortableItemRow({
           </button>
         </td>
       )}
-      <td style={{ textAlign: "center", color: "var(--text-tertiary)" }}>
+      <td className="text-center text-tertiary">{index + 1}</td>
-        {index + 1}
-      </td>
       <td style={{ verticalAlign: "top" }}>
         <div
           style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}
@@ -191,10 +189,9 @@ function SortableItemRow({
             type="text"
             value={item.description}
             onChange={(e) => onUpdate("description", e.target.value)}
-            className="admin-form-input"
+            className="admin-form-input fw-500"
             placeholder="Název položky"
             readOnly={readOnly}
-            style={{ fontWeight: 500 }}
           />
           <input
             type="text"
@@ -240,7 +237,7 @@ function SortableItemRow({
           readOnly={readOnly}
         />
       </td>
-      <td style={{ textAlign: "center" }}>
+      <td className="text-center">
         <input
           type="checkbox"
           checked={item.is_included_in_total}
@@ -248,10 +245,7 @@ function SortableItemRow({
           disabled={readOnly}
         />
       </td>
-      <td
+      <td className="admin-mono text-right fw-600">
-        className="admin-mono"
-        style={{ textAlign: "right", fontWeight: 600 }}
-      >
         {formatCurrency(lineTotal, currency)}
       </td>
       {!readOnly && (
@@ -874,11 +868,10 @@ export default function OfferDetail() {
               {isEdit ? `Nabídka ${form.quotation_number}` : "Nová nabídka"}
               {isInvalidated && (
                 <span
-                  className="admin-badge admin-badge-danger"
+                  className="admin-badge admin-badge-danger text-xs"
                   style={{
                     marginLeft: "0.75rem",
                     verticalAlign: "middle",
-                    fontSize: "0.75rem",
                   }}
                 >
                   Zneplatněna
@@ -1011,14 +1004,14 @@ export default function OfferDetail() {
 
       {/* Quotation Form */}
       <motion.div
-        className={`offers-editor-section${isInvalidated || isLockedByOther ? " offers-readonly" : ""}`}
+        className={`admin-editor-section${isInvalidated || isLockedByOther ? " offers-readonly" : ""}`}
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
         <h3 className="admin-card-title">Základní údaje</h3>
         <div className="admin-form">
-          <div className="offers-form-row-3">
+          <div className="admin-form-row admin-form-row-3">
             <FormField label="Číslo nabídky">
               <input
                 type="text"
@@ -1044,7 +1037,7 @@ export default function OfferDetail() {
             </FormField>
             <FormField label="Zákazník" error={errors.customer_id}>
               {form.customer_id ? (
-                <div className="offers-customer-selected">
+                <div className="admin-customer-selected">
                   <span>{form.customer_name}</span>
                   {!isInvalidated && !isLockedByOther && (
                     <button
@@ -1069,7 +1062,7 @@ export default function OfferDetail() {
                 </div>
               ) : (
                 <div
-                  className="offers-customer-select"
+                  className="admin-customer-select"
                   onClick={(e) => e.stopPropagation()}
                 >
                   <input
@@ -1085,16 +1078,16 @@ export default function OfferDetail() {
                     readOnly={isInvalidated || isLockedByOther}
                   />
                   {showCustomerDropdown && !isInvalidated && (
-                    <div className="offers-customer-dropdown">
+                    <div className="admin-customer-dropdown">
                       {filteredCustomers.length === 0 ? (
-                        <div className="offers-customer-dropdown-empty">
+                        <div className="admin-customer-dropdown-empty">
                           Žádní zákazníci
                         </div>
                       ) : (
                         filteredCustomers.slice(0, 20).map((c) => (
                           <div
                             key={c.id}
-                            className="offers-customer-dropdown-item"
+                            className="admin-customer-dropdown-item"
                             onMouseDown={() => selectCustomer(c)}
                           >
                             <div>{c.name}</div>
@@ -1189,7 +1182,7 @@ export default function OfferDetail() {
             </FormField>
           </div>
 
-          <div className="offers-form-row-3">
+          <div className="admin-form-row admin-form-row-3">
             <FormField label="Sazba DPH (%)">
               <div className="flex-row-gap">
                 <select
@@ -1208,10 +1201,7 @@ export default function OfferDetail() {
                     </option>
                   ))}
                 </select>
-                <label
+                <label className="admin-form-checkbox whitespace-nowrap">
-                  className="admin-form-checkbox"
-                  style={{ whiteSpace: "nowrap" }}
-                >
                   <input
                     type="checkbox"
                     checked={form.apply_vat}
@@ -1332,18 +1322,18 @@ export default function OfferDetail() {
           </div>
 
           {/* Totals */}
-          <div className="offers-totals-summary">
+          <div className="admin-totals-summary">
-            <div className="offers-totals-row">
+            <div className="admin-totals-row">
               <span>Mezisoučet:</span>
               <span>{formatCurrency(subtotal, form.currency)}</span>
             </div>
             {form.apply_vat && (
-              <div className="offers-totals-row">
+              <div className="admin-totals-row">
                 <span>DPH ({form.vat_rate}%):</span>
                 <span>{formatCurrency(vatAmount, form.currency)}</span>
               </div>
             )}
-            <div className="offers-totals-row offers-totals-total">
+            <div className="admin-totals-row admin-totals-total">
               <span>Celkem:</span>
               <span>{formatCurrency(total, form.currency)}</span>
             </div>
@@ -1672,7 +1662,7 @@ export default function OfferDetail() {
                   <FormField label="Příloha (PDF)">
                     {orderAttachment ? (
                       <div className="flex-row gap-2">
-                        <span style={{ fontSize: "0.875rem" }}>
+                        <span className="text-md">
                           {orderAttachment.name}{" "}
                           <span className="text-tertiary">
                             ({(orderAttachment.size / 1024).toFixed(0)} KB)

src/admin/pages/Offers.tsx

@@ -814,8 +814,8 @@ export default function Offers() {
                     <tr>
                       <td
                         colSpan={8}
-                        className="text-muted"
+                        className="text-muted text-center"
-                        style={{ textAlign: "center", padding: "1.5rem" }}
+                        style={{ padding: "1.5rem" }}
                       >
                         Žádné nabídky odpovídající hledání.
                       </td>
@@ -879,8 +879,8 @@ export default function Offers() {
               <div className="admin-modal-header">
                 <h2 className="admin-modal-title">Vytvořit objednávku</h2>
                 <p
-                  className="text-secondary"
+                  className="text-secondary text-md"
-                  style={{ marginTop: "0.25rem", fontSize: "0.875rem" }}
+                  style={{ marginTop: "0.25rem" }}
                 >
                   Nabídka:{" "}
                   <strong>{orderModal.quotation?.quotation_number}</strong>
@@ -917,7 +917,7 @@ export default function Offers() {
                           <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                           <polyline points="14 2 14 8 20 8" />
                         </svg>
-                        <span style={{ fontSize: "0.875rem" }}>
+                        <span className="text-md">
                           {orderAttachment.name}{" "}
                           <span className="text-tertiary">
                             ({(orderAttachment.size / 1024).toFixed(0)} KB)
@@ -944,11 +944,9 @@ export default function Offers() {
                       </div>
                     ) : (
                       <label
-                        className="admin-btn admin-btn-secondary admin-btn-sm"
+                        className="admin-btn admin-btn-secondary admin-btn-sm inline-flex"
                         style={{
                           cursor: "pointer",
-                          display: "inline-flex",
-                          alignItems: "center",
                           gap: "0.4rem",
                         }}
                       >

src/admin/pages/OffersTemplates.tsx

@@ -73,15 +73,15 @@ export default function OffersTemplates() {
         </div>
       </motion.div>
 
-      <div className="offers-tabs">
+      <div className="admin-tabs">
         <button
-          className={`offers-tab ${activeTab === "items" ? "active" : ""}`}
+          className={`admin-tab ${activeTab === "items" ? "active" : ""}`}
           onClick={() => setActiveTab("items")}
         >
           Šablony položek
         </button>
         <button
-          className={`offers-tab ${activeTab === "scopes" ? "active" : ""}`}
+          className={`admin-tab ${activeTab === "scopes" ? "active" : ""}`}
           onClick={() => setActiveTab("scopes")}
         >
           Šablony rozsahu
@@ -826,22 +826,19 @@ function ScopeTemplatesTab() {
 
                   <div className="admin-form-group">
                     <label className="admin-form-label mb-2">Sekce</label>
-                    <div className="offers-scope-list">
+                    <div className="admin-scope-list">
                       {form.sections.map((section, index) => (
-                        <div
+                        <div key={section._key} className="admin-scope-section">
-                          key={section._key}
+                          <div className="admin-scope-section-header">
-                          className="offers-scope-section"
+                            <span className="admin-scope-number">
-                        >
-                          <div className="offers-scope-section-header">
-                            <span className="offers-scope-number">
                               {index + 1}.
                             </span>
-                            <span className="offers-scope-title">
+                            <span className="admin-scope-title">
                               {section.title ||
                                 section.title_cz ||
                                 `Sekce ${index + 1}`}
                             </span>
-                            <div className="offers-scope-actions">
+                            <div className="admin-scope-actions">
                               <button
                                 type="button"
                                 onClick={() => moveSection(index, -1)}

src/admin/pages/OrderDetail.tsx

@@ -747,18 +747,18 @@ export default function OrderDetail() {
           )}
 
           {/* Totals */}
-          <div className="offers-totals-summary">
+          <div className="admin-totals-summary">
-            <div className="offers-totals-row">
+            <div className="admin-totals-row">
               <span>Mezisoučet:</span>
               <span>{formatCurrency(totals.subtotal, order.currency)}</span>
             </div>
             {Number(order.apply_vat) > 0 && (
-              <div className="offers-totals-row">
+              <div className="admin-totals-row">
                 <span>DPH ({order.vat_rate}%):</span>
                 <span>{formatCurrency(totals.vatAmount, order.currency)}</span>
               </div>
             )}
-            <div className="offers-totals-row offers-totals-total">
+            <div className="admin-totals-row admin-totals-total">
               <span>Celkem k úhradě:</span>
               <span>{formatCurrency(totals.total, order.currency)}</span>
             </div>
@@ -788,16 +788,16 @@ export default function OrderDetail() {
                 {order.scope_description}
               </div>
             )}
-            <div className="offers-scope-list">
+            <div className="admin-scope-list">
               {order.sections.map((section, index) => (
                 <div
                   key={section.id || index}
-                  className="offers-scope-section"
+                  className="admin-scope-section"
                   style={{ cursor: "default" }}
                 >
-                  <div className="offers-scope-section-header">
+                  <div className="admin-scope-section-header">
-                    <span className="offers-scope-number">{index + 1}.</span>
+                    <span className="admin-scope-number">{index + 1}.</span>
-                    <span className="offers-scope-title">
+                    <span className="admin-scope-title">
                       {(order.language === "CZ"
                         ? section.title_cz || section.title
                         : section.title || section.title_cz) ||
@@ -806,7 +806,7 @@ export default function OrderDetail() {
                   </div>
                   {section.content && (
                     <div
-                      className="offers-scope-content rich-text-view"
+                      className="admin-scope-content admin-rich-text-view"
                       style={{ padding: "1rem" }}
                       dangerouslySetInnerHTML={{
                         __html: DOMPurify.sanitize(section.content),

src/admin/pages/ProjectCreate.tsx

@@ -284,7 +284,7 @@ export default function ProjectCreate() {
             <div className="admin-form-row">
               <FormField label="Zákazník" error={errors.customer_id} required>
                 {form.customer_id ? (
-                  <div className="offers-customer-selected">
+                  <div className="admin-customer-selected">
                     <span>{form.customer_name}</span>
                     <button
                       type="button"
@@ -308,7 +308,7 @@ export default function ProjectCreate() {
                   </div>
                 ) : (
                   <div
-                    className="offers-customer-select"
+                    className="admin-customer-select"
                     onClick={(e) => e.stopPropagation()}
                   >
                     <input
@@ -323,16 +323,16 @@ export default function ProjectCreate() {
                       placeholder="Hledat zákazníka..."
                     />
                     {showCustomerDropdown && (
-                      <div className="offers-customer-dropdown">
+                      <div className="admin-customer-dropdown">
                         {filteredCustomers.length === 0 ? (
-                          <div className="offers-customer-dropdown-empty">
+                          <div className="admin-customer-dropdown-empty">
                             Žádní zákazníci
                           </div>
                         ) : (
                           filteredCustomers.slice(0, 20).map((c) => (
                             <div
                               key={c.id}
-                              className="offers-customer-dropdown-item"
+                              className="admin-customer-dropdown-item"
                               onMouseDown={() => selectCustomer(c)}
                             >
                               <div>{c.name}</div>

src/admin/pages/ReceivedInvoices.tsx

@@ -115,7 +115,7 @@ function formatCzkWithDetail(
     return { value: "0 Kč", detail: null };
   }
   const hasForeign = amounts.some((a) => a.currency !== "CZK");
-  if (hasForeign && totalCzk !== null && totalCzk !== undefined) {
+  if (hasForeign && totalCzk != null) {
     return {
       value: formatCurrency(totalCzk, "CZK"),
       detail: formatMultiCurrency(amounts),
@@ -549,7 +549,7 @@ export default function ReceivedInvoices({
   const renderKpi = () => {
     if (!hasLoadedOnce.current && statsLoading) {
       return (
-        <div className="dash-kpi-grid dash-kpi-4 mb-6">
+        <div className="admin-kpi-grid admin-kpi-4 mb-6">
           {[0, 1, 2, 3].map((i) => (
             <div key={i} className="admin-stat-card">
               <div
@@ -586,7 +586,7 @@ export default function ReceivedInvoices({
         >
           <motion.div
             key={slideKey}
-            className="dash-kpi-grid dash-kpi-4"
+            className="admin-kpi-grid admin-kpi-4"
             custom={slideDirection.current}
             variants={{
               enter: (dir: number) => ({
@@ -709,9 +709,9 @@ export default function ReceivedInvoices({
               <p>Žádné přijaté faktury v tomto měsíci.</p>
               {hasPermission("invoices.create") && (
                 <p
+                  className="text-md"
                   style={{
                     color: "var(--text-tertiary)",
-                    fontSize: "0.875rem",
                   }}
                 >
                   Nahrajte faktury tlačítkem výše.
@@ -780,7 +780,8 @@ export default function ReceivedInvoices({
                       />
                     </th>
                     <th
-                      style={{ textAlign: "right", cursor: "pointer" }}
+                      className="text-right"
+                      style={{ cursor: "pointer" }}
                       onClick={() => handleSort("amount")}
                     >
                       Částka{" "}
@@ -959,9 +960,9 @@ export default function ReceivedInvoices({
                     Vybrat soubory
                   </button>
                   <span
+                    className="text-sm"
                     style={{
                       marginLeft: "0.75rem",
-                      fontSize: "0.8125rem",
                       color: "var(--text-tertiary)",
                     }}
                   >
@@ -1106,8 +1107,8 @@ export default function ReceivedInvoices({
                         </div>
                         {uploadMeta[idx]?.amount && (
                           <div
+                            className="text-xs"
                             style={{
-                              fontSize: "0.75rem",
                               color: "var(--text-tertiary)",
                               marginTop: "-0.25rem",
                               marginBottom: "0.5rem",
@@ -1320,8 +1321,8 @@ export default function ReceivedInvoices({
                         </div>
                         {editInvoice.amount && (
                           <div
+                            className="text-xs"
                             style={{
-                              fontSize: "0.75rem",
                               color: "var(--text-tertiary)",
                               marginBottom: "0.75rem",
                             }}

src/admin/pages/Settings.tsx

@@ -639,17 +639,16 @@ export default function Settings() {
                 </div>
                 <div>
                   <div
+                    className="fw-500 text-md"
                     style={{
-                      fontWeight: 500,
                       color: "var(--text-primary)",
-                      fontSize: "0.875rem",
                     }}
                   >
                     Povinné dvoufaktorové ověření (2FA)
                   </div>
                   <div
+                    className="text-xs"
                     style={{
-                      fontSize: "0.75rem",
                       color: "var(--text-secondary)",
                     }}
                   >
@@ -781,16 +780,16 @@ export default function Settings() {
                     <tr key={role.id}>
                       <td>
                         <div
+                          className="fw-500"
                           style={{
-                            fontWeight: 500,
                             color: "var(--text-primary)",
                           }}
                         >
                           {role.display_name}
                         </div>
                         <div
+                          className="text-xs"
                           style={{
-                            fontSize: "0.75rem",
                             color: "var(--text-tertiary)",
                           }}
                         >
@@ -1077,9 +1076,9 @@ export default function Settings() {
                       />
                     </FormField>
                     <small
+                      className="text-xs"
                       style={{
                         color: "var(--text-tertiary)",
-                        fontSize: "0.75rem",
                       }}
                     >
                       Změna se projeví po restartu serveru
@@ -1179,10 +1178,9 @@ export default function Settings() {
                             />
                           )}
                           <div
+                            className="fw-600 text-md"
                             style={{
-                              fontWeight: 600,
                               marginBottom: "0.5rem",
-                              fontSize: "0.875rem",
                             }}
                           >
                             {cfg.label}
@@ -1355,8 +1353,8 @@ export default function Settings() {
                 <div className="admin-card-body">
                   {systemInfo ? (
                     <table
+                      className="w-full"
                       style={{
-                        width: "100%",
                         fontSize: "0.85rem",
                         borderCollapse: "collapse",
                       }}
@@ -1374,16 +1372,16 @@ export default function Settings() {
                         ).map(([label, val]) => (
                           <tr key={label}>
                             <td
+                              className="whitespace-nowrap"
                               style={{
                                 padding: "6px 12px 6px 0",
                                 color: "var(--text-secondary)",
-                                whiteSpace: "nowrap",
                                 width: 160,
                               }}
                             >
                               {label}
                             </td>
-                            <td style={{ padding: "6px 0", fontWeight: 500 }}>
+                            <td className="fw-500" style={{ padding: "6px 0" }}>
                               {val}
                             </td>
                           </tr>
@@ -1516,9 +1514,9 @@ export default function Settings() {
                               </span>
                               {info?.configured && (
                                 <span
+                                  className="text-xs"
                                   style={{
                                     marginLeft: 8,
-                                    fontSize: "0.75rem",
                                     color: "var(--text-tertiary)",
                                   }}
                                 >
@@ -1548,8 +1546,7 @@ export default function Settings() {
                 <button
                   onClick={handleSaveSystemSettings}
                   disabled={sysSettingsSaving}
-                  className="admin-btn admin-btn-primary"
+                  className="admin-btn admin-btn-primary w-full"
-                  style={{ width: "100%" }}
                 >
                   {sysSettingsSaving ? (
                     <>
@@ -1637,9 +1634,9 @@ export default function Settings() {
                     />
                     {!editingRole && (
                       <small
+                        className="text-xs"
                         style={{
                           color: "var(--text-tertiary)",
-                          fontSize: "0.75rem",
                         }}
                       >
                         Pouze malá písmena, čísla a pomlčky. Nelze později

src/admin/pages/TripsAdmin.tsx

@@ -127,7 +127,7 @@ export default function TripsAdmin() {
       try {
         const [vRes, uRes, csRes] = await Promise.all([
           apiFetch(`${API_BASE}/vehicles`),
-          apiFetch(`${API_BASE}/users?limit=1000`),
+          apiFetch(`${API_BASE}/trips/users`),
           apiFetch(`${API_BASE}/company-settings`),
         ]);
         const vJson = await vRes.json();
@@ -136,14 +136,7 @@ export default function TripsAdmin() {
         if (vJson.success) setVehicles(vJson.data);
         if (csJson.success) setCompanyName(csJson.data.company_name || "");
         if (uJson.success) {
-          setUsers(
+          setUsers(uJson.data);
-            uJson.data.map(
-              (u: { id: number; first_name: string; last_name: string }) => ({
-                id: u.id,
-                name: `${u.first_name} ${u.last_name}`,
-              }),
-            ),
-          );
         }
       } catch {
         // silently fail, filters will just be empty

src/admin/pagination.css

@@ -0,0 +1,91 @@
+/* ============================================================================
+   Pagination
+   ============================================================================ */
+
+.admin-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--border-color);
+  font-size: 13px;
+}
+
+.admin-pagination-info {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.admin-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.admin-pagination-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-sm);
+  background: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.admin-pagination-page:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.admin-pagination-page.active {
+  background: var(--accent-color);
+  color: #fff;
+  border-color: var(--accent-color);
+  font-weight: 600;
+}
+
+.admin-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.admin-pagination-select {
+  padding: 4px 8px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+@media (max-width: 640px) {
+  .admin-pagination {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .admin-pagination-info {
+    order: 2;
+    width: 100%;
+    text-align: center;
+  }
+}

src/admin/responsive.css

@@ -0,0 +1,6 @@
+/* ============================================================================
+   Responsive — Cross-component media queries
+   ============================================================================
+   Component-specific media queries live in their respective files.
+   This file is reserved for responsive rules that span multiple components.
+   ============================================================================ */

src/admin/skeleton.css

@@ -0,0 +1,72 @@
+/* ============================================================================
+   Skeleton Loading
+   ============================================================================ */
+
+.admin-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  opacity: 0;
+  animation: skeleton-fade-in 0.15s ease 0.08s forwards;
+}
+
+@keyframes skeleton-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+.admin-skeleton-row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.admin-skeleton-line {
+  height: 14px;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 25%,
+    var(--border-color) 50%,
+    var(--bg-tertiary) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+
+.admin-skeleton-line.w-full {
+  width: 100%;
+}
+.admin-skeleton-line.w-3\/4 {
+  width: 75%;
+}
+.admin-skeleton-line.w-1\/2 {
+  width: 50%;
+}
+.admin-skeleton-line.w-1\/3 {
+  width: 33%;
+}
+.admin-skeleton-line.w-1\/4 {
+  width: 25%;
+}
+.admin-skeleton-line.h-8 {
+  height: 32px;
+}
+.admin-skeleton-line.h-10 {
+  height: 40px;
+}
+.admin-skeleton-line.circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* Skeleton loading on mobile */
+@media (max-width: 640px) {
+  .admin-skeleton {
+    border-radius: 4px;
+  }
+}

src/admin/tables.css

@@ -0,0 +1,132 @@
+/* ============================================================================
+   Tables
+   ============================================================================ */
+
+.admin-table-wrapper,
+.admin-table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.admin-table {
+  width: 100%;
+  min-width: 650px;
+  border-collapse: collapse;
+}
+
+.admin-table th {
+  text-align: left;
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--border-color);
+  white-space: nowrap;
+}
+
+.admin-table td {
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.admin-table tr:last-child td {
+  border-bottom: none;
+}
+
+@media (max-width: 768px) {
+  .admin-table th,
+  .admin-table td {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .admin-table th {
+    font-size: 10px;
+  }
+
+  .admin-table-avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 11px;
+  }
+
+  .admin-table-name {
+    font-size: 12px;
+  }
+
+  .admin-table-username {
+    font-size: 11px;
+  }
+}
+
+.admin-table-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  white-space: nowrap;
+}
+
+.admin-table-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--accent-light);
+  color: var(--accent-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.admin-table-name {
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.admin-table-username {
+  font-size: 13px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.admin-table-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Tables - compact on mobile, better scroll indication */
+@media (max-width: 640px) {
+  .admin-table-wrapper,
+  .admin-table-responsive {
+    margin: 0 -1rem;
+    padding: 0 1rem;
+    position: relative;
+  }
+
+  .admin-table {
+    min-width: 500px;
+  }
+
+  .admin-table th,
+  .admin-table td {
+    padding: 8px;
+    font-size: 11px;
+  }
+
+  .admin-table th {
+    font-size: 9px;
+  }
+
+  .admin-table-actions {
+    gap: 0.25rem;
+  }
+}

src/admin/variables.css

@@ -0,0 +1,159 @@
+/* ============================================================================
+   CSS Variables
+   ============================================================================ */
+
+:root {
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Shared colors */
+  --accent-color: #d63031;
+  --accent-hover: #b52626;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --info: #3b82f6;
+  --error: var(--danger);
+  --muted: #9ca3af;
+  --gradient: #d63031;
+  --gradient-subtle: rgba(214, 48, 49, 0.9);
+
+  /* Shared layout */
+  --border-radius: 10px;
+  --border-radius-sm: 8px;
+  --border-radius-lg: 16px;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  --font-heading: "Urbanist", sans-serif;
+  --font-body: "Plus Jakarta Sans", sans-serif;
+  --font-mono: "DM Mono", "Menlo", monospace;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --navbar-height: calc(76px + var(--safe-top));
+}
+
+/* ---- Dark theme ---- */
+[data-theme="dark"] {
+  --bg-primary: #0f0f0f;
+  --bg-secondary: #171717;
+  --bg-tertiary: #1e1e1e;
+  --text-primary: #ffffff;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666666;
+  --text-tertiary: #555555;
+  --border-color: rgba(255, 255, 255, 0.08);
+  --border-color-hover: rgba(255, 255, 255, 0.15);
+  --glass-bg: #171717;
+  --glass-bg-solid: #171717;
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
+  --card-bg: #1a1a1a;
+  --card-bg-hover: #1e1e1e;
+  --input-bg: #1a1a1a;
+  --glow-color: rgba(214, 48, 49, 0.15);
+  --accent-light: rgba(214, 48, 49, 0.1);
+  --accent-soft: #2a1a1a;
+  --accent-glow: rgba(214, 48, 49, 0.3);
+  --success-light: rgba(34, 197, 94, 0.1);
+  --success-soft: #1a2a1e;
+  --warning-light: rgba(245, 158, 11, 0.1);
+  --warning-soft: #2a2518;
+  --danger-light: rgba(239, 68, 68, 0.1);
+  --danger-soft: #2a1a1a;
+  --info-light: rgba(59, 130, 246, 0.1);
+  --info-soft: #1a1e2a;
+  --muted-light: rgba(107, 114, 128, 0.15);
+  --orb-color-1: rgba(214, 48, 49, 0.2);
+  --orb-color-2: rgba(120, 119, 198, 0.15);
+  --calendar-icon-filter: invert(1);
+  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  --table-row-hover: rgba(255, 255, 255, 0.02);
+  --row-current: color-mix(in srgb, var(--success) 5%, transparent);
+  --row-current-hover: color-mix(in srgb, var(--success) 8%, transparent);
+  --row-draft: color-mix(in srgb, var(--warning) 6%, transparent);
+  --row-expired: color-mix(in srgb, var(--danger) 5%, transparent);
+}
+
+/* ---- Light theme ---- */
+[data-theme="light"] {
+  --success: #15803d;
+  --warning: #b45309;
+  --danger: #b91c1c;
+  --info: #1d4ed8;
+  --accent-color: #c73030;
+  --accent-hover: #b52828;
+  --muted: #6b7280;
+  --bg-primary: #f5f4f2;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #eeecea;
+  --text-primary: #1a1a1a;
+  --text-secondary: #555555;
+  --text-muted: #717180;
+  --text-tertiary: #8a8a96;
+  --border-color: rgba(0, 0, 0, 0.1);
+  --border-color-hover: rgba(0, 0, 0, 0.18);
+  --glass-bg: #ffffff;
+  --glass-bg-solid: #ffffff;
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
+  --card-bg: #ffffff;
+  --card-bg-hover: #ffffff;
+  --input-bg: #ffffff;
+  --glow-color: rgba(222, 58, 58, 0.08);
+  --accent-light: rgba(222, 58, 58, 0.08);
+  --accent-soft: #fff0f0;
+  --accent-glow: rgba(222, 58, 58, 0.15);
+  --success-light: rgba(34, 197, 94, 0.1);
+  --success-soft: #e8fbf7;
+  --warning-light: rgba(245, 158, 11, 0.1);
+  --warning-soft: #fef9ec;
+  --danger-light: rgba(239, 68, 68, 0.1);
+  --danger-soft: #fef2f2;
+  --info-light: rgba(59, 130, 246, 0.1);
+  --info-soft: #ebf3fd;
+  --muted-light: rgba(107, 114, 128, 0.12);
+  --calendar-icon-filter: none;
+  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  --table-row-hover: rgba(0, 0, 0, 0.03);
+  --row-current: var(--success-soft);
+  --row-current-hover: color-mix(in srgb, var(--success) 12%, transparent);
+  --row-draft: var(--warning-soft);
+  --row-expired: var(--danger-soft);
+  --orb-color-1: rgba(214, 48, 49, 0.12);
+  --orb-color-2: rgba(120, 119, 198, 0.1);
+}
+
+/* Light mode - jemnejsi stiny */
+[data-theme="light"] .admin-toast {
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="light"] .react-datepicker {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+}
+
+[data-theme="light"] .admin-rich-editor .ql-snow .ql-picker-options,
+[data-theme="light"] .admin-rich-editor .ql-snow .ql-tooltip {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .admin-customer-dropdown,
+[data-theme="light"] .offers-template-menu {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .dash-quick-btn:hover {
+  filter: brightness(0.9);
+}

src/routes/admin/attendance.ts

@@ -1,4 +1,5 @@
 import { FastifyInstance } from "fastify";
+import prisma from "../../config/database";
 import { requireAuth, requirePermission } from "../../middleware/auth";
 import { logAudit } from "../../services/audit";
 import { success, error, parseId } from "../../utils/response";
@@ -132,6 +133,38 @@ export default async function attendanceRoutes(
       return reply.send({ success: true, data });
     }
 
+    // --- action=attendance_users: users with attendance.record permission ---
+    if (action === "attendance_users") {
+      const users = await prisma.users.findMany({
+        where: {
+          is_active: true,
+          roles: {
+            is: {
+              OR: [
+                { name: "admin" },
+                {
+                  role_permissions: {
+                    some: { permissions: { name: "attendance.record" } },
+                  },
+                },
+              ],
+            },
+          },
+        },
+        select: { id: true, first_name: true, last_name: true, username: true },
+        orderBy: { last_name: "asc" },
+      });
+      return reply.send({
+        success: true,
+        data: users.map((u) => ({
+          id: u.id,
+          first_name: u.first_name,
+          last_name: u.last_name,
+          username: u.username,
+        })),
+      });
+    }
+
     // --- action=projects: active projects for attendance project switching ---
     if (action === "projects") {
       const data = await attendanceService.getActiveProjects();

src/routes/admin/dashboard.ts

@@ -3,6 +3,7 @@ import prisma from "../../config/database";
 import { requireAuth } from "../../middleware/auth";
 import { success } from "../../utils/response";
 import { localTimeStr } from "../../utils/date";
+import { toCzk } from "../../services/exchange-rates";
 
 export default async function dashboardRoutes(
   fastify: FastifyInstance,
@@ -141,8 +142,8 @@ export default async function dashboardRoutes(
       const [openCount, convertedCount, expiredCount, createdThisMonth] =
         await Promise.all([
           prisma.quotations.count({ where: { status: "active" } }),
-          prisma.quotations.count({ where: { status: "converted" } }),
+          prisma.quotations.count({ where: { status: "ordered" } }),
-          prisma.quotations.count({ where: { status: "expired" } }),
+          prisma.quotations.count({ where: { status: "invalidated" } }),
           prisma.quotations.count({
             where: { created_at: { gte: monthStart, lt: monthEnd } },
           }),
@@ -206,10 +207,13 @@ export default async function dashboardRoutes(
           }),
         ),
         unpaid_count: unpaidCount,
-        revenue_czk:
+        revenue_czk: await (async () => {
-          revenueByCurrency["CZK"] != null
+          let total = 0;
-            ? Math.round(revenueByCurrency["CZK"] * 100) / 100
+          for (const [cur, amount] of Object.entries(revenueByCurrency)) {
-            : null,
+            total += await toCzk(Math.round(amount * 100) / 100, cur);
+          }
+          return Math.round(total * 100) / 100;
+        })(),
       };
       result.unpaid_invoices = unpaidCount;
     }

src/routes/admin/invoices-pdf.ts

@@ -5,6 +5,8 @@ import { requirePermission } from "../../middleware/auth";
 import { localDateCzStr } from "../../utils/date";
 import { nasFinancialsManager } from "../../services/nas-financials-manager";
 import { htmlToPdf } from "../../utils/html-to-pdf";
+import { getRate } from "../../services/exchange-rates";
+import { localDateStr } from "../../utils/date";
 
 /* ── Helpers ─────────────────────────────────────────────────────── */
 
@@ -358,9 +360,12 @@ export default async function invoicesPdfRoutes(
         // QR generation failed — leave empty
       }
 
-      // VAT recapitulation (always in CZK)
+      // VAT recapitulation (always in CZK — Czech tax requirement)
       const isForeign = currency.toUpperCase() !== "CZK";
-      const cnbRate = 1.0; // Skip CNB rate conversion
+      const issueDateStr = invoice.issue_date
+        ? localDateStr(new Date(invoice.issue_date))
+        : undefined;
+      const cnbRate = isForeign ? await getRate(currency, issueDateStr) : 1.0;
       const vatRates = [21, 12, 0];
       const vatRecap: Array<{
         rate: number;
@@ -422,7 +427,7 @@ export default async function invoicesPdfRoutes(
           return `<tr>
             <td class="row-num">${i + 1}</td>
             <td class="desc">${escapeHtml(item.description)}</td>
-            <td class="center">${formatNum(qty, qtyDecimals)}</td>
+            <td class="center">${formatNum(qty, qtyDecimals)}${item.unit ? ` / ${escapeHtml(item.unit)}` : ""}</td>
             <td class="right">${formatNum(unitPrice)}</td>
             <td class="right">${formatNum(lineSubtotal)}</td>
             <td class="center">${applyVat ? Math.floor(vatRate) : 0}%</td>
@@ -510,76 +515,31 @@ export default async function invoicesPdfRoutes(
 
   .accent { color: #de3a3a; }
 
-  /* Hlavicka */
+  /* ── Hlavicka ── */
   .invoice-header {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
-    margin-bottom: 0;
+    margin-bottom: 3mm;
-    padding-bottom: 1mm;
+    padding-bottom: 3mm;
+    border-bottom: 2pt solid #de3a3a;
   }
   .invoice-header .left {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 3mm;
   }
-  .logo-header {
+  .logo-header { text-align: left; }
-    text-align: left;
-  }
   .company-title {
     font-size: 12pt;
     font-weight: 700;
-    margin-top: 2mm;
   }
   .invoice-title {
-    font-size: 10pt;
+    font-size: 13pt;
     font-weight: 700;
     color: #de3a3a;
     text-align: right;
-    margin-top: 2mm;
+    letter-spacing: 0.03em;
-  }
-
-  /* Adresy - dva sloupce, stejna vyska */
-  .addresses-row {
-    display: flex;
-    gap: 8mm;
-    align-items: stretch;
-    margin-bottom: 0;
-  }
-  .addresses-row .address-block {
-    flex: 1;
-    padding-bottom: 2mm;
-    border-bottom: 0.5pt solid #e0e0e0;
-  }
-
-  /* Detaily pod adresami */
-  .details-row {
-    display: flex;
-    gap: 8mm;
-    margin-bottom: 3mm;
-  }
-  .details-row .col { flex: 1; }
-
-  /* Adresy - styl z nabidek */
-  .address-block {
-    margin-bottom: 0;
-  }
-  .address-label {
-    font-size: 8pt;
-    font-weight: 600;
-    color: #646464;
-    line-height: 1.5;
-  }
-  .address-name {
-    font-size: 9pt;
-    font-weight: 700;
-    color: #1a1a1a;
-    line-height: 1.5;
-  }
-  .address-line {
-    font-size: 8.5pt;
-    color: #1a1a1a;
-    line-height: 1.5;
   }
 
   .logo {
@@ -588,46 +548,68 @@ export default async function invoicesPdfRoutes(
     object-fit: contain;
   }
 
-  /* Separator */
+  /* ── Adresy ── */
-  .header-separator {
+  .header-grid {
-    border: none;
+    border: 0.5pt solid #d0d0d0;
-    border-top: 0.5pt solid #e0e0e0;
+    border-collapse: collapse;
-    margin: 2mm 0 3mm 0;
+    width: 100%;
+    margin-bottom: 3mm;
   }
-
+  .header-grid td {
-  /* Banka */
+    padding: 3mm 4mm;
-  .bank-box {
+    border: 0.5pt solid #d0d0d0;
-    font-size: 8pt;
+    vertical-align: top;
-    line-height: 1.4;
+    width: 50%;
-    padding-top: 2mm;
   }
-  .bank-box .lbl {
+  .header-grid td.addr-customer {
-    font-weight: 600;
+    background: #f5f5f5;
+  }
+  .header-grid td.details-bank {
+    background: #f5f5f5;
+  }
+  .address-label {
+    font-size: 7pt;
+    font-weight: 700;
+    color: #de3a3a;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 1mm;
+  }
+  .address-name {
+    font-size: 10pt;
+    font-weight: 700;
     color: #1a1a1a;
-    display: inline-block;
+    line-height: 1.3;
-    min-width: 16mm;
+    margin-bottom: 1mm;
+  }
+  .address-line {
+    font-size: 8pt;
+    color: #444;
+    line-height: 1.5;
   }
 
-  /* Datumy */
+  /* ── Detaily (banka + datumy) — inside header-grid ── */
-  .dates-box {
+
-    font-size: 8pt;
+  .info-row {
-    line-height: 1.4;
-    padding-top: 2mm;
-  }
-  .dates-row {
     display: flex;
-    align-items: center;
+    align-items: baseline;
-    margin-bottom: 0.5mm;
+    font-size: 8pt;
+    padding: 1mm 0;
+    border-bottom: 0.5pt solid #f0f0f0;
   }
-  .dates-row .lbl {
+  .info-row:last-child { border-bottom: none; }
-    flex: 1;
+  .info-row .lbl {
-    color: #1a1a1a;
+    color: #666;
+    font-weight: 400;
+    flex-shrink: 0;
+    white-space: nowrap;
+    margin-right: 3mm;
   }
-  .dates-row .val {
+  .info-row .val {
     font-weight: 600;
-    min-width: 22mm;
+    color: #1a1a1a;
-    text-align: center;
+    text-align: right;
-    padding: 0.5mm 2mm;
+    margin-left: auto;
   }
 
   /* VS/KS blok */
@@ -637,32 +619,23 @@ export default async function invoicesPdfRoutes(
     padding-top: 2mm;
   }
 
-  /* Konecny prijemce */
+  /* ── Polozky ── */
-  .recipient-box {
-    font-size: 8pt;
-    margin-top: 2mm;
-    padding-top: 2mm;
-    border-top: 0.5pt solid #e0e0e0;
-  }
-  .recipient-box .lbl {
-    font-weight: 600;
-    font-style: italic;
-    color: #646464;
-  }
-
-  /* Polozky tabulka - styl z nabidek */
   .billing-label {
-    font-weight: 600;
+    font-weight: 700;
-    color: #de3a3a;
+    color: #1a1a1a;
-    font-size: 8.5pt;
+    font-size: 9pt;
-    padding: 3px 5px;
+    padding: 2mm 0 1mm 0;
+    border-bottom: 1.5pt solid #de3a3a;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
   }
 
   table.items {
     width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
-    font-size: 9pt;
+    font-size: 8pt;
     margin-bottom: 2mm;
   }
   table.items thead th {
@@ -673,7 +646,7 @@ export default async function invoicesPdfRoutes(
     text-align: left;
     letter-spacing: 0.02em;
     text-transform: uppercase;
-    border-bottom: 1pt solid #1a1a1a;
+    border-bottom: 0.5pt solid #d0d0d0;
     white-space: nowrap;
   }
   table.items thead th.center { text-align: center; }
@@ -693,8 +666,8 @@ export default async function invoicesPdfRoutes(
     font-size: 8pt;
   }
   table.items tbody td.desc {
-    font-size: 9.5pt;
+    font-size: 8pt;
-    font-weight: 500;
+    font-weight: 600;
     color: #1a1a1a;
   }
   table.items tbody td.total-cell { font-weight: 700; }
@@ -806,13 +779,14 @@ export default async function invoicesPdfRoutes(
   /* Prevzal / razitko */
   .footer-row {
     display: flex;
+    justify-content: space-between;
     margin-top: 4mm;
     font-size: 8pt;
-  }
-  .footer-row .col {
-    flex: 1;
     border-top: 0.5pt solid #aaa;
     padding-top: 2mm;
+    min-height: 15mm;
+  }
+  .footer-row .col {
     font-weight: 600;
     color: #555;
   }
@@ -893,59 +867,53 @@ ${indentCSS}
     <div class="invoice-title">${escapeHtml(t.heading)} ${invoiceNumber}</div>
   </div>
 
-  <hr class="header-separator" />
+  <!-- Dodavatel / Odberatel + Banka / Datumy -->
-
+  <table class="header-grid" cellspacing="0">
-  <!-- Dodavatel / Odberatel - stejna vyska -->
+    <tr>
-  <div class="addresses-row">
+      <td>
-    <div class="address-block">
+        <div class="address-label">${escapeHtml(t.supplier)}</div>
-      <div class="address-label">${escapeHtml(t.supplier)}</div>
+        <div class="address-name">${escapeHtml(supp.name)}</div>
-      <div class="address-name">${escapeHtml(supp.name)}</div>
+        ${suppLinesHtml}
-      ${suppLinesHtml}
+      </td>
-    </div>
+      <td class="addr-customer">
-    <div class="address-block">
+        <div class="address-label">${escapeHtml(t.customer)}</div>
-      <div class="address-label">${escapeHtml(t.customer)}</div>
+        <div class="address-name">${escapeHtml(cust.name)}</div>
-      <div class="address-name">${escapeHtml(cust.name)}</div>
+        ${custLinesHtml}
-      ${custLinesHtml}
+      </td>
-    </div>
+    </tr>
-  </div>
+    <tr>
-
+      <td class="details-bank">
-  <!-- Banka + VS / Datumy -->
+        <div class="info-row"><span class="lbl">${escapeHtml(t.bank)}</span> <span class="val">${escapeHtml(invoice.bank_name)}</span></div>
-  <div class="details-row">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.swift)}</span> <span class="val">${escapeHtml(invoice.bank_swift)}</span></div>
-    <div class="col">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.iban)}</span> <span class="val">${escapeHtml(invoice.bank_iban)}</span></div>
-      <div class="bank-box">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.account_no)}</span> <span class="val">${escapeHtml(invoice.bank_account)}</span></div>
-        <span class="lbl">${escapeHtml(t.bank)}</span> ${escapeHtml(invoice.bank_name)}<br>
+        <div class="vs-block">
-        <span class="lbl">${escapeHtml(t.swift)}</span> ${escapeHtml(invoice.bank_swift)}<br>
+          ${escapeHtml(t.var_symbol)} <strong>${invoiceNumber}</strong>
-        <span class="lbl">${escapeHtml(t.iban)}</span> ${escapeHtml(invoice.bank_iban)}<br>
+          &nbsp;&nbsp;&nbsp; ${escapeHtml(t.const_symbol)} <strong>${escapeHtml(invoice.constant_symbol)}</strong><br>
-        <span class="lbl">${escapeHtml(t.account_no)}</span> ${escapeHtml(invoice.bank_account)}
+          ${orderNumber ? `${escapeHtml(t.order_no)} ${orderNumber}` : ""}
-      </div>
+        </div>
-      <div class="vs-block">
+      </td>
-        ${escapeHtml(t.var_symbol)} <strong>${invoiceNumber}</strong>
+      <td>
-        &nbsp;&nbsp;&nbsp; ${escapeHtml(t.const_symbol)} <strong>${escapeHtml(invoice.constant_symbol)}</strong><br>
+        <div class="info-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div>
-        ${orderNumber ? `${escapeHtml(t.order_no)} ${orderNumber}` : ""}
+        <div class="info-row"><span class="lbl">${escapeHtml(t.due_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.due_date))}</span></div>
-      </div>
+        <div class="info-row"><span class="lbl">${escapeHtml(t.tax_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.tax_date))}</span></div>
-    </div>
+        <div class="info-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
-    <div class="col">
+      </td>
-      <div class="dates-box">
+    </tr>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div>
+  </table>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.due_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.due_date))}</span></div>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.tax_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.tax_date))}</span></div>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
-      </div>
-    </div>
-  </div>
 
   <!-- Polozky -->
   <div class="billing-label">${escapeHtml(invoice.billing_text || t.billing)}</div>
   <table class="items">
     <thead>
       <tr>
-        <th class="center" style="width:5%">${escapeHtml(t.col_no)}</th>
+        <th class="center" style="width:3%">${escapeHtml(t.col_no)}</th>
-        <th style="width:30%">${escapeHtml(t.col_desc)}</th>
+        <th style="width:36%">${escapeHtml(t.col_desc)}</th>
-        <th class="center" style="width:9%">${escapeHtml(t.col_qty)}</th>
+        <th class="center" style="width:10%">${escapeHtml(t.col_qty)}</th>
-        <th class="right" style="width:11%">${escapeHtml(t.col_unit_price)}</th>
+        <th class="right" style="width:10%">${escapeHtml(t.col_unit_price)}</th>
-        <th class="right" style="width:11%">${escapeHtml(t.col_price)}</th>
+        <th class="right" style="width:10%">${escapeHtml(t.col_price)}</th>
-        <th class="center" style="width:7%">${escapeHtml(t.col_vat_pct)}</th>
+        <th class="center" style="width:5%">${escapeHtml(t.col_vat_pct)}</th>
-        <th class="right" style="width:11%">${escapeHtml(t.col_vat)}</th>
+        <th class="right" style="width:10%">${escapeHtml(t.col_vat)}</th>
         <th class="right" style="width:16%">${escapeHtml(t.col_total)}</th>
       </tr>
     </thead>
@@ -1007,6 +975,17 @@ ${indentCSS}
       <tbody>
         ${vatRecapHtml}
       </tbody>
+      ${
+        isForeign
+          ? `<tfoot>
+        <tr>
+          <td colspan="4" style="font-size:0.7em; color:#666; padding-top:6px; text-align:left;">
+            Přepočet kurzem ČNB ke dni ${formatDate(invoice.issue_date)}: 1 ${escapeHtml(currency)} = ${cnbRate.toFixed(3).replace(".", ",")} CZK
+          </td>
+        </tr>
+      </tfoot>`
+          : ""
+      }
     </table>
   </div>
 

src/routes/admin/leave-requests.ts

@@ -29,7 +29,7 @@ export default async function leaveRequestsRoutes(
     const isAdmin = authData.permissions.includes("attendance.approve");
 
     const where: Record<string, unknown> = {};
-    if (!isAdmin) where.user_id = authData.userId;
+    if (!isAdmin || query.mine === "1") where.user_id = authData.userId;
     else if (query.user_id) where.user_id = Number(query.user_id);
     if (query.status) where.status = String(query.status);
 

src/routes/admin/offers-pdf.ts

@@ -517,7 +517,7 @@ ${indentCSS}
   }
   table.items tbody td.desc {
     font-size: 10pt;
-    font-weight: 500;
+    font-weight: 600;
     color: #1a1a1a;
   }
   table.items tbody td.total-cell {

src/routes/admin/received-invoices.ts

@@ -12,6 +12,7 @@ import {
   UpdateReceivedInvoiceSchema,
 } from "../../schemas/received-invoices.schema";
 import { nasFinancialsManager } from "../../services/nas-financials-manager";
+import { toCzk } from "../../services/exchange-rates";
 
 const VALID_STATUSES = ["unpaid", "paid"] as const;
 const ALLOWED_SORT_FIELDS = [
@@ -108,12 +109,15 @@ export default async function receivedInvoicesRoutes(
           }));
       };
 
-      const sumCzk = (
+      const sumCzk = async (
         invs: typeof monthInvoices,
         field: "amount" | "vat_amount",
       ) => {
         let total = 0;
-        for (const inv of invs) total += Number(inv[field]) || 0;
+        for (const inv of invs) {
+          const amount = Number(inv[field]) || 0;
+          total += await toCzk(amount, inv.currency);
+        }
         return Math.round(total * 100) / 100;
       };
 
@@ -124,11 +128,11 @@ export default async function receivedInvoicesRoutes(
 
       return success(reply, {
         total_month: aggregateByCurrency(monthInvoices, "amount"),
-        total_month_czk: sumCzk(monthInvoices, "amount"),
+        total_month_czk: await sumCzk(monthInvoices, "amount"),
         vat_month: aggregateByCurrency(monthInvoices, "vat_amount"),
-        vat_month_czk: sumCzk(monthInvoices, "vat_amount"),
+        vat_month_czk: await sumCzk(monthInvoices, "vat_amount"),
         unpaid: aggregateByCurrency(allUnpaid, "amount"),
-        unpaid_czk: sumCzk(allUnpaid, "amount"),
+        unpaid_czk: await sumCzk(allUnpaid, "amount"),
         unpaid_count: allUnpaid.length,
         month_count: monthInvoices.length,
       });

src/routes/admin/trips.ts

@@ -66,6 +66,45 @@ export default async function tripsRoutes(
     });
   });
 
+  // GET /api/admin/trips/users — users with trips.record permission
+  fastify.get(
+    "/users",
+    { preHandler: requireAuth },
+    async (_request, reply) => {
+      const users = await prisma.users.findMany({
+        where: {
+          is_active: true,
+          roles: {
+            is: {
+              OR: [
+                { name: "admin" },
+                {
+                  role_permissions: {
+                    some: { permissions: { name: "trips.record" } },
+                  },
+                },
+              ],
+            },
+          },
+        },
+        select: {
+          id: true,
+          first_name: true,
+          last_name: true,
+          username: true,
+        },
+        orderBy: { last_name: "asc" },
+      });
+      return success(
+        reply,
+        users.map((u) => ({
+          id: u.id,
+          name: `${u.first_name} ${u.last_name}`.trim() || u.username,
+        })),
+      );
+    },
+  );
+
   // GET /api/admin/trips/print — print data for trip report
   fastify.get(
     "/print",

src/schemas/attendance.schema.ts

@@ -39,7 +39,9 @@ export const AttendanceBalancesSchema = z.object({
 
 export const AttendanceBulkSchema = z.object({
   month: z.string().regex(/^\d{4}-\d{2}$/, "Měsíc je povinný (formát YYYY-MM)"),
-  user_ids: z.array(z.number()).min(1, "Vyberte alespoň jednoho zaměstnance"),
+  user_ids: z
+    .array(z.union([z.number(), z.string()]).transform((v) => Number(v)))
+    .min(1, "Vyberte alespoň jednoho zaměstnance"),
   arrival_time: z.string().optional().default("08:00"),
   departure_time: z.string().optional().default("16:30"),
   break_start_time: z.string().optional().default("12:00"),

src/schemas/users.schema.ts

@@ -16,7 +16,10 @@ export const CreateUserSchema = z.object({
 export const UpdateUserSchema = z.object({
   username: z.string().optional(),
   email: z.string().email("Neplatný formát e-mailu").optional(),
-  password: z.string().min(8, "Heslo musí mít alespoň 8 znaků").optional(),
+  password: z.preprocess(
+    (v) => (v === "" ? undefined : v),
+    z.string().min(8, "Heslo musí mít alespoň 8 znaků").optional(),
+  ),
   first_name: z.string().optional(),
   last_name: z.string().optional(),
   role_id: z.union([z.number(), z.string(), z.null()]).optional(),

src/services/attendance.service.ts

@@ -1,9 +1,32 @@
 import { attendance_leave_type, Prisma } from "@prisma/client";
 import prisma from "../config/database";
-import { getBusinessDaysInMonth } from "../utils/czech-holidays";
+import { getBusinessDaysInMonth, isHoliday } from "../utils/czech-holidays";
 import { localDateStr } from "../utils/date";
 import { getSystemSettings } from "./system-settings";
 
+/** Get active users whose role has attendance.record permission (or admin role) */
+async function getAttendanceUsers() {
+  return prisma.users.findMany({
+    where: {
+      is_active: true,
+      roles: {
+        is: {
+          OR: [
+            { name: "admin" },
+            {
+              role_permissions: {
+                some: { permissions: { name: "attendance.record" } },
+              },
+            },
+          ],
+        },
+      },
+    },
+    select: { id: true, first_name: true, last_name: true },
+    orderBy: { last_name: "asc" },
+  });
+}
+
 type AttendanceWithRelations = Prisma.attendanceGetPayload<{
   include: {
     users: { select: { id: true; first_name: true; last_name: true } };
@@ -421,11 +444,7 @@ export async function switchProject(userId: number, projectId: number | null) {
 }
 
 export async function getBalances(year: number) {
-  const users = await prisma.users.findMany({
+  const users = await getAttendanceUsers();
-    where: { is_active: true },
-    select: { id: true, first_name: true, last_name: true },
-    orderBy: { last_name: "asc" },
-  });
 
   const balances: Record<
     string,
@@ -463,11 +482,7 @@ export async function getBalances(year: number) {
 }
 
 export async function getWorkfund(year: number) {
-  const users = await prisma.users.findMany({
+  const users = await getAttendanceUsers();
-    where: { is_active: true },
-    select: { id: true, first_name: true, last_name: true },
-    orderBy: { last_name: "asc" },
-  });
 
   const now = new Date();
   const currentYear = now.getFullYear();
@@ -734,11 +749,7 @@ export async function getPrintData(
   const monthStart = new Date(yr, mo - 1, 1);
   const monthEnd = new Date(yr, mo, 0, 23, 59, 59);
 
-  const users = await prisma.users.findMany({
+  const users = await getAttendanceUsers();
-    where: { is_active: true },
-    select: { id: true, first_name: true, last_name: true },
-    orderBy: { last_name: "asc" },
-  });
 
   const where: Record<string, unknown> = {
     shift_date: { gte: monthStart, lte: monthEnd },
@@ -1083,6 +1094,20 @@ export async function bulkCreateAttendance(data: BulkAttendanceData) {
       }
 
       const shiftDate = new Date(Date.UTC(yr, mo - 1, day, 12, 0, 0));
+
+      if (isHoliday(dateStr)) {
+        await prisma.attendance.create({
+          data: {
+            user_id: userId,
+            shift_date: shiftDate,
+            leave_type: "holiday",
+            leave_hours: 8,
+          },
+        });
+        inserted++;
+        continue;
+      }
+
       await prisma.attendance.create({
         data: {
           user_id: userId,

src/services/exchange-rates.ts

@@ -0,0 +1,65 @@
+/**
+ * Czech National Bank (ČNB) exchange rate service.
+ * Fetches daily rates and caches them.
+ * API: https://api.cnb.cz/cnbapi/exrates/daily
+ */
+
+interface CnbRate {
+  currencyCode: string;
+  rate: number;
+  amount: number;
+}
+
+const rateCache: Record<string, Record<string, number>> = {};
+
+async function fetchRatesForDate(
+  date?: string,
+): Promise<Record<string, number>> {
+  const key = date || "today";
+  if (rateCache[key]) return rateCache[key];
+
+  try {
+    let url = "https://api.cnb.cz/cnbapi/exrates/daily?lang=EN";
+    if (date) url += `&date=${date}`;
+
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`CNB API: ${response.status}`);
+
+    const data = (await response.json()) as { rates: CnbRate[] };
+    const rates: Record<string, number> = { CZK: 1 };
+
+    for (const r of data.rates) {
+      rates[r.currencyCode] = r.rate / r.amount;
+    }
+
+    rateCache[key] = rates;
+    return rates;
+  } catch (err) {
+    console.error("Failed to fetch CNB exchange rates:", err);
+    if (rateCache["today"]) return rateCache["today"];
+    return { CZK: 1, EUR: 25, USD: 22, GBP: 28 };
+  }
+}
+
+/** Convert an amount from a given currency to CZK using CNB rates */
+export async function toCzk(
+  amount: number,
+  currency: string,
+  date?: string,
+): Promise<number> {
+  if (currency === "CZK") return amount;
+  const rates = await fetchRatesForDate(date);
+  const rate = rates[currency];
+  if (!rate) return amount;
+  return Math.round(amount * rate * 100) / 100;
+}
+
+/** Get CNB rate for a currency (CZK per 1 unit), optionally for a specific date */
+export async function getRate(
+  currency: string,
+  date?: string,
+): Promise<number> {
+  if (currency === "CZK") return 1;
+  const rates = await fetchRatesForDate(date);
+  return rates[currency] || 1;
+}

src/services/invoices.service.ts

@@ -1,4 +1,5 @@
 import prisma from "../config/database";
+import { toCzk } from "./exchange-rates";
 
 // Status transition rules matching PHP
 const VALID_TRANSITIONS: Record<string, string[]> = {
@@ -186,10 +187,11 @@ export async function getInvoiceStats(queryMonth?: number, queryYear?: number) {
       }));
   };
 
-  const sumCzk = (invoices: typeof allInvoices) => {
+  const sumCzk = async (invoices: typeof allInvoices) => {
     let total = 0;
     for (const inv of invoices) {
-      total += invoiceTotalWithVat(inv); // Simplified: no real FX conversion
+      const amount = invoiceTotalWithVat(inv);
+      total += await toCzk(amount, inv.currency || "CZK");
     }
     return Math.round(total * 100) / 100;
   };
@@ -224,18 +226,24 @@ export async function getInvoiceStats(queryMonth?: number, queryYear?: number) {
   let vatCzk = 0;
   for (const [, v] of Object.entries(vatMap)) vatCzk += v;
 
+  // VAT also needs conversion
+  let vatCzkConverted = 0;
+  for (const [cur, amount] of Object.entries(vatMap)) {
+    vatCzkConverted += await toCzk(amount, cur);
+  }
+
   return {
     paid_month: aggregateByCurrency(paidInvoices),
-    paid_month_czk: sumCzk(paidInvoices),
+    paid_month_czk: await sumCzk(paidInvoices),
     paid_month_count: paidInvoices.length,
     awaiting: aggregateByCurrency(awaitingInvoices),
-    awaiting_czk: sumCzk(awaitingInvoices),
+    awaiting_czk: await sumCzk(awaitingInvoices),
     awaiting_count: awaitingInvoices.length,
     overdue: aggregateByCurrency(overdueInvoices),
-    overdue_czk: sumCzk(overdueInvoices),
+    overdue_czk: await sumCzk(overdueInvoices),
     overdue_count: overdueInvoices.length,
     vat_month: vatAmounts,
-    vat_month_czk: Math.round(vatCzk * 100) / 100,
+    vat_month_czk: Math.round(vatCzkConverted * 100) / 100,
     month,
     year,
   };