@nice2dev/ui-erp 1.0.11 → 1.0.14

package/dist/style.css

@@ -8,22 +8,22 @@
    ============================================================================= */
 
 :root {
-  --erp-primary: #6366f1;
-  --erp-primary-dark: #4f46e5;
-  --erp-primary-light: #818cf8;
-  --erp-success: #22c55e;
-  --erp-warning: #f59e0b;
-  --erp-error: #ef4444;
-  --erp-info: #3b82f6;
-  --erp-bg: #0f172a;
-  --erp-surface: #1e293b;
-  --erp-surface-alt: #334155;
-  --erp-border: #475569;
-  --erp-text: #f1f5f9;
-  --erp-text-muted: #94a3b8;
+  --erp-primary: var(--nice-primary, #6366f1);
+  --erp-primary-dark: var(--nice-primary-dark, #4f46e5);
+  --erp-primary-light: var(--nice-primary-light, #818cf8);
+  --erp-success: var(--nice-success, #22c55e);
+  --erp-warning: var(--nice-warning, #f59e0b);
+  --erp-error: var(--nice-danger, #ef4444);
+  --erp-info: var(--nice-info, #3b82f6);
+  --erp-bg: var(--nice-bg, #0f172a);
+  --erp-surface: var(--nice-bg-secondary, #1e293b);
+  --erp-surface-alt: var(--nice-bg-tertiary, #334155);
+  --erp-border: var(--nice-border, #475569);
+  --erp-text: var(--nice-text, #f1f5f9);
+  --erp-text-muted: var(--nice-text-muted, #94a3b8);
   --erp-radius: 8px;
   --erp-radius-sm: 4px;
-  --erp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  --erp-shadow: 0 4px 6px -1px var(--nice-overlay-30, rgba(0, 0, 0, 0.3));
   --erp-transition: 150ms ease;
 }
 
@@ -45,7 +45,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 20px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-5, 20px);
   background: var(--erp-surface);
   border-bottom: 1px solid var(--erp-border);
 }
@@ -59,12 +59,12 @@
 .time-unit-selector,
 .view-selector {
   display: flex;
-  gap: 4px;
+  gap: var(--nice-space-1, 4px);
 }
 
 .unit-button,
 .view-button {
-  padding: 6px 12px;
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);
   border: 1px solid var(--erp-border);
   background: transparent;
   color: var(--erp-text);
@@ -87,7 +87,7 @@
 
 .add-task-button,
 .add-button {
-  padding: 8px 16px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
   border: none;
   background: var(--erp-primary);
   color: white;
@@ -122,7 +122,7 @@
 .task-list__header {
   display: flex;
   align-items: center;
-  padding: 12px;
+  padding: var(--nice-space-3, 12px);
   background: var(--erp-surface-alt);
   border-bottom: 1px solid var(--erp-border);
   font-size: 0.75rem;
@@ -142,8 +142,8 @@
 .task-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: var(--nice-space-2, 8px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
   border-bottom: 1px solid var(--erp-border);
   cursor: pointer;
   transition: background var(--erp-transition);
@@ -154,7 +154,7 @@
 }
 
 .task-row--selected {
-  background: rgba(99, 102, 241, 0.1);
+  background: var(--nice-accent-tint-10, rgba(99, 102, 241, 0.1));
 }
 
 .collapse-button {
@@ -170,7 +170,7 @@
 .task-icon {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: var(--nice-radius-full, 50%);
   flex-shrink: 0;
 }
 
@@ -220,7 +220,7 @@
 
 .time-column {
   flex-shrink: 0;
-  padding: 12px 4px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-1, 4px);
   text-align: center;
   font-size: 0.75rem;
   color: var(--erp-text-muted);
@@ -264,11 +264,11 @@
   top: -24px;
   left: 50%;
   transform: translateX(-50%);
-  padding: 2px 6px;
+  padding: var(--nice-space-0-5, 2px) var(--nice-space-1-5, 6px);
   background: var(--erp-error);
   color: white;
   font-size: 0.625rem;
-  border-radius: 2px;
+  border-radius: var(--nice-radius-sm, 2px);
   white-space: nowrap;
 }
 
@@ -290,7 +290,7 @@
 }
 
 .task-bar:hover {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 2px var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3));
 }
 
 .task-bar--dragging {
@@ -309,7 +309,7 @@
   width: 16px;
   height: 16px;
   transform: rotate(45deg);
-  border-radius: 2px;
+  border-radius: var(--nice-radius-sm, 2px);
 }
 
 .progress-fill {
@@ -317,7 +317,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--nice-overlay-30, rgba(0, 0, 0, 0.3));
   pointer-events: none;
 }
 
@@ -340,7 +340,7 @@
   font-size: 0.75rem;
   color: white;
   white-space: nowrap;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 2px var(--nice-overlay-50, rgba(0, 0, 0, 0.5));
 }
 
 .task-tooltip {
@@ -348,7 +348,7 @@
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  padding: 8px 12px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
   background: var(--erp-surface);
   border: 1px solid var(--erp-border);
   border-radius: var(--erp-radius);
@@ -363,7 +363,7 @@
 .tooltip-assignees {
   font-size: 0.75rem;
   color: var(--erp-text-muted);
-  margin-top: 4px;
+  margin-top: var(--nice-space-1, 4px);
 }
 
 .dependencies-layer {
@@ -393,7 +393,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 20px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-5, 20px);
   background: var(--erp-surface);
   border-bottom: 1px solid var(--erp-border);
 }
@@ -405,7 +405,7 @@
 }
 
 .date-range {
-  margin-left: 16px;
+  margin-left: var(--nice-space-4, 16px);
   font-size: 0.875rem;
   color: var(--erp-text-muted);
 }
@@ -413,9 +413,9 @@
 .conflicts-badge {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: rgba(239, 68, 68, 0.1);
+  gap: var(--nice-space-1-5, 6px);
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);
+  background: var(--nice-danger-tint-10, rgba(239, 68, 68, 0.1));
   border: 1px solid var(--erp-error);
   border-radius: var(--erp-radius);
   color: var(--erp-error);
@@ -424,8 +424,8 @@
 
 .allocation__legend {
   display: flex;
-  gap: 20px;
-  padding: 8px 20px;
+  gap: var(--nice-space-5, 20px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-5, 20px);
   background: var(--erp-surface-alt);
   border-bottom: 1px solid var(--erp-border);
   font-size: 0.75rem;
@@ -435,13 +435,13 @@
 .legend-item {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nice-space-1-5, 6px);
 }
 
 .legend-color {
   width: 16px;
   height: 16px;
-  border-radius: 2px;
+  border-radius: var(--nice-radius-sm, 2px);
 }
 
 .allocation__grid {
@@ -463,7 +463,7 @@
 .resource-header {
   width: 280px;
   flex-shrink: 0;
-  padding: 12px 16px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-4, 16px);
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--erp-text-muted);
@@ -478,7 +478,7 @@
 
 .time-header {
   min-width: 80px;
-  padding: 12px 8px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-2, 8px);
   text-align: center;
   font-size: 0.75rem;
   color: var(--erp-text-muted);
@@ -500,8 +500,8 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
+  gap: var(--nice-space-2, 8px);
+  padding: var(--nice-space-3, 12px) var(--nice-space-4, 16px);
   background: var(--erp-surface);
   border-right: 1px solid var(--erp-border);
   cursor: pointer;
@@ -556,7 +556,7 @@
 
 .time-cell {
   min-width: 80px;
-  padding: 8px;
+  padding: var(--nice-space-2, 8px);
   border-right: 1px solid var(--erp-border);
   cursor: pointer;
   transition: all var(--erp-transition);
@@ -565,22 +565,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--nice-space-1, 4px);
 }
 
 .time-cell:hover {
-  background-color: rgba(99, 102, 241, 0.1) !important;
+  background-color: var(--nice-accent-tint-10, rgba(99, 102, 241, 0.1)) !important;
 }
 
 .allocation-indicators {
   display: flex;
-  gap: 2px;
+  gap: var(--nice-space-0-5, 2px);
 }
 
 .allocation-dot {
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: var(--nice-radius-full, 50%);
   background: var(--erp-primary);
   cursor: pointer;
 }
@@ -605,7 +605,7 @@
 
 .expanded-allocations {
   width: 100%;
-  padding: 8px 8px 8px 288px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-2, 8px) var(--nice-space-2, 8px) 288px;
   position: relative;
   height: 40px;
   background: var(--erp-surface);
@@ -619,7 +619,7 @@
   background: var(--erp-primary);
   display: flex;
   align-items: center;
-  padding: 0 8px;
+  padding: 0 var(--nice-space-2, 8px);
   cursor: pointer;
   transition: all var(--erp-transition);
 }
@@ -644,10 +644,10 @@
 
 .delete-allocation {
   margin-left: auto;
-  padding: 0 4px;
+  padding: 0 var(--nice-space-1, 4px);
   border: none;
   background: transparent;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--nice-overlay-light-70, rgba(255, 255, 255, 0.7));
   cursor: pointer;
 }
 
@@ -673,8 +673,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 16px;
-  padding: 12px 20px;
+  gap: var(--nice-space-4, 16px);
+  padding: var(--nice-space-3, 12px) var(--nice-space-5, 20px);
   background: var(--erp-surface);
   border-bottom: 1px solid var(--erp-border);
   flex-wrap: wrap;
@@ -683,14 +683,14 @@
 .toolbar__left {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--nice-space-3, 12px);
   flex-wrap: wrap;
 }
 
 .toolbar__right {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--nice-space-3, 12px);
 }
 
 .search-box {
@@ -699,7 +699,7 @@
 
 .search-box input {
   width: 240px;
-  padding: 8px 12px 8px 36px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px) var(--nice-space-2, 8px) 36px;
   border: 1px solid var(--erp-border);
   border-radius: var(--erp-radius);
   background: var(--erp-surface-alt);
@@ -720,7 +720,7 @@
 }
 
 .toolbar__left select {
-  padding: 8px 12px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
   border: 1px solid var(--erp-border);
   border-radius: var(--erp-radius);
   background: var(--erp-surface-alt);
@@ -731,7 +731,7 @@
 .filter-checkbox {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nice-space-1-5, 6px);
   font-size: 0.875rem;
   color: var(--erp-text-muted);
   cursor: pointer;
@@ -742,11 +742,11 @@
   gap: 0;
   background: var(--erp-surface);
   border-bottom: 1px solid var(--erp-border);
-  padding: 0 20px;
+  padding: 0 var(--nice-space-5, 20px);
 }
 
 .tab {
-  padding: 12px 20px;
+  padding: var(--nice-space-3, 12px) var(--nice-space-5, 20px);
   border: none;
   background: transparent;
   color: var(--erp-text-muted);
@@ -780,18 +780,18 @@
   justify-content: center;
   min-width: 18px;
   height: 18px;
-  margin-left: 6px;
-  padding: 0 6px;
+  margin-left: var(--nice-space-1-5, 6px);
+  padding: 0 var(--nice-space-1-5, 6px);
   background: var(--erp-error);
   color: white;
   font-size: 0.625rem;
   font-weight: 600;
-  border-radius: 99px;
+  border-radius: var(--nice-radius-full, 99px);
 }
 
 .inventory__content {
   flex: 1;
-  padding: 20px;
+  padding: var(--nice-space-5, 20px);
   overflow: auto;
 }
 
@@ -799,7 +799,7 @@
 .items-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
 }
 
 .item-card {
@@ -846,7 +846,7 @@
 }
 
 .item-info {
-  padding: 12px;
+  padding: var(--nice-space-3, 12px);
 }
 
 .item-sku {
@@ -855,7 +855,7 @@
 }
 
 .item-name {
-  margin: 4px 0;
+  margin: var(--nice-space-1, 4px) 0;
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -868,13 +868,13 @@
 .item-stock {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: var(--nice-space-2, 8px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
   border-top: 1px solid var(--erp-border);
 }
 
 .status-badge {
-  padding: 2px 8px;
+  padding: var(--nice-space-0-5, 2px) var(--nice-space-2, 8px);
   border-radius: var(--erp-radius-sm);
   font-size: 0.625rem;
   font-weight: 500;
@@ -893,7 +893,7 @@
 }
 
 .item-value {
-  padding: 8px 12px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
   border-top: 1px solid var(--erp-border);
   font-size: 0.875rem;
   font-weight: 600;
@@ -913,7 +913,7 @@
 }
 
 .items-table th {
-  padding: 12px;
+  padding: var(--nice-space-3, 12px);
   text-align: left;
   font-size: 0.75rem;
   font-weight: 600;
@@ -928,7 +928,7 @@
 }
 
 .items-table td {
-  padding: 12px;
+  padding: var(--nice-space-3, 12px);
   font-size: 0.875rem;
   border-bottom: 1px solid var(--erp-border);
 }
@@ -938,7 +938,7 @@
 }
 
 .row--selected {
-  background: rgba(99, 102, 241, 0.1);
+  background: var(--nice-accent-tint-10, rgba(99, 102, 241, 0.1));
 }
 
 .sku-cell {
@@ -952,11 +952,11 @@
 
 .actions-cell {
   display: flex;
-  gap: 4px;
+  gap: var(--nice-space-1, 4px);
 }
 
 .action-btn {
-  padding: 4px 8px;
+  padding: var(--nice-space-1, 4px) var(--nice-space-2, 8px);
   border: none;
   background: transparent;
   cursor: pointer;
@@ -969,15 +969,15 @@
 }
 
 .action-btn--danger:hover {
-  background: rgba(239, 68, 68, 0.2);
+  background: var(--nice-danger-tint-20, rgba(239, 68, 68, 0.2));
 }
 
 /* Kanban View */
 .items-kanban {
   display: flex;
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
   overflow-x: auto;
-  padding-bottom: 16px;
+  padding-bottom: var(--nice-space-4, 16px);
 }
 
 .kanban-column {
@@ -992,15 +992,15 @@
 .column-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px;
+  gap: var(--nice-space-2, 8px);
+  padding: var(--nice-space-3, 12px);
   border-bottom: 2px solid;
 }
 
 .status-dot {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: var(--nice-radius-full, 50%);
 }
 
 .column-title {
@@ -1011,24 +1011,24 @@
 }
 
 .column-count {
-  padding: 2px 8px;
+  padding: var(--nice-space-0-5, 2px) var(--nice-space-2, 8px);
   background: var(--erp-surface-alt);
-  border-radius: 99px;
+  border-radius: var(--nice-radius-full, 99px);
   font-size: 0.75rem;
   color: var(--erp-text-muted);
 }
 
 .column-items {
-  padding: 8px;
+  padding: var(--nice-space-2, 8px);
   max-height: 500px;
   overflow-y: auto;
 }
 
 .kanban-card {
-  padding: 12px;
+  padding: var(--nice-space-3, 12px);
   background: var(--erp-surface-alt);
   border-radius: var(--erp-radius-sm);
-  margin-bottom: 8px;
+  margin-bottom: var(--nice-space-2, 8px);
   cursor: pointer;
   transition: all var(--erp-transition);
 }
@@ -1046,7 +1046,7 @@
 
 .card-name {
   display: block;
-  margin: 4px 0;
+  margin: var(--nice-space-1, 4px) 0;
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -1060,12 +1060,12 @@
 .transactions-tab {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
 }
 
 .add-transaction-button {
   align-self: flex-start;
-  padding: 8px 16px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
   border: none;
   background: var(--erp-primary);
   color: white;
@@ -1082,8 +1082,8 @@
 .transaction-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-3, 12px) var(--nice-space-4, 16px);
   border-bottom: 1px solid var(--erp-border);
 }
 
@@ -1140,14 +1140,14 @@
 .reorder-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nice-space-2, 8px);
 }
 
 .reorder-item {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px;
+  gap: var(--nice-space-4, 16px);
+  padding: var(--nice-space-4, 16px);
   background: var(--erp-surface);
   border-radius: var(--erp-radius);
   border-left: 4px solid var(--erp-warning);
@@ -1171,7 +1171,7 @@
 
 .reorder-stock {
   display: flex;
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
   font-size: 0.75rem;
   color: var(--erp-text-muted);
 }
@@ -1182,7 +1182,7 @@
 }
 
 .create-po-button {
-  padding: 8px 16px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
   border: 1px solid var(--erp-primary);
   background: transparent;
   color: var(--erp-primary);
@@ -1202,12 +1202,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
-  margin-top: 24px;
+  gap: var(--nice-space-4, 16px);
+  margin-top: var(--nice-space-6, 24px);
 }
 
 .pagination button {
-  padding: 8px 16px;
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
   border: 1px solid var(--erp-border);
   background: var(--erp-surface);
   color: var(--erp-text);
@@ -1231,14 +1231,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px;
+  padding: var(--nice-space-15, 60px);
   text-align: center;
   color: var(--erp-text-muted);
 }
 
 .empty-icon {
   font-size: 3rem;
-  margin-bottom: 16px;
+  margin-bottom: var(--nice-space-4, 16px);
 }
 
 /* =============================================================================
@@ -1248,7 +1248,7 @@
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--nice-overlay-70, rgba(0, 0, 0, 0.7));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1263,14 +1263,14 @@
   max-height: 90vh;
   background: var(--erp-surface);
   border-radius: var(--erp-radius);
-  padding: 24px;
+  padding: var(--nice-space-6, 24px);
   overflow-y: auto;
 }
 
 .item-modal h3,
 .transaction-modal h3,
 .allocation-modal h3 {
-  margin: 0 0 20px;
+  margin: 0 0 var(--nice-space-5, 20px);
   font-size: 1.125rem;
   font-weight: 600;
 }
@@ -1278,13 +1278,13 @@
 .modal-form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
 }
 
 .modal-form label {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nice-space-1-5, 6px);
   font-size: 0.875rem;
   color: var(--erp-text-muted);
 }
@@ -1292,7 +1292,7 @@
 .modal-form input,
 .modal-form select,
 .modal-form textarea {
-  padding: 10px 12px;
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-3, 12px);
   border: 1px solid var(--erp-border);
   border-radius: var(--erp-radius-sm);
   background: var(--erp-surface-alt);
@@ -1315,18 +1315,18 @@
 .form-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 16px;
+  gap: var(--nice-space-4, 16px);
 }
 
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
+  gap: var(--nice-space-3, 12px);
+  margin-top: var(--nice-space-6, 24px);
 }
 
 .cancel-button {
-  padding: 10px 20px;
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-5, 20px);
   border: 1px solid var(--erp-border);
   background: transparent;
   color: var(--erp-text);
@@ -1336,7 +1336,7 @@
 
 .save-button,
 .create-button {
-  padding: 10px 20px;
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-5, 20px);
   border: none;
   background: var(--erp-primary);
   color: white;
@@ -1402,3 +1402,110 @@
     justify-content: center;
   }
 }
+
+/* =============================================================================
+   WAREHOUSE VIEW (NiceWarehouseView)
+   ============================================================================= */
+.nice-warehouse-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nice-space-4, 16px);
+  padding: var(--nice-space-4, 16px);
+  background: var(--erp-bg);
+  color: var(--erp-text);
+  border-radius: var(--erp-radius);
+  border: 1px solid var(--erp-border);
+}
+
+.nice-warehouse-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--nice-space-3, 12px);
+}
+
+.nice-warehouse-view__header h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.nice-warehouse-view__legend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nice-space-2, 8px);
+  font-size: 0.85rem;
+  color: var(--erp-text-muted);
+}
+
+.nice-warehouse-view__legend > span {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--erp-radius-sm);
+  border: 1px solid var(--erp-border);
+  margin-left: var(--nice-space-2, 8px);
+  margin-right: var(--nice-space-1, 4px);
+}
+
+.nice-warehouse-view__legend > span:first-of-type { margin-left: 0; }
+
+.nice-warehouse-view__grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nice-space-1, 4px);
+}
+
+.nice-warehouse-view__row {
+  display: flex;
+  gap: var(--nice-space-1, 4px);
+}
+
+.nice-warehouse-view__aisle {
+  width: var(--nice-space-3, 12px);
+  align-self: stretch;
+  border-left: 1px dashed var(--erp-border);
+  margin: 0 var(--nice-space-1, 4px);
+}
+
+.nice-warehouse-view__cell {
+  position: relative;
+  border: 1px solid var(--erp-border);
+  border-radius: var(--erp-radius-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  color: rgba(0, 0, 0, 0.7);
+  transition: transform var(--erp-transition);
+}
+
+.nice-warehouse-view__cell:hover {
+  transform: scale(1.08);
+  z-index: 1;
+}
+
+.nice-warehouse-view__cell:focus-visible {
+  outline: 2px solid var(--erp-primary);
+  outline-offset: 1px;
+}
+
+.nice-warehouse-view__bin {
+  pointer-events: none;
+}
+
+.nice-warehouse-view__details {
+  margin-top: var(--nice-space-2, 8px);
+  padding: var(--nice-space-3, 12px);
+  background: var(--erp-surface);
+  border: 1px solid var(--erp-border);
+  border-radius: var(--erp-radius);
+  font-size: 0.85rem;
+}
+
+.nice-warehouse-view__details ul {
+  margin: var(--nice-space-2, 8px) 0 0;
+  padding-left: var(--nice-space-4, 16px);
+}