From c67dff4725cae1f9b529ce5fb44f409caa5ecea9 Mon Sep 17 00:00:00 2001 From: BOHA Date: Sun, 7 Jun 2026 08:51:32 +0200 Subject: [PATCH] chore(mui): delete dead admin-*.css stylesheets (forms, buttons, components, tables, datepicker, filemanager, pagination, responsive, dashboard, settings, invoices, warehouse) The page+component MUI migration has dropped all usages of these stylesheets' classes. Verified by grep over src/**/*.{ts,tsx}: none of their selectors are referenced as a className token anywhere. Removed files + their imports from AdminApp.tsx: forms.css, buttons.css, components.css, tables.css, datepicker.css, filemanager.css, pagination.css, responsive.css, dashboard.css, settings.css, invoices.css, warehouse.css Kept: variables.css, base.css, plan.css (foundation), attendance.css (live .attendance-location-map Leaflet container) and offers.css (live .admin-rich-editor / .admin-rich-text-view + .ql-* Quill snow overrides). The standalone
in App.tsx remains styled by base.css (buttons.css only held .admin-btn-scoped spinner modifiers). Gates: tsc -b --noEmit (0), npm run build (ok), vitest (150 passed). Co-Authored-By: Claude Opus 4.8 (1M context) --- src/admin/AdminApp.tsx | 12 - src/admin/buttons.css | 153 ----- src/admin/components.css | 1224 ------------------------------------- src/admin/dashboard.css | 525 ---------------- src/admin/datepicker.css | 211 ------- src/admin/filemanager.css | 199 ------ src/admin/forms.css | 510 ---------------- src/admin/invoices.css | 150 ----- src/admin/pagination.css | 91 --- src/admin/responsive.css | 6 - src/admin/settings.css | 64 -- src/admin/tables.css | 151 ----- src/admin/warehouse.css | 269 -------- 13 files changed, 3565 deletions(-) delete mode 100644 src/admin/buttons.css delete mode 100644 src/admin/components.css delete mode 100644 src/admin/dashboard.css delete mode 100644 src/admin/datepicker.css delete mode 100644 src/admin/filemanager.css delete mode 100644 src/admin/forms.css delete mode 100644 src/admin/invoices.css delete mode 100644 src/admin/pagination.css delete mode 100644 src/admin/responsive.css delete mode 100644 src/admin/settings.css delete mode 100644 src/admin/tables.css delete mode 100644 src/admin/warehouse.css diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx index 81b0ec7..d1dc9ec 100644 --- a/src/admin/AdminApp.tsx +++ b/src/admin/AdminApp.tsx @@ -13,21 +13,9 @@ import Login from "./pages/Login"; import Dashboard from "./pages/Dashboard"; import "./variables.css"; import "./base.css"; -import "./forms.css"; -import "./buttons.css"; -import "./components.css"; -import "./tables.css"; -import "./datepicker.css"; -import "./filemanager.css"; -import "./pagination.css"; -import "./responsive.css"; -import "./dashboard.css"; import "./attendance.css"; import "./plan.css"; -import "./settings.css"; import "./offers.css"; -import "./invoices.css"; -import "./warehouse.css"; const Users = lazy(() => import("./pages/Users")); const Attendance = lazy(() => import("./pages/Attendance")); diff --git a/src/admin/buttons.css b/src/admin/buttons.css deleted file mode 100644 index f7d1b68..0000000 --- a/src/admin/buttons.css +++ /dev/null @@ -1,153 +0,0 @@ -/* ============================================================================ - Buttons - ============================================================================ */ - -.admin-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 8px 14px; - /* 1px transparent border on ALL buttons so switching between primary - and secondary doesn't cause a 1px layout shift (the border is always - 1px — only the colour changes). */ - border: 1px solid transparent; - 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); - border-color: var(--accent-color); - color: #fff; -} - -.admin-btn-primary:hover:not(:disabled) { - background: var(--accent-hover); - border-color: 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-danger { - background: var(--danger); - border-color: var(--danger); - color: #fff; -} - -.admin-btn-danger:hover:not(:disabled) { - background: color-mix(in srgb, var(--danger) 88%, #000); - border-color: color-mix(in srgb, var(--danger) 88%, #000); - transform: translateY(-1px); - box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 30%, transparent); -} - -.admin-btn-danger .admin-spinner { - border-color: rgba(255, 255, 255, 0.3); - border-top-color: #fff; -} - -.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; - } -} diff --git a/src/admin/components.css b/src/admin/components.css deleted file mode 100644 index e0ce4a1..0000000 --- a/src/admin/components.css +++ /dev/null @@ -1,1224 +0,0 @@ -/* ============================================================================ - 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; - } -} - -/* Danger card — highlighted border for alert/important cards */ -.admin-card-danger { - border: 2px solid var(--danger); -} - -/* ============================================================================ - 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); -} - -.admin-badge-incoming { - background: var(--success-soft); - color: var(--success); -} - -.admin-badge-outgoing { - background: var(--info-soft); - color: var(--info); -} - -/* 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); - backdrop-filter: blur(2px); - -webkit-backdrop-filter: blur(2px); - 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; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.admin-modal-heading { - min-width: 0; -} - -.admin-modal-title { - font-size: 16px; - font-weight: 700; - color: var(--text-primary); -} - -.admin-modal-subtitle { - margin: 2px 0 0; - font-size: 12.5px; - font-weight: 500; - color: var(--text-secondary); -} - -.admin-modal-close { - flex-shrink: 0; - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - padding: 0; - background: transparent; - border: 1px solid transparent; - color: var(--text-muted); - border-radius: var(--border-radius-sm); - cursor: pointer; - transition: - background var(--motion-fast) ease, - color var(--motion-fast) ease, - border-color var(--motion-fast) ease, - transform var(--motion-fast) ease; -} - -.admin-modal-close:hover:not(:disabled) { - background: var(--bg-tertiary); - color: var(--text-primary); - border-color: var(--border-color); - transform: rotate(90deg); -} - -.admin-modal-close:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.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: space-between; - align-items: center; - flex-shrink: 0; -} - -.admin-modal-footer-left, -.admin-modal-footer-right { - display: flex; - gap: 0.5rem; - align-items: center; -} - -.admin-modal-footer-right { - margin-left: auto; -} - -@media (max-width: 480px) { - .admin-modal-footer { - flex-direction: column; - align-items: stretch; - gap: 0.5rem; - } - .admin-modal-footer-left, - .admin-modal-footer-right { - width: 100%; - } - .admin-modal-footer-left .admin-btn, - .admin-modal-footer-right .admin-btn { - flex: 1; - } - .admin-modal-footer-left { - order: 2; - } - .admin-modal-footer-right { - order: 1; - margin-left: 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); -} - -@media (max-width: 640px) { - .admin-tabs { - display: flex; - max-width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - } - - .admin-tabs::-webkit-scrollbar { - display: none; - } - - .admin-tab { - flex: 0 0 auto; - min-height: 44px; - } -} - -/* ============================================================================ - 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; - margin-bottom: 1rem; -} - -.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, - .admin-kpi-4, - .admin-kpi-3 { - 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; -} - -/* ============================================================================ - Search Bar & Filters - ============================================================================ */ - -.admin-search-bar { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - align-items: center; -} - -.admin-search-bar .admin-form-input, -.admin-search-bar .admin-form-select { - flex: 1 1 140px; - min-width: 140px; - max-width: 280px; -} - -.admin-search-bar .react-datepicker-wrapper { - flex: 1 1 140px; - min-width: 140px; - max-width: 280px; -} - -.admin-search-bar .admin-btn { - flex-shrink: 0; -} - -.admin-search { - position: relative; - flex: 1 1 200px; - min-width: 180px; - max-width: 320px; - display: flex; - align-items: center; -} - -.admin-search svg { - position: absolute; - left: 10px; - color: var(--text-muted); - pointer-events: none; -} - -.admin-search .admin-form-input { - padding-left: 32px; -} - -@media (max-width: 768px) { - /* Compact 2-up filter grid instead of a tall full-width column: - the search box spans the row; the filter selects / date pickers sit - two-per-row; the reset button spans the row. Touch sizing (44px height + - 16px font from forms.css) is unchanged — this just halves the vertical - footprint of multi-filter bars on phones. */ - .admin-search-bar { - align-items: stretch; - } - - /* Search box spans the full row (handles both the .admin-search wrapper - and a bare text input used directly as the search field). */ - .admin-search-bar > .admin-search, - .admin-search-bar > .admin-form-input:not([type="date"]) { - flex: 1 1 100%; - max-width: none; - } - - .admin-search { - min-width: 0; - max-width: none; - } - - /* Filters (status/supplier selects, native date inputs, datepicker - wrappers): two per row. */ - .admin-search-bar > .admin-form-select, - .admin-search-bar > .admin-form-input[type="date"], - .admin-search-bar > .react-datepicker-wrapper { - flex: 1 1 calc(50% - 0.25rem); - min-width: 0; - max-width: none; - } - - /* Action buttons (e.g. "Zrušit filtry") span the full row. */ - .admin-search-bar > .admin-btn { - flex: 1 1 100%; - } -} - -/* ============================================================================ - Item Picker (Warehouse) - ============================================================================ */ - -.admin-item-picker-list { - position: absolute; - top: 100%; - left: 0; - right: 0; - z-index: 100; - max-height: 240px; - 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; - margin: 0; - list-style: none; -} - -.admin-item-picker-list::-webkit-scrollbar { - width: 5px; -} - -.admin-item-picker-list::-webkit-scrollbar-track { - background: transparent; -} - -.admin-item-picker-list::-webkit-scrollbar-thumb { - background: var(--border-color); - border-radius: 99px; -} - -.admin-item-picker-list::-webkit-scrollbar-thumb:hover { - background: var(--text-muted); -} - -.admin-item-picker-item { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.5rem; - padding: 8px 12px; - cursor: pointer; - transition: background var(--transition); - border-radius: 4px; - margin: 0 4px; -} - -.admin-item-picker-item:hover, -.admin-item-picker-item.active { - background: var(--bg-secondary); -} - -.admin-item-picker-name { - font-size: 13px; - font-weight: 500; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - flex: 1; -} - -.admin-item-picker-number { - font-size: 11.5px; - color: var(--text-tertiary); - white-space: nowrap; -} - -.admin-item-picker-qty { - font-size: 11.5px; - color: var(--text-secondary); - white-space: nowrap; -} - -@media (max-width: 640px) { - .admin-item-picker-list { - max-width: calc(100vw - 24px); - overflow-y: auto; - } - - .admin-item-picker-item { - min-height: 44px; - } -} diff --git a/src/admin/dashboard.css b/src/admin/dashboard.css deleted file mode 100644 index b46d0f0..0000000 --- a/src/admin/dashboard.css +++ /dev/null @@ -1,525 +0,0 @@ -/* ============================================================================ - Dashboard - ============================================================================ */ - -/* Dashboard layout */ -.dash { - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -.dash .admin-page-header { - margin-bottom: 0; -} - -/* Quick actions */ -.dash-quick-actions { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.625rem; -} - -.dash-quick-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0.75rem 1rem; - border: none; - border-radius: var(--border-radius-sm); - font-size: 0.8125rem; - font-weight: 600; - font-family: inherit; - text-decoration: none; - cursor: pointer; - transition: all 0.15s ease; - white-space: nowrap; -} - -.dash-quick-btn:disabled { - opacity: 0.7; - cursor: not-allowed; - transform: none !important; -} - -.dash-quick-btn-success { - background: var(--success-soft); - color: var(--success); -} -.dash-quick-btn-info { - background: var(--info-soft); - color: var(--info); -} -.dash-quick-btn-warning { - background: var(--warning-soft); - color: var(--warning); -} -.dash-quick-btn-danger { - background: var(--danger-soft); - color: var(--danger); -} - -.dash-quick-btn:hover { - transform: translateY(-1px); - filter: brightness(0.95); -} - -[data-theme="light"] .dash-quick-btn-success { - background: var(--success); - color: #fff; -} -[data-theme="light"] .dash-quick-btn-info { - background: var(--info); - color: #fff; -} -[data-theme="light"] .dash-quick-btn-warning { - background: var(--warning); - color: #fff; -} -[data-theme="light"] .dash-quick-btn-danger { - background: var(--danger); - color: #fff; -} - -/* Main content 3-col grid */ -.dash-main-grid { - display: grid; - grid-template-columns: 1.4fr 1fr 1fr; - gap: 1rem; -} - -/* Card link */ -.dash-card-link { - font-size: 0.75rem; - color: var(--accent-color); - font-weight: 600; - text-decoration: none; - transition: opacity 0.15s; -} - -.dash-card-link:hover { - opacity: 0.8; -} - -/* Activity rows */ -.dash-activity-row { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1.25rem; - border-bottom: 1px solid var(--border-color); - transition: background 0.1s; -} - -.dash-activity-row:last-child { - border-bottom: none; -} - -.dash-activity-row:hover { - background: var(--bg-tertiary); -} - -.dash-activity-icon { - width: 34px; - height: 34px; - border-radius: var(--border-radius-sm); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.dash-activity-icon.success { - background: var(--success-soft); - color: var(--success); -} -.dash-activity-icon.info { - background: var(--info-soft); - color: var(--info); -} -.dash-activity-icon.warning { - background: var(--warning-soft); - color: var(--warning); -} -.dash-activity-icon.danger { - background: var(--danger-soft); - color: var(--danger); -} -.dash-activity-icon.accent { - background: var(--accent-soft); - color: var(--accent-color); -} -.dash-activity-icon.muted { - background: var(--bg-tertiary); - color: var(--text-secondary); -} - -.dash-activity-main { - flex: 1; - min-width: 0; -} - -.dash-activity-text { - font-size: 0.8125rem; - font-weight: 500; - color: var(--text-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.dash-activity-sub { - font-size: 0.75rem; - color: var(--text-muted); - margin-top: 1px; -} - -.dash-activity-time { - font-size: 0.6875rem; - color: var(--text-muted); - flex-shrink: 0; -} - -/* Presence rows */ -.dash-presence-row { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.625rem 1.25rem; - border-bottom: 1px solid var(--border-color); -} - -.dash-presence-row:last-child { - border-bottom: none; -} - -.dash-presence-avatar { - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.6875rem; - font-weight: 700; - flex-shrink: 0; - text-transform: uppercase; -} - -.dash-presence-avatar.dash-status-in { - background: var(--success-soft); - color: var(--success); -} -.dash-presence-avatar.dash-status-away { - background: var(--warning-soft); - color: var(--warning); -} -.dash-presence-avatar.dash-status-out { - background: var(--bg-tertiary); - color: var(--text-muted); -} -.dash-presence-avatar.dash-status-leave { - background: var(--info-soft); - color: var(--info); -} - -.dash-status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - flex-shrink: 0; -} - -.dash-status-dot.dash-status-in { - background: var(--success); -} -.dash-status-dot.dash-status-away { - background: var(--warning); -} -.dash-status-dot.dash-status-out { - background: var(--text-muted); -} -.dash-status-dot.dash-status-leave { - background: var(--info); -} - -.dash-presence-label.dash-status-in { - color: var(--success); -} -.dash-presence-label.dash-status-away { - color: var(--warning); -} -.dash-presence-label.dash-status-out { - color: var(--text-muted); -} -.dash-presence-label.dash-status-leave { - color: var(--info); -} - -.dash-presence-name { - flex: 1; - font-size: 0.8125rem; - font-weight: 500; - color: var(--text-primary); -} - -.dash-presence-end { - display: flex; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; -} - -.dash-presence-label { - font-size: 0.75rem; - font-weight: 500; -} - -.dash-presence-time { - font-size: 0.6875rem; - color: var(--text-muted); -} - -/* Right column */ -.dash-right-col { - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Project rows */ -.dash-project-row { - display: block; - padding: 0.75rem 1.25rem; - border-bottom: 1px solid var(--border-color); - text-decoration: none; - transition: background 0.1s; -} - -.dash-project-row:last-child { - border-bottom: none; -} - -.dash-project-row:hover { - background: var(--bg-tertiary); -} - -.dash-project-name { - font-size: 0.8125rem; - font-weight: 500; - color: var(--text-primary); -} - -.dash-project-customer { - font-size: 0.75rem; - color: var(--text-muted); - margin-top: 1px; -} - -/* Stat mini rows */ -.dash-stat-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.625rem 1.25rem; - border-bottom: 1px solid var(--border-color); - font-size: 0.8125rem; - color: var(--text-secondary); -} - -.dash-stat-row:last-child { - border-bottom: none; -} - -/* Empty row */ -.dash-empty-row { - padding: 1.5rem; - text-align: center; - color: var(--text-muted); - font-size: 0.8125rem; -} - -/* Bottom stacked layout (profile + sessions) */ -.dash-bottom { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.dash .admin-card { - margin-bottom: 0; -} - -/* Profile grid inside account card */ -.dash-profile-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.75rem 1.5rem; -} - -.dash-profile-item { - display: flex; - flex-direction: column; - gap: 0.125rem; -} - -.dash-profile-label { - font-size: 0.6875rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--text-tertiary); -} - -.dash-profile-value { - font-size: 0.875rem; - color: var(--text-primary); - font-weight: 500; -} - -/* ============================================================================ - Responsive - ============================================================================ */ - -@media (max-width: 1024px) { - .dash-main-grid { - grid-template-columns: 1fr 1fr; - } - - .dash-right-col { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 1fr 1fr; - } -} - -@media (max-width: 768px) { - .dash-quick-actions { - grid-template-columns: repeat(2, 1fr); - } - - .dash-main-grid { - grid-template-columns: 1fr; - } - - .dash-right-col { - grid-template-columns: 1fr; - } - - .dash-bottom { - grid-template-columns: 1fr; - } -} - -@media (max-width: 480px) { - .dash-quick-actions { - grid-template-columns: 1fr 1fr; - } - .dash-profile-grid { - grid-template-columns: 1fr; - } -} - -/* ============================================================================ - Sessions / Devices - ============================================================================ */ - -.dash-sessions-list { - display: flex; - flex-direction: column; -} - -.dash-session-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border-color); - transition: var(--transition); -} - -.dash-session-item:last-child { - border-bottom: none; -} - -.dash-session-item:hover { - background: var(--bg-tertiary); -} - -.dash-session-item-current { - background: var(--row-current); -} - -.dash-session-item-current:hover { - background: var(--row-current-hover); -} - -.dash-session-icon { - width: 40px; - height: 40px; - border-radius: var(--border-radius-sm); - background: var(--bg-tertiary); - color: var(--text-secondary); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.dash-session-item-current .dash-session-icon { - background: color-mix(in srgb, var(--success) 15%, transparent); - color: var(--success); -} - -.dash-session-info { - flex: 1; - min-width: 0; -} - -.dash-session-device { - font-weight: 500; - color: var(--text-primary); - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.25rem; -} - -.dash-session-meta { - font-size: 0.8125rem; - color: var(--text-muted); - margin-top: 0.25rem; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.5rem; -} - -.dash-session-meta-separator { - color: var(--border-color); -} - -.dash-session-actions { - flex-shrink: 0; -} - -@media (max-width: 640px) { - .dash-session-item { - padding: 1rem; - gap: 0.75rem; - } - - .dash-session-icon { - width: 36px; - height: 36px; - } - - .dash-session-device { - font-size: 0.875rem; - } - - .dash-session-meta { - font-size: 0.75rem; - } -} diff --git a/src/admin/datepicker.css b/src/admin/datepicker.css deleted file mode 100644 index c60452c..0000000 --- a/src/admin/datepicker.css +++ /dev/null @@ -1,211 +0,0 @@ -/* ============================================================================ - 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; -} - -/* Mobile safety net — keep the popper inside the viewport on small phones. - (Native date input is used on touch; this guards the rare desktop-style popper.) */ -@media (max-width: 480px) { - .react-datepicker-popper { - max-width: calc(100vw - 24px); - } - - .react-datepicker { - font-size: 0.8rem !important; - } -} diff --git a/src/admin/filemanager.css b/src/admin/filemanager.css deleted file mode 100644 index 4995d0b..0000000 --- a/src/admin/filemanager.css +++ /dev/null @@ -1,199 +0,0 @@ -/* ============================================================================ - 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; -} - -/* ============================================================================ - File Manager — mobile - ============================================================================ */ - -@media (max-width: 640px) { - /* Toolbar wraps so actions drop below the path instead of overflowing */ - .fm-toolbar { - flex-wrap: wrap; - } - - /* New-folder input goes full width (override the 250px desktop cap) */ - .fm-new-folder .admin-form-input { - max-width: none; - width: 100%; - } - - /* Breadcrumb scrolls horizontally instead of overflowing the container */ - .fm-breadcrumb { - flex-wrap: nowrap; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - .fm-breadcrumb-segment { - flex-shrink: 0; - } -} diff --git a/src/admin/forms.css b/src/admin/forms.css deleted file mode 100644 index 51dc4a9..0000000 --- a/src/admin/forms.css +++ /dev/null @@ -1,510 +0,0 @@ -/* ============================================================================ - 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, - .admin-form-row-3, - .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; -} - -@media (max-width: 640px) { - .admin-customer-dropdown { - max-width: calc(100vw - 24px); - overflow-y: auto; - } - - .admin-customer-dropdown-item { - display: flex; - flex-direction: column; - justify-content: center; - min-height: 44px; - } - - .admin-customer-selected .admin-btn-icon { - min-width: 44px; - min-height: 44px; - margin-right: -10px; - } -} diff --git a/src/admin/invoices.css b/src/admin/invoices.css deleted file mode 100644 index 4d52213..0000000 --- a/src/admin/invoices.css +++ /dev/null @@ -1,150 +0,0 @@ -/* ============================================================================ - Invoice Status Badges - ============================================================================ */ - -.admin-badge-invoice-issued { - background: color-mix(in srgb, var(--info) 15%, transparent); - color: var(--info); -} - -.admin-badge-invoice-paid { - background: color-mix(in srgb, var(--success) 15%, transparent); - color: var(--success); -} - -.admin-badge-invoice-overdue { - background: color-mix(in srgb, var(--danger) 15%, transparent); - color: var(--danger); -} - -/* ============================================================================ - Invoice Month Navigation - ============================================================================ */ - -.invoice-month-nav { - display: flex; - align-items: center; - gap: 0.5rem; - justify-content: center; - margin-bottom: 0.875rem; -} - -.invoice-month-nav span { - font-weight: 600; - font-size: 0.875rem; - color: var(--text-primary); - min-width: 120px; - text-align: center; -} - -.invoice-month-btn { - display: flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border-radius: 6px; - border: 1px solid var(--border-color); - background: transparent; - color: var(--text-secondary); - cursor: pointer; - transition: - border-color 0.15s, - color 0.15s; -} - -.invoice-month-btn:hover:not(:disabled) { - border-color: var(--accent-color); - color: var(--accent-color); -} - -.invoice-month-btn:disabled { - opacity: 0.3; - cursor: default; -} - -/* ============================================================================ - Received Invoices - Upload Modal - ============================================================================ */ - -.received-upload-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.received-upload-card { - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - overflow: hidden; -} - -.received-upload-card-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.5rem 0.75rem; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-color); -} - -.received-upload-file-info { - display: flex; - align-items: center; - gap: 0.5rem; - min-width: 0; - color: var(--text-secondary); -} - -.received-upload-file-name { - font-size: 0.8125rem; - font-weight: 500; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 300px; -} - -.received-upload-file-size { - font-size: 0.75rem; - color: var(--text-tertiary); - white-space: nowrap; -} - -.received-upload-card-fields { - padding: 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.received-upload-row { - display: flex; - gap: 0.5rem; - align-items: flex-start; -} - -@media (max-width: 640px) { - /* Month-nav row may wrap so it never forces horizontal page overflow */ - .invoice-month-nav { - flex-wrap: wrap; - } - - /* 44px touch target for the prev/next month buttons */ - .invoice-month-btn { - width: 44px; - height: 44px; - min-width: 44px; - min-height: 44px; - } - - .received-upload-row { - flex-direction: column; - } - - .received-upload-file-name { - max-width: 200px; - } -} diff --git a/src/admin/pagination.css b/src/admin/pagination.css deleted file mode 100644 index b08b3e8..0000000 --- a/src/admin/pagination.css +++ /dev/null @@ -1,91 +0,0 @@ -/* ============================================================================ - 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; - } -} diff --git a/src/admin/responsive.css b/src/admin/responsive.css deleted file mode 100644 index caba9ea..0000000 --- a/src/admin/responsive.css +++ /dev/null @@ -1,6 +0,0 @@ -/* ============================================================================ - 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. - ============================================================================ */ diff --git a/src/admin/settings.css b/src/admin/settings.css deleted file mode 100644 index 6388b4d..0000000 --- a/src/admin/settings.css +++ /dev/null @@ -1,64 +0,0 @@ -/* ============================================================================ - Settings / Permissions - ============================================================================ */ - -.admin-sidebar-settings { - border-top: 1px solid var(--border-color); - padding: 0.5rem 0.75rem; - margin-top: auto; -} - -.admin-permission-group { - border: 1px solid var(--border-color); - border-radius: 0.5rem; - overflow: hidden; - margin-bottom: 0.75rem; -} - -.admin-permission-group-title { - padding: 0.625rem 0.75rem; - background: var(--bg-secondary); -} - -.admin-permission-group-title .admin-form-checkbox span { - font-weight: 600; - font-size: 0.8125rem; - text-transform: uppercase; - letter-spacing: 0.025em; - color: var(--text-secondary); -} - -.admin-permission-list { - display: flex; - flex-direction: column; -} - -.admin-permission-item { - padding: 0.5rem 0.75rem; - transition: background-color 0.15s; -} - -.admin-permission-item:hover { - background: var(--bg-secondary); -} - -.admin-permission-item + .admin-permission-item { - border-top: 1px solid var(--border-color); -} - -.admin-permission-desc { - font-size: 0.75rem; - color: var(--text-tertiary); - line-height: 1.4; - padding-left: 2.75rem; -} - -@media (max-width: 768px) { - .admin-permission-item { - padding: 0.75rem; - } - - .admin-permission-item .admin-form-checkbox { - min-height: 44px; - } -} diff --git a/src/admin/tables.css b/src/admin/tables.css deleted file mode 100644 index 95aec72..0000000 --- a/src/admin/tables.css +++ /dev/null @@ -1,151 +0,0 @@ -/* ============================================================================ - 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; - } -} - -/* Row actions — enlarge touch targets so icon buttons are tappable */ -@media (max-width: 768px) { - .admin-table-actions a, - .admin-table-actions button, - .admin-table-actions .admin-btn-icon { - min-width: 44px; - min-height: 44px; - } -} - -.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; -} - -/* Inactive row — dimmed text to indicate disabled/deactivated items */ -.admin-table-row-inactive td { - color: var(--text-muted); -} - -.admin-table-row-inactive td a { - color: var(--text-muted); -} - -/* 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; - } -} diff --git a/src/admin/warehouse.css b/src/admin/warehouse.css deleted file mode 100644 index 1fff48f..0000000 --- a/src/admin/warehouse.css +++ /dev/null @@ -1,269 +0,0 @@ -/* ============================================================================ - Warehouse Module - ============================================================================ */ - -/* Items table — editable line items for receipts, issues, inventory forms. - Mirrors the .offers-items-table pattern from offers.css. */ -.admin-warehouse-movement-table { - overflow-x: auto; - overflow-y: hidden; - margin-bottom: 1rem; - border: 1px solid var(--border-color); - border-radius: 0.5rem; -} - -.admin-warehouse-movement-table .admin-table { - min-width: 700px; - margin: 0; -} - -.admin-warehouse-movement-table .admin-table thead th { - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--text-tertiary); - padding: 8px 10px; - white-space: nowrap; -} - -.admin-warehouse-movement-table .admin-table td { - vertical-align: middle; - padding: 8px 10px; -} - -.admin-warehouse-movement-table .admin-table tbody tr { - transition: background var(--transition); -} - -.admin-warehouse-movement-table .admin-table tbody tr:hover { - background: var(--table-row-hover); -} - -.admin-warehouse-movement-table .admin-table td .admin-form-input { - display: block; - padding: 6px 8px; - font-size: 13px; - min-height: 32px; -} - -.admin-warehouse-movement-table .admin-table td .admin-form-select { - display: block; - padding: 6px 32px 6px 8px; - font-size: 13px; - min-height: 32px; -} - -/* Action column — right-aligned, fixed narrow width */ -.admin-warehouse-movement-table .admin-table th:last-child, -.admin-warehouse-movement-table .admin-table td:last-child { - width: 70px; - min-width: 70px; - text-align: right; - padding: 8px 12px 8px 4px; -} - -.admin-warehouse-movement-table - .admin-table - td:last-child - .admin-table-actions { - justify-content: flex-end; -} - -/* Add-row button sits below the table */ -.admin-warehouse-movement-table + .admin-btn.admin-btn-secondary, -.admin-warehouse-add-row-btn { - margin-top: 0.25rem; -} - -/* Column width hints for stable layout */ -.admin-warehouse-col-item { - width: 28%; - min-width: 160px; -} - -.admin-warehouse-col-batch { - width: 14%; - min-width: 100px; -} - -.admin-warehouse-col-qty { - width: 10%; - min-width: 80px; -} - -.admin-warehouse-col-price { - width: 10%; - min-width: 80px; -} - -.admin-warehouse-col-location { - width: 14%; - min-width: 100px; -} - -.admin-warehouse-col-notes { - min-width: 100px; -} - -/* File dropzone — used in receipt form */ -.admin-warehouse-dropzone { - border: 2px dashed var(--border-color); - border-radius: 8px; - padding: 2rem; - text-align: center; - cursor: pointer; - transition: - border-color 0.2s, - background 0.2s; -} - -.admin-warehouse-dropzone:hover { - border-color: var(--accent-color); - background: var(--accent-light); -} - -.admin-warehouse-dropzone-icon { - color: var(--text-tertiary); - margin: 0 auto 0.5rem; -} - -.admin-warehouse-dropzone-text { - color: var(--text-secondary); -} - -.admin-warehouse-dropzone-hint { - color: var(--text-tertiary); - font-size: 0.8rem; - margin-top: 0.25rem; -} - -/* Danger row highlight for below-minimum items */ -.admin-warehouse-row-danger td { - background: var(--danger-light); -} - -.admin-warehouse-row-danger td.admin-mono { - color: var(--danger); -} - -.admin-warehouse-danger-value { - color: var(--danger) !important; -} - -/* KPI grid overrides for warehouse dashboard — use shared admin-kpi-grid */ -.admin-warehouse-kpi { - margin-bottom: 1.5rem; -} - -/* File upload dropzone for receipt attachments */ -.admin-warehouse-upload { - border: 2px dashed var(--border-color); - border-radius: 8px; - padding: 2rem; - text-align: center; - cursor: pointer; - transition: - border-color 0.2s, - background 0.2s; -} - -.admin-warehouse-upload:hover { - border-color: var(--accent-color); - background: var(--accent-light); -} - -.admin-warehouse-upload-icon { - color: var(--text-tertiary); - margin: 0 auto 0.5rem; - display: block; -} - -.admin-warehouse-upload-text { - color: var(--text-secondary); -} - -.admin-warehouse-upload-hint { - color: var(--text-tertiary); - font-size: 0.8rem; - margin-top: 0.25rem; -} - -/* Empty state inside table rows */ -.admin-table .admin-empty-state { - padding: 2rem 0; - text-align: center; - color: var(--text-tertiary); - font-size: 0.875rem; -} - -/* Responsive overrides */ -@media (max-width: 768px) { - .admin-warehouse-movement-table .admin-table td .admin-form-input { - font-size: 16px; - min-height: 44px; - padding: 9px 10px; - } - - .admin-warehouse-movement-table .admin-table td .admin-form-select { - font-size: 16px; - min-height: 44px; - padding: 9px 32px 9px 10px; - } - - .admin-warehouse-col-qty { - width: 4rem !important; - } - - .admin-warehouse-col-price { - width: 5.5rem !important; - } - - .admin-warehouse-col-batch { - width: 5rem !important; - } - - .admin-warehouse-col-location { - width: 5rem !important; - } -} - -@media (max-width: 640px) { - .admin-warehouse-movement-table { - margin: 0 -1rem; - width: calc(100% + 2rem); - border-radius: 0; - border-left: none; - border-right: none; - } - - .admin-warehouse-movement-table .admin-table { - min-width: 700px; - } - - .admin-warehouse-movement-table .admin-table td { - padding: 6px; - font-size: 12px; - } - - .admin-warehouse-movement-table .admin-table th { - font-size: 10px; - padding: 6px; - } - - .admin-warehouse-col-qty { - width: 3.5rem !important; - } - - .admin-warehouse-col-price { - width: 5rem !important; - } - - .admin-warehouse-col-batch { - width: 4rem !important; - } - - .admin-warehouse-col-location { - width: 4rem !important; - } -}