PlanTempusApp/PlanTempus.Application/wwwroot/css/cash.css

/**
 * Cash Register - Page Styling
 *
 * Filter bar, stats, table, forms, and difference box
 * Reuses: swp-sticky-header, swp-header-content (page.css)
 * Reuses: swp-btn, swp-status-badge, swp-card-footer (components.css)
 */

/* ===========================================
   FILTER BAR
   =========================================== */
swp-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-10);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-10);
  flex-wrap: wrap;
}

swp-filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

swp-filter-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

swp-filter-bar input,
swp-filter-bar select {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

swp-filter-bar input:focus,
swp-filter-bar select:focus {
  outline: none;
  border-color: var(--color-teal);
}

swp-filter-spacer {
  flex: 1;
}

/* ===========================================
   KASSE STATS BAR
   =========================================== */
swp-cash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8);
  max-width: var(--page-max-width);
  margin: 0 auto;
}

swp-cash-stats:not(.active) {
  display: none;
}

swp-cash-stat {
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6) var(--spacing-8);
}

swp-cash-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  color: var(--color-text);
}

swp-cash-stat-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-2);
}

swp-cash-stat.highlight swp-cash-stat-value {
  color: var(--color-teal);
}

swp-cash-stat.warning swp-cash-stat-value {
  color: var(--color-amber);
}

swp-cash-stat.negative swp-cash-stat-value {
  color: var(--color-red);
}

swp-cash-stat.user swp-cash-stat-value {
  color: var(--color-blue);
}

/* ===========================================
   ACTION BAR (Table Header)
   =========================================== */
swp-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6) var(--spacing-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

swp-selection-info {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* ===========================================
   KASSE TABLE (Grid + Subgrid pattern)
   =========================================== */
swp-cash-table {
  display: grid;
  grid-template-columns: 50px 70px 60px minmax(140px, 1fr) 90px 100px 100px 110px 120px 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

swp-cash-table-header,
swp-cash-table-body {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

swp-cash-table-header {
  background: var(--color-background-alt);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-6) var(--spacing-10);
  align-items: center;
}

swp-cash-table-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

swp-cash-th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

swp-cash-th.right {
  text-align: right;
}

swp-cash-th.checkbox,
swp-cash-td.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

swp-cash-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-teal);
  cursor: pointer;
}

swp-cash-table-row {
  padding: var(--spacing-7) var(--spacing-10);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

swp-cash-table-row:last-child {
  border-bottom: none;
}

swp-cash-table-row:hover {
  background: var(--color-background-hover);
}

/* Draft row - clickable to go to Kasseafstemning */
swp-cash-table-row.draft-row {
  background: color-mix(in srgb, var(--color-amber) 5%, transparent);
  cursor: pointer;
}

swp-cash-table-row.draft-row:hover {
  background: color-mix(in srgb, var(--color-amber) 12%, transparent);
}

swp-cash-td {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

swp-cash-td.right {
  text-align: right;
}

swp-cash-td.mono {
  font-family: var(--font-mono);
}

swp-cash-td.muted {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

swp-cash-td.negative {
  color: var(--color-red);
}

swp-cash-td.positive {
  color: var(--color-green);
}

swp-cash-td.id {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

swp-period-cell {
  display: block;
}

swp-period-cell .dates {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ===========================================
   ROW TOGGLE & EXPANDABLE DETAIL
   =========================================== */
swp-row-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

swp-row-toggle:hover {
  background: var(--color-background-alt);
  color: var(--color-text);
}

swp-row-toggle i {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast);
}

/* Row detail - hidden by default */
swp-cash-row-detail {
  grid-column: 1 / -1;
  display: none;
  overflow: hidden;
  background: var(--color-background-alt);
  border-bottom: 1px solid var(--color-border);
}

swp-cash-row-detail.expanded {
  display: block;
}

swp-row-detail-content {
  display: block;
  padding: var(--spacing-8) var(--spacing-10);
}

swp-row-detail-actions {
  display: flex;
  gap: var(--spacing-4);
  justify-content: flex-end;
}

/* Legacy support */
swp-row-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-text-secondary);
}

swp-row-arrow i {
  font-size: var(--font-size-lg);
}

swp-cash-table-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-7) var(--spacing-10);
  background: var(--color-background-alt);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* Status badge styles in components.css */

/* Center status column */
swp-cash-th:nth-child(9),
swp-cash-td:nth-child(9) {
  text-align: center;
}

/* ===========================================
   TWO-COLUMN GRID (Detail View)
   =========================================== */
swp-cash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
}

@media (max-width: 900px) {
  swp-cash-grid {
    grid-template-columns: 1fr;
  }
}

swp-cash-column {
  display: grid;
  gap: var(--spacing-10);
  align-content: start;
}

/* ===========================================
   DATA TABLE (Dagens Tal)
   =========================================== */
swp-data-table {
  display: block;
  width: 100%;
}

swp-data-header {
  display: grid;
  grid-template-columns: 1fr 100px 140px;
  gap: var(--spacing-6);
  padding: var(--spacing-5) 0;
  border-bottom: 2px solid var(--color-border);
}

swp-data-header span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

swp-data-header span:not(:first-child) {
  text-align: right;
}

swp-data-row {
  display: grid;
  grid-template-columns: 1fr 100px 140px;
  gap: var(--spacing-6);
  padding: var(--spacing-7) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

swp-data-row:last-child {
  border-bottom: none;
}

swp-data-label {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

swp-data-system {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

swp-data-input input {
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
  font-size: var(--font-size-base);
  font-family: var(--font-mono);
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

swp-data-input input:focus {
  outline: none;
  border-color: var(--color-teal);
}

swp-data-input input::placeholder {
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

swp-data-value {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

swp-data-value.muted {
  color: var(--color-text-secondary);
}

swp-table-note {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
}

/* ===========================================
   CALC ROW (Kontanter)
   =========================================== */
swp-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-7) 0;
  border-bottom: 1px solid var(--color-border);
}

swp-calc-row:last-of-type {
  border-bottom: none;
}

swp-calc-row.input-row {
  background: var(--color-background-alt);
  margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
  padding: var(--spacing-8) var(--spacing-5);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

swp-calc-label span {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

swp-calc-label small {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

swp-calc-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

swp-calc-value.muted {
  color: var(--color-text-secondary);
}

swp-calc-input input {
  width: 140px;
  padding: var(--spacing-6) var(--spacing-7);
  font-size: var(--font-size-lg);
  font-family: var(--font-mono);
  text-align: right;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

swp-calc-input input:focus {
  outline: none;
  border-color: var(--color-teal);
}

/* ===========================================
   DIFFERENCE BOX
   =========================================== */
swp-difference-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-10);
  border-radius: var(--radius-lg);
  background: var(--color-background-alt);
}

swp-difference-box.positive {
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

swp-difference-box.negative {
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
}

swp-difference-box.neutral {
  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
}

swp-difference-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

swp-difference-label small {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-2);
}

swp-difference-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
}

swp-difference-box.positive swp-difference-value {
  color: var(--color-green);
}

swp-difference-box.negative swp-difference-value {
  color: var(--color-red);
}

swp-difference-box.neutral swp-difference-value {
  color: var(--color-teal);
}

/* ===========================================
   PERIOD DISPLAY
   =========================================== */
swp-period-display {
  display: block;
  padding: var(--spacing-8);
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

swp-period-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-4);
}

swp-period-value {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

swp-period-value .arrow {
  color: var(--color-teal);
  font-weight: var(--font-weight-regular);
}

/* ===========================================
   FORM ELEMENTS
   =========================================== */
swp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

swp-form-field {
  display: block;
}

swp-form-field.full-width {
  grid-column: 1 / -1;
}

swp-form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

swp-form-label .required {
  color: var(--color-red);
}

swp-form-input input,
swp-form-input select {
  width: 100%;
  padding: var(--spacing-5) var(--spacing-6);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}

swp-form-input input:focus,
swp-form-input select:focus {
  outline: none;
  border-color: var(--color-teal);
}

swp-auto-id {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
}

/* ===========================================
   NOTE FIELD
   =========================================== */
swp-note-field textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--spacing-6);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
}

swp-note-field textarea:focus {
  outline: none;
  border-color: var(--color-teal);
}

swp-note-hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-4);
}

/* ===========================================
   APPROVAL SECTION
   =========================================== */
swp-status-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}

swp-approval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

swp-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  grid-column: 1 / -1;
}

swp-checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: var(--spacing-1);
  accent-color: var(--color-teal);
  cursor: pointer;
}

swp-checkbox-field label {
  font-size: var(--font-size-md);
  color: var(--color-text);
  cursor: pointer;
  line-height: var(--line-height-normal);
}

/* Card footer base styles in components.css */

swp-actions-right {
  display: flex;
  gap: var(--spacing-5);
}

/* Button styles in components.css */

/* ===========================================
   SYSTEM NOTE
   =========================================== */
swp-system-note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--spacing-6);
  margin-top: var(--spacing-8);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1000px) {
  swp-cash-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Table columns defined on parent - subgrid inherits */
  swp-cash-table {
    grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
  }

  /* Hide some columns on smaller screens */
  swp-cash-th:nth-child(3),
  swp-cash-td:nth-child(3),
  swp-cash-th:nth-child(6),
  swp-cash-td:nth-child(6) {
    display: none;
  }
}

@media (max-width: 768px) {
  swp-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  swp-filter-group {
    width: 100%;
  }

  swp-filter-spacer {
    display: none;
  }
}