@layerfi/components 0.1.130 → 0.1.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -529,6 +529,12 @@
529
529
  .Layer__component .recharts-responsive-container.Layer__chart-container {
530
530
  padding-top: 42px;
531
531
  }
532
+ .Layer__UI__Chart--focusReset .recharts-wrapper:focus,
533
+ .Layer__UI__Chart--focusReset .recharts-wrapper :focus,
534
+ .Layer__UI__Chart--focusReset .recharts-surface:focus,
535
+ .Layer__UI__Chart--focusReset .recharts-bar-rectangle:focus {
536
+ outline: none;
537
+ }
532
538
  .Layer__chart-wrapper {
533
539
  position: relative;
534
540
  }
@@ -2333,13 +2339,6 @@ tbody .Layer__table__empty-row:first-child {
2333
2339
  .Layer__bank-transaction-row--expanded .Layer__table-cell {
2334
2340
  background-color: var(--bg-element-focus);
2335
2341
  }
2336
- .Layer__expanded-bank-transaction-row {
2337
- position: relative;
2338
- display: block;
2339
- overflow: hidden;
2340
- background-color: var(--bg-element-focus);
2341
- transition: background-color var(--transition-speed) ease-in-out, height var(--transition-speed) ease-in-out;
2342
- }
2343
2342
  .Layer__bank-transaction-row:hover,
2344
2343
  .Layer__bank-transaction-row:hover .Layer__table-cell,
2345
2344
  .Layer__bank-transaction-list-item:hover {
@@ -2367,15 +2366,7 @@ tbody .Layer__table__empty-row:first-child {
2367
2366
  .Layer__bank-transaction-row:hover .Layer__bank-transaction__submit-btn:not([disabled]) .Layer__btn-icon .Layer__btn-icon--on-inactive {
2368
2367
  display: none;
2369
2368
  }
2370
- .Layer__expanded-bank-transaction-row .Layer__expanded-bank-transaction-row__wrapper {
2371
- display: flex;
2372
- flex-direction: column;
2373
- gap: var(--spacing-sm);
2374
- overflow: hidden;
2375
- transition: height var(--transition-speed) ease-in-out;
2376
- }
2377
- .Layer__bank-transaction-list-item__content,
2378
- .Layer__expanded-bank-transaction-row__content {
2369
+ .Layer__bank-transaction-list-item__content {
2379
2370
  box-sizing: border-box;
2380
2371
  display: flex;
2381
2372
  flex-direction: column;
@@ -2384,118 +2375,10 @@ tbody .Layer__table__empty-row:first-child {
2384
2375
  max-width: 76rem;
2385
2376
  }
2386
2377
  @container (max-width: 768px) {
2387
- .Layer__bank-transaction-list-item__content,
2388
- .Layer__expanded-bank-transaction-row__content {
2378
+ .Layer__bank-transaction-list-item__content {
2389
2379
  min-width: 30rem;
2390
2380
  }
2391
2381
  }
2392
- .Layer__expanded-bank-transaction-row__content-panels {
2393
- box-sizing: border-box;
2394
- display: flex;
2395
- flex-direction: row;
2396
- }
2397
- .Layer__expanded-bank-transaction-row__content-panel {
2398
- box-sizing: border-box;
2399
- display: flex;
2400
- flex: 1;
2401
- flex-direction: column;
2402
- gap: var(--spacing-sm);
2403
- overflow: hidden;
2404
- height: 0;
2405
- max-width: 0;
2406
- opacity: 0;
2407
- transition: max-width 150ms ease-out, opacity 300ms ease-out;
2408
- }
2409
- .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
2410
- box-sizing: border-box;
2411
- padding: 0 var(--spacing-md);
2412
- }
2413
- .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
2414
- height: auto;
2415
- max-width: 100%;
2416
- opacity: 1;
2417
- }
2418
- .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__select .Layer__select__control {
2419
- overflow: hidden;
2420
- max-width: 0;
2421
- }
2422
- .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__table-cell--split-entry {
2423
- overflow: hidden;
2424
- max-width: 0;
2425
- }
2426
- .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-buttons {
2427
- overflow: hidden;
2428
- max-width: 0;
2429
- }
2430
- .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-total {
2431
- overflow: hidden;
2432
- max-width: 0;
2433
- }
2434
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__right-col {
2435
- display: flex;
2436
- flex: 1;
2437
- gap: var(--spacing-sm);
2438
- align-items: center;
2439
- }
2440
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
2441
- height: 36px;
2442
- width: 36px;
2443
- padding: 0;
2444
- }
2445
- @container (min-width: 701px) {
2446
- .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
2447
- max-width: 100%;
2448
- opacity: 1;
2449
- }
2450
- .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
2451
- max-height: 38px;
2452
- white-space: nowrap;
2453
- }
2454
- .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-total {
2455
- max-height: 25px;
2456
- white-space: nowrap;
2457
- }
2458
- }
2459
- .Layer__expanded-bank-transaction-row__splits {
2460
- display: flex;
2461
- gap: var(--spacing-sm);
2462
- }
2463
- .Layer__expanded-bank-transaction-row__splits-inputs {
2464
- display: flex;
2465
- flex-direction: column;
2466
- gap: var(--spacing-xs);
2467
- padding-top: 2px;
2468
- }
2469
- .Layer__expanded-bank-transaction-row__splits-total {
2470
- padding: var(--spacing-3xs);
2471
- color: var(--color-base-500);
2472
- }
2473
- .Layer__expanded-bank-transaction-row__splits-buttons {
2474
- padding-bottom: 2px;
2475
- }
2476
- .Layer__expanded-bank-transaction-row__total-and-btns {
2477
- display: flex;
2478
- flex-direction: column;
2479
- gap: var(--spacing-sm);
2480
- padding: var(--spacing-sm) 0;
2481
- }
2482
- .Layer__expanded-bank-transaction-row__total-and-btns:empty {
2483
- display: none;
2484
- }
2485
- .Layer__expanded-bank-transaction-row__description {
2486
- padding: 0 var(--spacing-md);
2487
- }
2488
- .Layer__expanded-bank-transaction-row__description textarea {
2489
- height: 100px;
2490
- width: 100%;
2491
- }
2492
- .Layer__expanded-bank-transaction-row__file-upload {
2493
- display: flex;
2494
- flex-direction: column;
2495
- gap: var(--spacing-md);
2496
- align-items: flex-start;
2497
- padding: 0 var(--spacing-md);
2498
- }
2499
2382
  .Layer__bank-transaction-row__actions-cell {
2500
2383
  width: 0%;
2501
2384
  border-left: 1px solid var(--border-color);
@@ -2525,41 +2408,6 @@ tbody .Layer__table__empty-row:first-child {
2525
2408
  align-items: center;
2526
2409
  justify-content: flex-end;
2527
2410
  }
2528
- .Layer__expanded-bank-transaction-row__table-cell--split-entry {
2529
- display: flex;
2530
- gap: var(--spacing-xs);
2531
- align-items: flex-start;
2532
- min-width: 40rem;
2533
- }
2534
- .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__BankTransactionCategoryComboBox__Container {
2535
- grid-area: category;
2536
- max-width: 24.5rem;
2537
- }
2538
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__amount {
2539
- grid-area: amount;
2540
- }
2541
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer {
2542
- grid-area: customer;
2543
- min-width: 12rem;
2544
- }
2545
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__button {
2546
- grid-area: button;
2547
- }
2548
- @container (max-width: 768px) {
2549
- .Layer__expanded-bank-transaction-row__table-cell--split-entry {
2550
- display: grid;
2551
- grid-template-areas: "amount category button";
2552
- grid-template-columns: 12rem minmax(12rem, 24.5rem) 2.25rem;
2553
- min-width: 27.5rem;
2554
- max-width: min(40rem, 100%);
2555
- }
2556
- .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer), .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
2557
- grid-template-areas: "amount category button" "customer tags .";
2558
- }
2559
- }
2560
- .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
2561
- grid-area: tags;
2562
- }
2563
2411
  .Layer__bank-transactions__list {
2564
2412
  list-style: none;
2565
2413
  padding: 0;
@@ -2877,40 +2725,6 @@ tbody .Layer__table__empty-row:first-child {
2877
2725
  display: flex;
2878
2726
  gap: var(--spacing-md);
2879
2727
  }
2880
- @container (max-width: 600px) {
2881
- .Layer__expanded-bank-transaction-row__splits-inputs {
2882
- display: flex;
2883
- flex-direction: column;
2884
- gap: var(--spacing-xs);
2885
- width: 100%;
2886
- }
2887
- .Layer__expanded-bank-transaction-row__table-cell--split-entry {
2888
- width: 100%;
2889
- }
2890
- .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
2891
- width: 100%;
2892
- }
2893
- .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
2894
- position: relative;
2895
- flex: 1;
2896
- max-width: 42%;
2897
- }
2898
- .Layer__expanded-bank-transaction-row__total-and-btns {
2899
- box-sizing: border-box;
2900
- flex-direction: row;
2901
- align-items: center;
2902
- justify-content: space-between;
2903
- }
2904
- .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
2905
- position: relative;
2906
- flex: 1;
2907
- width: 100%;
2908
- max-width: 42%;
2909
- }
2910
- .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
2911
- max-width: 100%;
2912
- }
2913
- }
2914
2728
  @container (max-width: 500px) {
2915
2729
  .Layer__bank-transaction-list-item__expanded-row input,
2916
2730
  .Layer__bank-transaction-list-item__expanded-row .Layer__category-menu {
@@ -2922,33 +2736,6 @@ tbody .Layer__table__empty-row:first-child {
2922
2736
  .Layer__bank-transaction-list-item__expanded-row .Layer__select__indicator {
2923
2737
  padding: var(--spacing-3xs);
2924
2738
  }
2925
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
2926
- height: 32px;
2927
- min-height: 32px;
2928
- width: 32px;
2929
- }
2930
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn svg {
2931
- height: 14px;
2932
- width: 14px;
2933
- }
2934
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn,
2935
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn {
2936
- min-height: 32px;
2937
- }
2938
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-text,
2939
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-text {
2940
- font-size: var(--text-xs);
2941
- }
2942
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__file-upload .Layer__btn-icon,
2943
- .Layer__bank-transaction-list-item__expanded-row .Layer__expanded-bank-transaction-row__total-and-btns .Layer__btn-icon {
2944
- height: 12px;
2945
- width: 12px;
2946
- }
2947
- }
2948
- .Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
2949
- padding: var(--spacing-2xs) 0;
2950
- padding-bottom: var(--spacing-md);
2951
- margin: 0;
2952
2739
  }
2953
2740
  .Layer__bank-transaction-table__date-col,
2954
2741
  .Layer__bank-transactions__account-col {
@@ -2960,29 +2747,6 @@ tbody .Layer__table__empty-row:first-child {
2960
2747
  .Layer__bank-transaction-row--expanded .Layer__bank-transactions__account-col {
2961
2748
  color: var(--color-base-1000);
2962
2749
  }
2963
- .Layer__expanded-bank-transaction-row__splits-inputs .Layer__input {
2964
- text-align: right;
2965
- }
2966
- .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
2967
- max-width: 100%;
2968
- text-align: right;
2969
- }
2970
- @container (min-width: 401px) {
2971
- .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip,
2972
- .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
2973
- flex: 1;
2974
- max-width: 12rem;
2975
- }
2976
- .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip .Layer__input,
2977
- .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip .Layer__input {
2978
- width: 100%;
2979
- }
2980
- }
2981
- @container (max-width: 480px) {
2982
- .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input-left-text {
2983
- border-right-color: transparent;
2984
- }
2985
- }
2986
2750
  .Layer__bank-transactions__mobile-list {
2987
2751
  display: flex;
2988
2752
  flex-direction: column;
@@ -4078,50 +3842,6 @@ tbody .Layer__table__empty-row:first-child {
4078
3842
  justify-content: flex-start;
4079
3843
  padding-right: var(--spacing-lg);
4080
3844
  }
4081
- .Layer__profit-and-loss-detailed-charts__header--tablet,
4082
- .Layer__profit-and-loss-detailed-charts__header {
4083
- display: flex;
4084
- align-items: flex-start;
4085
- justify-content: space-between;
4086
- padding: var(--spacing-lg);
4087
- padding-bottom: var(--spacing-lg);
4088
- box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
4089
- }
4090
- .Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
4091
- .Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
4092
- height: 32px;
4093
- min-height: 32px;
4094
- width: 32px;
4095
- padding: 0;
4096
- }
4097
- header.Layer__profit-and-loss-detailed-charts__header--tablet {
4098
- display: none;
4099
- gap: var(--spacing-md);
4100
- align-items: center;
4101
- justify-content: flex-start;
4102
- }
4103
- @container (max-width: 1023px) and (min-width: 768px) {
4104
- header.Layer__profit-and-loss-detailed-charts__header {
4105
- display: none;
4106
- }
4107
- header.Layer__profit-and-loss-detailed-charts__header--tablet {
4108
- display: flex;
4109
- }
4110
- }
4111
- .Layer__profit-and-loss-detailed-charts__head {
4112
- display: flex;
4113
- flex-direction: column;
4114
- gap: var(--spacing-4xs);
4115
- }
4116
- .Layer__profit-and-loss-detailed-charts__head .title {
4117
- color: var(--color-base-800);
4118
- }
4119
- .Layer__profit-and-loss-detailed-charts__head .date {
4120
- color: var(--color-base-500);
4121
- }
4122
- .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
4123
- margin: 0;
4124
- }
4125
3845
  .Layer__ProfitAndLossDetailedCharts__DatePickerHeader--tablet {
4126
3846
  display: none;
4127
3847
  }
@@ -4202,9 +3922,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4202
3922
  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper .Layer__Span {
4203
3923
  margin: 0 1rem;
4204
3924
  }
4205
- .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
4206
- display: none;
4207
- }
4208
3925
  }
4209
3926
  .Layer__tooltip {
4210
3927
  box-sizing: border-box;
@@ -4305,7 +4022,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4305
4022
  border-bottom-right-radius: 0;
4306
4023
  }
4307
4024
  }
4308
- .Layer__actionable_row {
4025
+ @charset "UTF-8";.Layer__actionable_row {
4309
4026
  display: flex;
4310
4027
  gap: var(--spacing-md);
4311
4028
  align-items: center;
@@ -4875,11 +4592,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4875
4592
  .Layer__UI__tooltip-trigger {
4876
4593
  overflow: hidden;
4877
4594
  text-overflow: ellipsis;
4878
- }.Layer__Header,
4595
+ }
4596
+ .Layer__Header,
4879
4597
  .Layer__Label,
4880
4598
  .Layer__P,
4881
4599
  .Layer__Span {
4882
- max-inline-size: min(80ch, 60rem);
4883
4600
  margin: 0;
4884
4601
  font-size: var(--text-md);
4885
4602
  line-height: 140%;
@@ -4929,6 +4646,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4929
4646
  .Layer__Span[data-no-wrap] {
4930
4647
  white-space: nowrap;
4931
4648
  }
4649
+ .Layer__Header[data-numeric=tabular-nums],
4650
+ .Layer__Label[data-numeric=tabular-nums],
4651
+ .Layer__P[data-numeric=tabular-nums],
4652
+ .Layer__Span[data-numeric=tabular-nums] {
4653
+ font-variant-numeric: tabular-nums;
4654
+ }
4932
4655
  .Layer__Header[data-ellipsis], .Layer__Header[data-with-tooltip],
4933
4656
  .Layer__Label[data-ellipsis],
4934
4657
  .Layer__Label[data-with-tooltip],
@@ -5217,6 +4940,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
5217
4940
  * A `label` is an inline element by default. This change allows us to apply padding.
5218
4941
  */
5219
4942
  display: inline-block;
4943
+ }
4944
+
4945
+ .Layer__Span[data-ellipsis],
4946
+ .Layer__Span[data-with-tooltip] {
4947
+ /*
4948
+ * `Span` is `display: inline` by default, which ignores `overflow` and `text-overflow`
4949
+ * — so ellipsis silently does nothing. Promote to `inline-block` so the rules above
4950
+ * actually apply, and pin `vertical-align` so the new baseline doesn't shift the span
4951
+ * relative to neighbouring inline content.
4952
+ */
4953
+ display: inline-block;
4954
+ vertical-align: middle;
5220
4955
  }.Layer__UI__ToggleOption {
5221
4956
  box-sizing: border-box;
5222
4957
  position: relative;
@@ -5811,7 +5546,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
5811
5546
  border-color: var(--outline-active);
5812
5547
  }
5813
5548
  .Layer__ComboBoxControl--disabled {
5549
+ background-color: var(--color-base-100);
5814
5550
  cursor: not-allowed;
5551
+ color: var(--color-base-800);
5815
5552
  }
5816
5553
  .Layer__ComboBoxControl--readonly {
5817
5554
  background-color: var(--bg-muted);
@@ -6110,6 +5847,150 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6110
5847
  color: var(--color-base-500);
6111
5848
  }.Layer__CategorySelectDrawerWithTrigger .Layer__UI__Button {
6112
5849
  justify-content: space-between;
5850
+ }.Layer__Checkbox {
5851
+ position: relative;
5852
+ display: inline-flex;
5853
+ align-items: center;
5854
+ cursor: pointer;
5855
+ }
5856
+ .Layer__Checkbox [slot=checkbox] {
5857
+ box-sizing: border-box;
5858
+ display: grid;
5859
+ height: var(--size);
5860
+ width: var(--size);
5861
+ border-radius: var(--checkbox-radius);
5862
+ border: 2px solid var(--outline-default);
5863
+ background-color: var(--color-base-50);
5864
+ color: transparent;
5865
+ place-items: center;
5866
+ transition: all 100ms ease-out;
5867
+ --size: 1rem;
5868
+ --checkbox-radius: var(--border-radius-3xs);
5869
+ }
5870
+ .Layer__Checkbox [slot=checkbox][data-pressed] {
5871
+ border-color: var(--outline-active);
5872
+ }
5873
+ .Layer__Checkbox[data-size=md] [slot=checkbox] {
5874
+ --size: 1.25rem;
5875
+ --checkbox-radius: 5px;
5876
+ }
5877
+ .Layer__Checkbox[data-size=lg] [slot=checkbox] {
5878
+ --size: 1.5rem;
5879
+ --checkbox-radius: var(--border-radius-2xs);
5880
+ }
5881
+ .Layer__Checkbox svg {
5882
+ transition: all 100ms ease-out;
5883
+ }
5884
+ .Layer__Checkbox[data-readonly] [slot=checkbox] {
5885
+ background-color: var(--bg-muted);
5886
+ }
5887
+ .Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
5888
+ border-color: var(--outline-active);
5889
+ }
5890
+ .Layer__Checkbox[data-focus-visible] [slot=checkbox] {
5891
+ outline: 1px solid var(--outline-active);
5892
+ outline-offset: 2px;
5893
+ }
5894
+ .Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
5895
+ background-color: var(--fg-default);
5896
+ color: var(--bg-default);
5897
+ border-color: var(--fg-default);
5898
+ }
5899
+ .Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
5900
+ background-color: var(--bg-brand-accent, var(--color-accent));
5901
+ border-color: var(--bg-brand-accent, var(--color-accent));
5902
+ color: var(--fg-brand-accent, var(--color-primary));
5903
+ }
5904
+ .Layer__Checkbox[data-variant=error] [slot=checkbox] {
5905
+ border-color: var(--color-info-error);
5906
+ }
5907
+ .Layer__Checkbox[data-selected][data-variant=error] [slot=checkbox] {
5908
+ background-color: var(--color-info-error);
5909
+ }
5910
+ .Layer__Checkbox[data-variant=round] [slot=checkbox] {
5911
+ border-radius: 50%;
5912
+ border: 0.5px solid var(--color-base-400);
5913
+ background-color: white;
5914
+ }
5915
+ .Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] {
5916
+ border: 1px solid var(--color-info-success);
5917
+ background-color: var(--color-info-success-bg);
5918
+ }
5919
+ .Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] svg {
5920
+ color: var(--color-info-success);
5921
+ }
5922
+ .Layer__Checkbox[data-selected][data-readonly] [slot=checkbox] {
5923
+ border-color: var(--fg-subtle);
5924
+ background-color: var(--fg-subtle);
5925
+ }
5926
+ .Layer__Checkbox[data-disabled] {
5927
+ cursor: not-allowed;
5928
+ }
5929
+ .Layer__Checkbox[data-disabled] [slot=checkbox] {
5930
+ background-color: var(--color-base-200);
5931
+ }
5932
+ .Layer__Checkbox[data-labeled] {
5933
+ gap: var(--spacing-xs);
5934
+ }.Layer__MobileListItem {
5935
+ display: grid;
5936
+ grid-template-areas: "content";
5937
+ grid-template-columns: 1fr;
5938
+ padding: var(--spacing-sm);
5939
+ border-radius: var(--border-radius-sm);
5940
+ border: 1px solid var(--border-color);
5941
+ background-color: var(--color-base-0);
5942
+ }
5943
+ .Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
5944
+ grid-template-areas: "selection content";
5945
+ grid-template-columns: auto 1fr;
5946
+ }
5947
+ [data-variant=compact] .Layer__MobileListItem {
5948
+ padding-inline: 0;
5949
+ border-radius: 0;
5950
+ border: none;
5951
+ }.Layer__MobileListSection {
5952
+ display: flex;
5953
+ flex-direction: column;
5954
+ }
5955
+ .Layer__MobileListSection__Heading {
5956
+ padding-block-end: var(--spacing-xs);
5957
+ padding-inline: var(--spacing-3xs);
5958
+ outline: none;
5959
+ background-color: transparent;
5960
+ cursor: default;
5961
+ }
5962
+ .Layer__MobileListSection:not(:last-child) {
5963
+ padding-block-end: var(--spacing-xs);
5964
+ }
5965
+ .Layer__MobileListSection:not(:first-child) {
5966
+ padding-block-start: var(--spacing-md);
5967
+ border-block-start: 1px solid var(--border-color);
5968
+ }.Layer__MobileList {
5969
+ display: flex;
5970
+ flex-direction: column;
5971
+ gap: var(--spacing-sm);
5972
+ }
5973
+ .Layer__MobileList[data-variant=compact] {
5974
+ gap: 0;
5975
+ }.Layer__MobileSelectionDrawerList__Check {
5976
+ visibility: hidden;
5977
+ height: 1rem;
5978
+ min-width: 1rem;
5979
+ }
5980
+ .Layer__MobileSelectionDrawerList__Check[data-selected=true] {
5981
+ visibility: visible;
5982
+ }.Layer__MobileSelectionDrawerWithTrigger__Trigger {
5983
+ width: 100%;
5984
+ }
5985
+
5986
+ .Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__SearchField {
5987
+ inline-size: 100%;
5988
+ }
5989
+ .Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__MobileListItem {
5990
+ transition: background-color 120ms ease;
5991
+ }
5992
+ .Layer__MobileSelectionDrawerWithTrigger__Drawer .Layer__MobileListItem[data-hovered] {
5993
+ background-color: var(--bg-element-focus);
6113
5994
  }.Layer__csv-upload {
6114
5995
  position: relative;
6115
5996
  height: 6rem;
@@ -6275,90 +6156,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6275
6156
  .Layer__UI__DateInput[data-placement=first] {
6276
6157
  border-start-start-radius: inherit;
6277
6158
  border-end-start-radius: inherit;
6278
- }.Layer__Checkbox {
6279
- position: relative;
6280
- display: inline-flex;
6281
- align-items: center;
6282
- cursor: pointer;
6283
- }
6284
- .Layer__Checkbox [slot=checkbox] {
6285
- box-sizing: border-box;
6286
- display: grid;
6287
- height: var(--size);
6288
- width: var(--size);
6289
- border-radius: var(--checkbox-radius);
6290
- border: 2px solid var(--outline-default);
6291
- background-color: var(--color-base-50);
6292
- color: transparent;
6293
- place-items: center;
6294
- transition: all 100ms ease-out;
6295
- --size: 1rem;
6296
- --checkbox-radius: var(--border-radius-3xs);
6297
- }
6298
- .Layer__Checkbox [slot=checkbox][data-pressed] {
6299
- border-color: var(--outline-active);
6300
- }
6301
- .Layer__Checkbox[data-size=md] [slot=checkbox] {
6302
- --size: 1.25rem;
6303
- --checkbox-radius: 5px;
6304
- }
6305
- .Layer__Checkbox[data-size=lg] [slot=checkbox] {
6306
- --size: 1.5rem;
6307
- --checkbox-radius: var(--border-radius-2xs);
6308
- }
6309
- .Layer__Checkbox svg {
6310
- transition: all 100ms ease-out;
6311
- }
6312
- .Layer__Checkbox[data-readonly] [slot=checkbox] {
6313
- background-color: var(--bg-muted);
6314
- }
6315
- .Layer__Checkbox[data-hovered] [slot=checkbox], .Layer__Checkbox[data-pressed] [slot=checkbox] {
6316
- border-color: var(--outline-active);
6317
- }
6318
- .Layer__Checkbox[data-focus-visible] [slot=checkbox] {
6319
- outline: 1px solid var(--outline-active);
6320
- outline-offset: 2px;
6321
- }
6322
- .Layer__Checkbox[data-selected] [slot=checkbox], .Layer__Checkbox[data-indeterminate] [slot=checkbox] {
6323
- background-color: var(--fg-default);
6324
- color: var(--bg-default);
6325
- border-color: var(--fg-default);
6326
- }
6327
- .Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
6328
- background-color: var(--bg-brand-accent, var(--color-accent));
6329
- border-color: var(--bg-brand-accent, var(--color-accent));
6330
- color: var(--fg-brand-accent, var(--color-primary));
6331
- }
6332
- .Layer__Checkbox[data-variant=error] [slot=checkbox] {
6333
- border-color: var(--color-info-error);
6334
- }
6335
- .Layer__Checkbox[data-selected][data-variant=error] [slot=checkbox] {
6336
- background-color: var(--color-info-error);
6337
- }
6338
- .Layer__Checkbox[data-variant=round] [slot=checkbox] {
6339
- border-radius: 50%;
6340
- border: 0.5px solid var(--color-base-400);
6341
- background-color: white;
6342
- }
6343
- .Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] {
6344
- border: 1px solid var(--color-info-success);
6345
- background-color: var(--color-info-success-bg);
6346
- }
6347
- .Layer__Checkbox[data-selected][data-variant=round] [slot=checkbox] svg {
6348
- color: var(--color-info-success);
6349
- }
6350
- .Layer__Checkbox[data-selected][data-readonly] [slot=checkbox] {
6351
- border-color: var(--fg-subtle);
6352
- background-color: var(--fg-subtle);
6353
- }
6354
- .Layer__Checkbox[data-disabled] {
6355
- cursor: not-allowed;
6356
- }
6357
- .Layer__Checkbox[data-disabled] [slot=checkbox] {
6358
- background-color: var(--color-base-200);
6359
- }
6360
- .Layer__Checkbox[data-labeled] {
6361
- gap: var(--spacing-xs);
6362
6159
  }.Layer__FormCheckboxField {
6363
6160
  display: grid;
6364
6161
  grid-template-areas: "label" "checkbox";
@@ -6672,9 +6469,23 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6672
6469
  .Layer__UI__Table-TableHeader > tr {
6673
6470
  height: inherit;
6674
6471
  }
6472
+ .Layer__UI__Table-TableHeader .Layer__UI__Table-Row {
6473
+ background-color: var(--color-base-0);
6474
+ }
6475
+ @media (width <= 500px) {
6476
+ .Layer__UI__Table-TableHeader {
6477
+ height: auto;
6478
+ }
6479
+ }
6675
6480
 
6676
6481
  .Layer__UI__Table-Row {
6677
6482
  height: 3.25rem;
6483
+ background-color: var(--color-base-200);
6484
+ }
6485
+ @media (width <= 500px) {
6486
+ .Layer__UI__Table-Row {
6487
+ height: auto;
6488
+ }
6678
6489
  }
6679
6490
  .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
6680
6491
  border-bottom: 1px solid var(--color-base-300);
@@ -6747,16 +6558,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6747
6558
  .Layer__UI__Table-Column[data-pinned],
6748
6559
  .Layer__UI__Table-Cell[data-pinned] {
6749
6560
  z-index: 1;
6750
- background-color: inherit;
6751
6561
  }
6752
6562
 
6753
6563
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=left],
6754
6564
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=left] {
6755
- border-right: 1px solid var(--color-base-200);
6565
+ border-right: 1px solid var(--color-base-300);
6756
6566
  }
6757
6567
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=right],
6758
6568
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=right] {
6759
- border-left: 1px solid var(--color-base-200);
6569
+ border-left: 1px solid var(--color-base-300);
6760
6570
  }
6761
6571
 
6762
6572
  .Layer__UI__Table-TableHeader .Layer__UI__Table-Column[data-pinned] {
@@ -7372,26 +7182,281 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7372
7182
  width: 100%;
7373
7183
  padding-inline-end: var(--spacing-md);
7374
7184
  }
7375
- }.Layer__BusinessFormMobile {
7376
- border-radius: var(--border-radius-2xs);
7377
- border: 1px solid var(--color-base-300);
7378
- }.Layer__BusinessFormMobileItem[data-selected] {
7379
- background: var(--color-base-100);
7380
- }.Layer__MatchFormMobileItem__Checkbox {
7381
- padding-inline-end: var(--spacing-md);
7382
- }.Layer__MatchFormMobile {
7185
+ }
7186
+ .Layer__expanded-bank-transaction-row {
7187
+ position: relative;
7188
+ display: block;
7189
+ overflow: hidden;
7190
+ background-color: var(--bg-element-focus);
7191
+ transition: background-color var(--transition-speed) ease-in-out, height var(--transition-speed) ease-in-out;
7192
+ }
7193
+
7194
+ .Layer__expanded-bank-transaction-row .Layer__expanded-bank-transaction-row__wrapper {
7195
+ display: flex;
7196
+ flex-direction: column;
7197
+ gap: var(--spacing-sm);
7198
+ overflow: hidden;
7199
+ transition: height var(--transition-speed) ease-in-out;
7200
+ }
7201
+
7202
+ .Layer__expanded-bank-transaction-row__content {
7203
+ box-sizing: border-box;
7204
+ display: flex;
7205
+ flex-direction: column;
7206
+ gap: var(--spacing-sm);
7207
+ min-width: 40rem;
7208
+ max-width: 76rem;
7209
+ }
7210
+ @container (max-width: 768px) {
7211
+ .Layer__expanded-bank-transaction-row__content {
7212
+ min-width: 30rem;
7213
+ }
7214
+ }
7215
+
7216
+ .Layer__expanded-bank-transaction-row__content-panels {
7217
+ box-sizing: border-box;
7218
+ display: flex;
7219
+ flex-direction: row;
7220
+ }
7221
+
7222
+ .Layer__expanded-bank-transaction-row__content-panel {
7223
+ box-sizing: border-box;
7224
+ display: flex;
7225
+ flex: 1;
7226
+ flex-direction: column;
7227
+ gap: var(--spacing-sm);
7228
+ overflow: hidden;
7229
+ height: 0;
7230
+ max-width: 0;
7231
+ opacity: 0;
7232
+ transition: max-width 150ms ease-out, opacity 300ms ease-out;
7233
+ }
7234
+ .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__content-panel-container {
7235
+ box-sizing: border-box;
7236
+ padding: 0 var(--spacing-md);
7237
+ }
7238
+ .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
7239
+ height: auto;
7240
+ max-width: 100%;
7241
+ opacity: 1;
7242
+ }
7243
+ .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__select .Layer__select__control {
7244
+ overflow: hidden;
7245
+ max-width: 0;
7246
+ }
7247
+ .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__table-cell--split-entry {
7248
+ overflow: hidden;
7249
+ max-width: 0;
7250
+ }
7251
+ .Layer__expanded-bank-transaction-row__content-panel:not(.Layer__expanded-bank-transaction-row__content-panel--active) .Layer__expanded-bank-transaction-row__splits-buttons {
7252
+ overflow: hidden;
7253
+ max-width: 0;
7254
+ }
7255
+
7256
+ @container (min-width: 701px) {
7257
+ .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
7258
+ max-width: 100%;
7259
+ opacity: 1;
7260
+ }
7261
+ .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
7262
+ max-height: 38px;
7263
+ white-space: nowrap;
7264
+ }
7265
+ }
7266
+ .Layer__expanded-bank-transaction-row__splits {
7267
+ display: flex;
7268
+ gap: var(--spacing-sm);
7269
+ }
7270
+
7271
+ .Layer__expanded-bank-transaction-row__splits-inputs {
7272
+ display: flex;
7273
+ flex-direction: column;
7274
+ gap: var(--spacing-xs);
7275
+ padding-top: 2px;
7276
+ }
7277
+
7278
+ .Layer__expanded-bank-transaction-row__splits-buttons {
7279
+ padding-bottom: 2px;
7280
+ }
7281
+
7282
+ .Layer__expanded-bank-transaction-row__total-and-btns {
7283
+ display: flex;
7284
+ flex-direction: column;
7285
+ gap: var(--spacing-sm);
7286
+ padding: var(--spacing-sm) 0;
7287
+ }
7288
+ .Layer__expanded-bank-transaction-row__total-and-btns:empty {
7289
+ display: none;
7290
+ }
7291
+
7292
+ .Layer__expanded-bank-transaction-row__total-and-btns--ListItem {
7293
+ flex-direction: column;
7294
+ align-items: stretch;
7295
+ }
7296
+
7297
+ .Layer__expanded-bank-transaction-row__file-upload {
7298
+ display: flex;
7299
+ flex-direction: column;
7300
+ gap: var(--spacing-md);
7301
+ align-items: flex-start;
7302
+ padding: 0 var(--spacing-md);
7303
+ }
7304
+
7305
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry {
7306
+ display: flex;
7307
+ gap: var(--spacing-xs);
7308
+ align-items: flex-start;
7309
+ min-width: 40rem;
7310
+ }
7311
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__BankTransactionCategoryComboBox__Container {
7312
+ grid-area: category;
7313
+ max-width: 24.5rem;
7314
+ }
7315
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer {
7316
+ grid-area: customer;
7317
+ min-width: 12rem;
7318
+ }
7319
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__Stack.Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container {
7320
+ flex: 0 0 12rem;
7321
+ grid-area: tax-code;
7322
+ min-width: 12rem;
7323
+ }
7324
+ @container (max-width: 768px) {
7325
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry {
7326
+ display: grid;
7327
+ grid-template-areas: "amount category button";
7328
+ grid-template-columns: 12rem minmax(12rem, 24.5rem) 2.25rem;
7329
+ min-width: 27.5rem;
7330
+ max-width: min(40rem, 100%);
7331
+ }
7332
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer) {
7333
+ grid-template-areas: "amount category button" ". customer .";
7334
+ }
7335
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container) {
7336
+ grid-template-areas: "amount category button" ". tax-code .";
7337
+ }
7338
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
7339
+ grid-template-areas: "amount category button" "tags tags .";
7340
+ }
7341
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container) {
7342
+ grid-template-areas: "amount category button" "customer tax-code .";
7343
+ }
7344
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
7345
+ grid-template-areas: "amount category button" "customer tags .";
7346
+ }
7347
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
7348
+ grid-template-areas: "amount category button" "tax-code tags .";
7349
+ }
7350
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tax-code__Container):has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
7351
+ grid-template-areas: "amount category button" "customer tax-code ." "tags tags .";
7352
+ }
7353
+ }
7354
+
7355
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
7356
+ grid-area: tags;
7357
+ }
7358
+
7359
+ @container (max-width: 600px) {
7360
+ .Layer__expanded-bank-transaction-row__splits-inputs {
7361
+ display: flex;
7362
+ flex-direction: column;
7363
+ gap: var(--spacing-xs);
7364
+ width: 100%;
7365
+ }
7366
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
7367
+ width: 100%;
7368
+ }
7369
+ .Layer__expanded-bank-transaction-row__total-and-btns {
7370
+ box-sizing: border-box;
7371
+ flex-direction: row;
7372
+ align-items: center;
7373
+ justify-content: space-between;
7374
+ }
7375
+ .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip {
7376
+ position: relative;
7377
+ flex: 1;
7378
+ width: 100%;
7379
+ max-width: 42%;
7380
+ }
7381
+ .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
7382
+ max-width: 100%;
7383
+ }
7384
+ }
7385
+ .Layer__expanded-bank-transaction-row__splits-inputs + .Layer__text--error {
7386
+ padding: var(--spacing-2xs) 0;
7387
+ padding-bottom: var(--spacing-md);
7388
+ margin: 0;
7389
+ }
7390
+
7391
+ .Layer__expanded-bank-transaction-row__splits-inputs .Layer__input {
7392
+ text-align: right;
7393
+ }
7394
+
7395
+ .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input {
7396
+ max-width: 100%;
7397
+ text-align: right;
7398
+ }
7399
+
7400
+ @container (min-width: 401px) {
7401
+ .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip,
7402
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
7403
+ flex: 1;
7404
+ max-width: 12rem;
7405
+ }
7406
+ .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip .Layer__input,
7407
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip .Layer__input {
7408
+ width: 100%;
7409
+ }
7410
+ }
7411
+ @container (max-width: 480px) {
7412
+ .Layer__expanded-bank-transaction-row__total-and-btns > .Layer__input-tooltip > .Layer__input-left-text {
7413
+ border-right-color: transparent;
7414
+ }
7415
+ }.Layer__BankTransactionsMobileCategorySelection {
7416
+ overflow: hidden;
7417
+ border-radius: var(--border-radius-2xs);
7418
+ border: 1px solid var(--color-base-300);
7419
+ }.Layer__BankTransactionsMobileCategorySelectionItem[data-selected] {
7420
+ background: var(--color-base-100);
7421
+ }.Layer__MatchFormMobileItem__Checkbox {
7422
+ padding-inline-end: var(--spacing-md);
7423
+ }.Layer__MatchFormMobile {
7424
+ overflow: hidden;
7383
7425
  border-radius: var(--border-radius-2xs);
7384
7426
  border: 1px solid var(--color-base-300);
7385
7427
  }
7386
7428
  .Layer__MatchFormMobile [data-selected] {
7387
7429
  background: var(--color-base-100);
7388
7430
  }.Layer__BankTransactionsMobileSplitForm__SplitRow {
7431
+ display: grid;
7432
+ grid-template-areas: "amount category button";
7433
+ grid-template-columns: 6rem minmax(0, 1fr) 2.25rem;
7389
7434
  max-inline-size: 100%;
7390
7435
  }
7436
+ .Layer__BankTransactionsMobileSplitForm__SplitRow:has(> .Layer__BankTransactionsMobileSplitForm__TaxCode) {
7437
+ grid-template-areas: "amount category button" ". tax-code .";
7438
+ }
7439
+ .Layer__BankTransactionsMobileSplitForm__SplitRow .Layer__CategorySelectDrawerWithTrigger {
7440
+ grid-area: category;
7441
+ }
7442
+ .Layer__BankTransactionsMobileSplitForm__SplitRow > .Layer__UI__Button {
7443
+ grid-area: button;
7444
+ }
7391
7445
 
7392
- .Layer__BankTransactionsMobileSplitForm__AmountInput {
7446
+ .Layer__BankTransactionsMobileSplitForm__AmountInput.Layer__input {
7393
7447
  flex-shrink: 0;
7448
+ grid-area: amount;
7449
+ inline-size: 6rem;
7450
+ font-size: var(--text-md);
7451
+ }
7452
+
7453
+ .Layer__BankTransactionsMobileSplitForm__TotalAmountInput.Layer__input {
7394
7454
  inline-size: 6rem;
7455
+ font-size: var(--text-md);
7456
+ }
7457
+
7458
+ .Layer__BankTransactionsMobileSplitForm__TaxCode {
7459
+ grid-area: tax-code;
7395
7460
  }.Layer__BankTransactionsMobileListItem__CategorizedValue {
7396
7461
  color: var(--color-base-500);
7397
7462
  }
@@ -7422,47 +7487,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7422
7487
  height: 4.75rem;
7423
7488
  padding-left: 1.25rem;
7424
7489
  border-bottom: 1px solid var(--border-color);
7425
- }.Layer__MobileListItem {
7426
- display: grid;
7427
- grid-template-areas: "content";
7428
- grid-template-columns: 1fr;
7429
- padding: var(--spacing-sm);
7430
- border-radius: var(--border-radius-sm);
7431
- border: 1px solid var(--border-color);
7432
- background-color: var(--color-base-0);
7433
- }
7434
- .Layer__MobileListItem[data-selection-mode=multiple], .Layer__MobileListItem[data-selection-mode=single] {
7435
- grid-template-areas: "selection content";
7436
- grid-template-columns: auto 1fr;
7437
- }
7438
- [data-variant=compact] .Layer__MobileListItem {
7439
- padding-inline: 0;
7440
- border-radius: 0;
7441
- border: none;
7442
- }.Layer__MobileListSection {
7443
- display: flex;
7444
- flex-direction: column;
7445
- }
7446
- .Layer__MobileListSection__Heading {
7447
- padding-block-end: var(--spacing-xs);
7448
- padding-inline: var(--spacing-3xs);
7449
- outline: none;
7450
- background-color: transparent;
7451
- cursor: default;
7452
- }
7453
- .Layer__MobileListSection:not(:last-child) {
7454
- padding-block-end: var(--spacing-xs);
7455
- }
7456
- .Layer__MobileListSection:not(:first-child) {
7457
- padding-block-start: var(--spacing-md);
7458
- border-block-start: 1px solid var(--border-color);
7459
- }.Layer__MobileList {
7460
- display: flex;
7461
- flex-direction: column;
7462
- gap: var(--spacing-sm);
7463
- }
7464
- .Layer__MobileList[data-variant=compact] {
7465
- gap: 0;
7466
7490
  }.Layer__pagination-container {
7467
7491
  justify-content: end;
7468
7492
  padding: var(--spacing-md);
@@ -8053,6 +8077,39 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8053
8077
  }
8054
8078
  .Layer__ProfitAndLossReport__Modal--mobile .Layer__ProfitAndLossDetailReport {
8055
8079
  min-height: 0;
8080
+ }.Layer__ProfitAndLossDetailedChartsHeader {
8081
+ display: flex;
8082
+ align-items: flex-start;
8083
+ justify-content: space-between;
8084
+ padding: var(--spacing-lg);
8085
+ box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
8086
+ }
8087
+ .Layer__ProfitAndLossDetailedChartsHeader button.Layer__btn.Layer__btn--icon-only {
8088
+ block-size: 2rem;
8089
+ min-block-size: 2rem;
8090
+ inline-size: 2rem;
8091
+ padding: 0;
8092
+ }
8093
+
8094
+ .Layer__ProfitAndLossDetailedChartsHeader--tablet {
8095
+ gap: var(--spacing-md);
8096
+ align-items: center;
8097
+ justify-content: flex-start;
8098
+ }
8099
+
8100
+ .Layer__ProfitAndLossDetailedChartsHeader__head {
8101
+ display: flex;
8102
+ flex-direction: column;
8103
+ gap: var(--spacing-4xs);
8104
+ }
8105
+ .Layer__ProfitAndLossDetailedChartsHeader__head > .Layer__text {
8106
+ margin: 0;
8107
+ }
8108
+
8109
+ @container (max-width: 767px) {
8110
+ .Layer__ProfitAndLossDetailedChartsHeader--desktop .Layer__ProfitAndLossDetailedChartsHeader__date {
8111
+ display: none;
8112
+ }
8056
8113
  }.Layer__GlobalDateRangeSelection {
8057
8114
  display: grid;
8058
8115
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
@@ -8101,21 +8158,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8101
8158
  .Layer__ProfitAndLossCompareOptions__Container[data-compact=true] .Layer__CompareTagsMultiSelect__Container {
8102
8159
  inline-size: 100%;
8103
8160
  max-inline-size: none;
8104
- }.Layer__MobileSelectionDrawerList__Check {
8105
- visibility: hidden;
8106
- height: 1rem;
8107
- min-width: 1rem;
8108
- }
8109
- .Layer__MobileSelectionDrawerList__Check[data-selected=true] {
8110
- visibility: visible;
8111
- }.Layer__MobileSelectionDrawerWithTrigger .Layer__SearchField {
8112
- inline-size: 100%;
8113
- }
8114
- .Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem {
8115
- transition: background-color 120ms ease;
8116
- }
8117
- .Layer__MobileSelectionDrawerWithTrigger .Layer__MobileListItem[data-hovered] {
8118
- background-color: var(--bg-element-focus);
8119
8161
  }.Layer__panel {
8120
8162
  display: flex;
8121
8163
  flex: 1;
@@ -9229,6 +9271,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9229
9271
  --banner-icon-color: var(--color-info-success-fg);
9230
9272
  --banner-icon-bg: var(--color-info-success-bg);
9231
9273
  }
9274
+ @media (width <= 500px) {
9275
+ .Layer__UI__Banner.Layer__Stack {
9276
+ flex-direction: column;
9277
+ align-items: stretch;
9278
+ }
9279
+ .Layer__UI__Banner.Layer__Stack .Layer__UI__Banner__actions {
9280
+ width: 100%;
9281
+ }
9282
+ .Layer__UI__Banner.Layer__Stack .Layer__UI__Banner__actions .Layer__UI__Button {
9283
+ inline-size: 100%;
9284
+ }
9285
+ }
9232
9286
 
9233
9287
  .Layer__UI__Banner__iconContainer {
9234
9288
  flex-shrink: 0;
@@ -9342,6 +9396,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9342
9396
  .Layer__UI__Table__UnifiedReports .Layer__UI__Table-Cell {
9343
9397
  display: table-cell;
9344
9398
  min-width: 6rem;
9399
+ max-width: 16rem;
9345
9400
  }.Layer__YearPicker {
9346
9401
  inline-size: 8rem;
9347
9402
  }.Layer__UnifiedReports__AdditionalControls {
@@ -9562,8 +9617,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9562
9617
 
9563
9618
  .Layer__MileageTrackingStats__Card {
9564
9619
  box-sizing: border-box;
9565
- padding-block: var(--spacing-sm);
9566
- padding-inline: var(--spacing-md);
9567
9620
  border-radius: var(--border-radius-2xs);
9568
9621
  border: 1px solid var(--border-color);
9569
9622
  }.Layer__TripsMobileHeader__SearchField {
@@ -9599,62 +9652,367 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9599
9652
  table-layout: fixed;
9600
9653
  width: 100%;
9601
9654
  }
9602
- .Layer__UI__Table__TripsTable .Layer__UI__Table-Row,
9603
- .Layer__UI__Table__TripsTable .Layer__UI__Table-TableHeader > tr {
9604
- display: grid;
9605
- grid-template-columns: minmax(8rem, 10%) minmax(8rem, 15%) minmax(6rem, 10%) minmax(8rem, 10%) minmax(12rem, 25%) minmax(12rem, 30%) 6rem;
9655
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Row,
9656
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-TableHeader > tr {
9657
+ display: grid;
9658
+ grid-template-columns: minmax(8rem, 10%) minmax(8rem, 15%) minmax(6rem, 10%) minmax(8rem, 10%) minmax(12rem, 25%) minmax(12rem, 30%) 6rem;
9659
+ }
9660
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Distance, .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Actions,
9661
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Distance,
9662
+ .Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Actions {
9663
+ justify-content: flex-end;
9664
+ }.Layer__VehicleForm {
9665
+ display: flex;
9666
+ flex-direction: column;
9667
+ gap: var(--spacing-md);
9668
+ width: 100%;
9669
+ }
9670
+ .Layer__VehicleForm .Layer__VehicleForm__FormError {
9671
+ padding: var(--spacing-sm);
9672
+ }
9673
+ .Layer__VehicleForm .Layer__VehicleForm__Submit {
9674
+ align-items: flex-end;
9675
+ padding-block-start: 1rem;
9676
+ }
9677
+ .Layer__VehicleForm .Layer__VehicleForm__Field__MakeAndModel,
9678
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Year,
9679
+ .Layer__VehicleForm .Layer__VehicleForm__Field__LicensePlate,
9680
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Vin,
9681
+ .Layer__VehicleForm .Layer__VehicleForm__Field__Description,
9682
+ .Layer__VehicleForm .Layer__VehicleForm__Field__IsPrimary {
9683
+ grid-template-columns: 10rem auto;
9684
+ width: 100%;
9685
+ }.Layer__VehicleCard {
9686
+ box-shadow: 0 0 0 1px var(--border-color);
9687
+ }
9688
+ .Layer__VehicleCard .Layer__VehicleCard__Header {
9689
+ flex: 1;
9690
+ min-width: 0;
9691
+ }
9692
+ .Layer__VehicleCard .Layer__VehicleCard__Icon {
9693
+ min-height: 20px;
9694
+ min-width: 20px;
9695
+ color: var(--color-base-400);
9696
+ }.Layer__VehicleManagementGrid {
9697
+ display: grid;
9698
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
9699
+ gap: var(--spacing-md);
9700
+ padding: var(--spacing-md);
9701
+ }
9702
+ @media (width <= 768px) {
9703
+ .Layer__VehicleManagementGrid {
9704
+ grid-template-columns: 1fr;
9705
+ }
9706
+ }.Layer__project-view .Layer__category-menu {
9707
+ max-width: 300px;
9708
+ }
9709
+ .Layer__project-view .Layer__select__menu {
9710
+ z-index: 2;
9711
+ }.Layer__SummaryCard {
9712
+ --layer-summary-card-desktop-height: 25rem;
9713
+ box-sizing: border-box;
9714
+ inline-size: 100%;
9715
+ min-inline-size: 0;
9716
+ box-shadow: 0 0 0 1px var(--border-color);
9717
+ }
9718
+ .Layer__SummaryCard__Body {
9719
+ block-size: 100%;
9720
+ min-inline-size: 0;
9721
+ }
9722
+ .Layer__SummaryCard__Header {
9723
+ box-sizing: border-box;
9724
+ block-size: 5rem;
9725
+ border-block-end: 1px solid var(--color-base-300);
9726
+ }
9727
+ .Layer__SummaryCard__HeaderTitle {
9728
+ min-inline-size: 0;
9729
+ }
9730
+ .Layer__SummaryCard__HeaderActions {
9731
+ flex-shrink: 0;
9732
+ min-inline-size: 0;
9733
+ }
9734
+ .Layer__SummaryCard__HeaderLegend {
9735
+ min-inline-size: 0;
9736
+ }
9737
+ .Layer__SummaryCard__HeaderPrimaryAction {
9738
+ flex-shrink: 0;
9739
+ min-inline-size: 0;
9740
+ }
9741
+ .Layer__SummaryCard__Content {
9742
+ box-sizing: border-box;
9743
+ flex: 1 1 auto;
9744
+ min-block-size: 0;
9745
+ min-inline-size: 0;
9746
+ padding: var(--spacing-sm);
9747
+ }
9748
+
9749
+ @media (width > 760px) {
9750
+ .Layer__SummaryCard {
9751
+ block-size: var(--layer-summary-card-desktop-height);
9752
+ }
9753
+ .Layer__SummaryCard__Content {
9754
+ overflow: auto;
9755
+ }
9756
+ }.Layer__ExpensesSummaryCard .Layer__SummaryCard__Content {
9757
+ overflow: hidden;
9758
+ block-size: 100%;
9759
+ }
9760
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts,
9761
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9762
+ gap: var(--spacing-md);
9763
+ block-size: 100%;
9764
+ min-block-size: 0;
9765
+ }
9766
+ @container (width > 500px) {
9767
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts,
9768
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9769
+ flex-direction: row;
9770
+ }
9771
+ }
9772
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9773
+ display: flex;
9774
+ align-items: stretch;
9775
+ justify-content: center;
9776
+ overflow: hidden;
9777
+ }
9778
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedChart {
9779
+ flex: 0 0 auto;
9780
+ inline-size: auto;
9781
+ min-inline-size: 14rem;
9782
+ max-inline-size: 18rem;
9783
+ }
9784
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedTable {
9785
+ flex: unset;
9786
+ overflow-x: hidden;
9787
+ overflow-y: auto;
9788
+ min-block-size: 0;
9789
+ min-inline-size: 0;
9790
+ }
9791
+ @media (width <= 767px) {
9792
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedTable {
9793
+ padding-inline: 0;
9794
+ }
9795
+ }
9796
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable table {
9797
+ border-collapse: separate;
9798
+ border-spacing: 0;
9799
+ }
9800
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable thead th {
9801
+ position: sticky;
9802
+ z-index: 1;
9803
+ box-shadow: inset 0 -1px 0 var(--color-base-300);
9804
+ background: var(--color-base-0);
9805
+ inset-block-start: 0;
9806
+ border-block-end: 0;
9807
+ }
9808
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts .Layer__DetailedChart__container {
9809
+ padding-inline-start: var(--spacing-xs);
9810
+ padding-inline-end: var(--spacing-xs);
9811
+ }
9812
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable {
9813
+ min-inline-size: 10rem;
9814
+ }
9815
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable__container {
9816
+ padding-inline: 0;
9817
+ }.Layer__MileageTrackingSummary__Header {
9818
+ box-sizing: border-box;
9819
+ padding: var(--spacing-lg);
9820
+ border-bottom: 1px solid var(--color-base-300);
9821
+ }
9822
+
9823
+ .Layer__MileageTrackingSummary__Content {
9824
+ padding: var(--spacing-lg);
9825
+ }
9826
+
9827
+ .Layer__MileageTrackingSummary__Cards {
9828
+ min-width: 12rem;
9829
+ }
9830
+
9831
+ @media (width <= 760px) {
9832
+ .Layer__MileageTrackingSummary__Cards {
9833
+ min-width: 0;
9834
+ }
9835
+ .Layer__MileageTrackingSummary__Cards .Layer__MileageTrackingSummary__StatCardSlot {
9836
+ display: flex;
9837
+ flex: 1;
9838
+ }
9839
+ .Layer__MileageTrackingSummary__Cards .Layer__MileageTrackingSummary__StatCardSlot > * {
9840
+ flex: 1;
9841
+ }
9842
+ }.Layer__PnlLegend__Swatch {
9843
+ display: inline-block;
9844
+ flex-shrink: 0;
9845
+ block-size: 0.625rem;
9846
+ inline-size: 0.625rem;
9847
+ border-radius: 50%;
9848
+ }
9849
+
9850
+ .Layer__PnlLegend__Swatch--income {
9851
+ background-color: var(--bar-color-income);
9852
+ }
9853
+
9854
+ .Layer__PnlLegend__Swatch--expenses {
9855
+ background-color: var(--bar-color-expenses);
9856
+ }
9857
+
9858
+ .Layer__PnlLegend__Swatch--uncategorized {
9859
+ background-image: linear-gradient(45deg, var(--color-base-500) 25%, transparent 25%, transparent 50%, var(--color-base-500) 50%, var(--color-base-500) 75%, transparent 75%, transparent);
9860
+ background-size: 4px 4px;
9861
+ }.Layer__ProfitAndLossSummaryCard .Layer__chart-wrapper,
9862
+ .Layer__ProfitAndLossSummaryCard .Layer__chart-container {
9863
+ min-block-size: 15.625rem;
9864
+ }
9865
+ .Layer__ProfitAndLossSummaryCard div.recharts-responsive-container.Layer__chart-container {
9866
+ padding-block-start: var(--spacing-xs);
9867
+ }.Layer__Swatch {
9868
+ flex-shrink: 0;
9869
+ block-size: 0.625rem;
9870
+ inline-size: 0.625rem;
9871
+ }.Layer__UI__Legend--table {
9872
+ flex-wrap: wrap;
9873
+ }
9874
+
9875
+ .Layer__UI__Legend__Item {
9876
+ min-inline-size: 10rem;
9877
+ max-inline-size: 10rem;
9878
+ }
9879
+
9880
+ .Layer__UI__Legend__Label {
9881
+ min-inline-size: 0;
9882
+ }
9883
+ .Layer__UI__Legend__Label > .Layer__Span {
9884
+ min-inline-size: 0;
9885
+ }
9886
+
9887
+ .Layer__UI__Legend--aligned {
9888
+ display: flex;
9889
+ flex-direction: row;
9890
+ align-items: flex-start;
9891
+ inline-size: 100%;
9892
+ min-inline-size: 0;
9893
+ }
9894
+
9895
+ .Layer__UI__Legend__AlignedItem {
9896
+ gap: var(--spacing-3xs);
9897
+ min-inline-size: 0;
9898
+ padding-inline-end: var(--spacing-md);
9899
+ }
9900
+
9901
+ .Layer__UI__Legend__AlignedValue {
9902
+ line-height: 1.1;
9903
+ }.Layer__HorizontalBarChart {
9904
+ container: horizontal-bar-chart/inline-size;
9905
+ inline-size: 100%;
9906
+ }
9907
+
9908
+ .Layer__HorizontalBarChart__Bar {
9909
+ block-size: 1.5rem;
9910
+ inline-size: 100%;
9911
+ }
9912
+ .Layer__HorizontalBarChart__Bar .recharts-responsive-container {
9913
+ padding: 0;
9914
+ }
9915
+
9916
+ @container horizontal-bar-chart (max-width: 1100px) {
9917
+ .Layer__HorizontalBarChart .Layer__UI__Legend--table.Layer__Stack[data-direction] {
9918
+ flex-direction: column;
9919
+ gap: var(--spacing-sm);
9920
+ align-items: stretch;
9921
+ }
9922
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Item {
9923
+ display: grid;
9924
+ grid-template-columns: minmax(0, 1fr) auto;
9925
+ row-gap: 0;
9926
+ column-gap: var(--spacing-sm);
9927
+ align-items: center;
9928
+ min-inline-size: 100%;
9929
+ max-inline-size: none;
9930
+ }
9931
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Label {
9932
+ min-inline-size: 0;
9933
+ }
9934
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Meta {
9935
+ justify-self: end;
9936
+ }
9937
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Value,
9938
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Percentage {
9939
+ white-space: nowrap;
9940
+ }
9941
+ }.Layer__SummaryCard__ContainerHeader {
9942
+ box-sizing: border-box;
9943
+ border-bottom: 1px solid var(--color-base-300);
9944
+ }
9945
+
9946
+ .Layer__TaxEstimatesSummaryCard__Container {
9947
+ container-type: inline-size;
9948
+ min-width: 0;
9949
+ }
9950
+
9951
+ .Layer__TaxEstimatesSummaryCard:not(.Layer__TaxEstimatesSummaryCard--summaryCard) .Layer__TaxEstimatesSummaryCard__Header.Layer__SummaryCard__ContainerHeader {
9952
+ padding-block-end: var(--spacing-lg);
9953
+ padding-inline: var(--spacing-lg);
9954
+ margin-inline: calc(-1 * var(--spacing-lg));
9955
+ }
9956
+
9957
+ .Layer__TaxEstimatesSummaryCard {
9958
+ min-width: 0;
9959
+ }
9960
+ .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9961
+ height: 12rem;
9962
+ max-width: 18rem;
9963
+ }
9964
+ @media (width >= 760px) {
9965
+ .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9966
+ width: 18rem;
9967
+ }
9968
+ }
9969
+ .Layer__TaxEstimatesSummaryCard.Layer__card {
9970
+ gap: var(--spacing-lg);
9971
+ padding: var(--spacing-lg);
9972
+ border: 1px solid var(--color-base-200);
9973
+ box-shadow: none;
9606
9974
  }
9607
- .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Distance, .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Actions,
9608
- .Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Distance,
9609
- .Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Actions {
9610
- justify-content: flex-end;
9611
- }.Layer__VehicleForm {
9612
- display: flex;
9613
- flex-direction: column;
9614
- gap: var(--spacing-md);
9615
- width: 100%;
9975
+ .Layer__TaxEstimatesSummaryCard__Content {
9976
+ justify-content: space-between;
9977
+ min-width: 0;
9616
9978
  }
9617
- .Layer__VehicleForm .Layer__VehicleForm__FormError {
9618
- padding: var(--spacing-sm);
9979
+ .Layer__TaxEstimatesSummaryCard__Content--mobile {
9980
+ align-items: center;
9619
9981
  }
9620
- .Layer__VehicleForm .Layer__VehicleForm__Submit {
9621
- align-items: flex-end;
9622
- padding-block-start: 1rem;
9982
+ .Layer__TaxEstimatesSummaryCard__Content--horizontal {
9983
+ align-items: stretch;
9623
9984
  }
9624
- .Layer__VehicleForm .Layer__VehicleForm__Field__MakeAndModel,
9625
- .Layer__VehicleForm .Layer__VehicleForm__Field__Year,
9626
- .Layer__VehicleForm .Layer__VehicleForm__Field__LicensePlate,
9627
- .Layer__VehicleForm .Layer__VehicleForm__Field__Vin,
9628
- .Layer__VehicleForm .Layer__VehicleForm__Field__Description,
9629
- .Layer__VehicleForm .Layer__VehicleForm__Field__IsPrimary {
9630
- grid-template-columns: 10rem auto;
9631
- width: 100%;
9632
- }.Layer__VehicleCard {
9633
- box-shadow: 0 0 0 1px var(--border-color);
9985
+ .Layer__TaxEstimatesSummaryCard__TotalRow {
9986
+ inline-size: 100%;
9634
9987
  }
9635
- .Layer__VehicleCard .Layer__VehicleCard__Header {
9636
- flex: 1;
9988
+ .Layer__TaxEstimatesSummaryCard__TotalValue {
9989
+ line-height: 1.1;
9990
+ }
9991
+ .Layer__TaxEstimatesSummaryCard__Header, .Layer__TaxEstimatesSummaryCard__Body {
9637
9992
  min-width: 0;
9638
9993
  }
9639
- .Layer__VehicleCard .Layer__VehicleCard__Icon {
9640
- min-height: 20px;
9641
- min-width: 20px;
9642
- color: var(--color-base-400);
9643
- }.Layer__VehicleManagementGrid {
9994
+ .Layer__TaxEstimatesSummaryCard--summaryCard.Layer__card {
9995
+ gap: 0;
9996
+ width: auto;
9997
+ max-width: 100%;
9998
+ padding: 0;
9999
+ }
10000
+ .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Header {
10001
+ padding: var(--spacing-lg);
10002
+ }
10003
+ .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
10004
+ align-items: center;
10005
+ }.Layer__SolopreneurOverview__Grid {
9644
10006
  display: grid;
9645
- grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
10007
+ grid-template-columns: repeat(2, minmax(0, 1fr));
10008
+ grid-auto-rows: minmax(0, auto);
9646
10009
  gap: var(--spacing-md);
9647
- padding: var(--spacing-md);
10010
+ max-inline-size: 1406px;
9648
10011
  }
9649
- @media (width <= 768px) {
9650
- .Layer__VehicleManagementGrid {
9651
- grid-template-columns: 1fr;
10012
+ @container (max-width: 1023px) {
10013
+ .Layer__SolopreneurOverview__Grid {
10014
+ grid-template-columns: minmax(0, 1fr);
9652
10015
  }
9653
- }.Layer__project-view .Layer__category-menu {
9654
- max-width: 300px;
9655
- }
9656
- .Layer__project-view .Layer__select__menu {
9657
- z-index: 2;
9658
10016
  }.Layer__FilingStatusComboBox {
9659
10017
  display: grid;
9660
10018
  grid-template-areas: "label" "input";
@@ -9702,8 +10060,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9702
10060
  }
9703
10061
  }
9704
10062
 
9705
- .Layer__TaxSummaryCard__MobileToggleWrapper {
9706
- margin-top: var(--spacing-md);
10063
+ .Layer__TaxSummaryCard__MobileAmountRow .Layer__UI__Button {
10064
+ text-decoration: underline;
9707
10065
  }.Layer__TaxSummaryCard {
9708
10066
  display: grid;
9709
10067
  grid-template-columns: 20% 40% 40%;
@@ -9795,6 +10153,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9795
10153
  justify-content: flex-end;
9796
10154
  text-align: right;
9797
10155
  }
10156
+ .Layer__UI__Table__TaxDetails .Layer__UI__Table-Row:has(.Layer__TaxDetails__TaxDetailsRow--total) .Layer__Span {
10157
+ font-weight: var(--font-weight-bold);
10158
+ color: var(--color-base-1000);
10159
+ }
10160
+ .Layer__UI__Table__TaxDetails .Layer__UI__Table-Row:has(.Layer__TaxDetails__TaxDetailsRow--total):not([data-depth="0"]) {
10161
+ border-block-start-color: var(--color-base-500);
10162
+ }
9798
10163
 
9799
10164
  .Layer__TaxDetails__ExpandableCardsWrapper {
9800
10165
  overflow: hidden;
@@ -9808,254 +10173,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9808
10173
  .Layer__TaxDetails__ExpandableCardsWrapper {
9809
10174
  border-radius: 0;
9810
10175
  }
9811
- }.Layer__TaxDetails__Operator {
9812
- display: inline-flex;
9813
- align-items: center;
9814
- align-self: stretch;
9815
- padding-inline-end: var(--spacing-md);
9816
- border-inline-end: 1px solid var(--color-base-500);
9817
- }.Layer__SummaryCard__ContainerHeader {
9818
- box-sizing: border-box;
9819
- border-bottom: 1px solid var(--color-base-300);
9820
- }
9821
-
9822
- .Layer__TaxEstimatesSummaryCard__Container {
9823
- container-type: inline-size;
9824
- min-width: 0;
9825
- }
9826
-
9827
- .Layer__TaxEstimatesSummaryCard {
9828
- min-width: 0;
9829
- }
9830
- .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9831
- height: 12rem;
9832
- max-width: 18rem;
9833
- }
9834
- @media (width >= 760px) {
9835
- .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9836
- width: 18rem;
9837
- }
9838
- }
9839
- .Layer__TaxEstimatesSummaryCard.Layer__card {
9840
- gap: var(--spacing-lg);
9841
- padding: var(--spacing-lg);
9842
- border: 1px solid var(--color-base-200);
9843
- box-shadow: none;
9844
- }
9845
- .Layer__TaxEstimatesSummaryCard__Content {
9846
- justify-content: space-between;
9847
- min-width: 0;
9848
- }
9849
- .Layer__TaxEstimatesSummaryCard__Content--mobile {
9850
- align-items: center;
9851
- }
9852
- .Layer__TaxEstimatesSummaryCard__Header, .Layer__TaxEstimatesSummaryCard__Body {
9853
- min-width: 0;
9854
- }
9855
- .Layer__TaxEstimatesSummaryCard--summaryCard.Layer__card {
9856
- gap: 0;
9857
- width: auto;
9858
- max-width: 100%;
9859
- padding: 0;
9860
- }
9861
- .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Header {
9862
- padding: var(--spacing-lg);
9863
- }
9864
- .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
9865
- align-items: center;
9866
- }.Layer__MetricRow {
9867
- min-block-size: 2.5rem;
9868
- }
9869
-
9870
- .Layer__MetricCard {
9871
- min-width: 0;
9872
- padding: var(--spacing-sm) var(--spacing-md);
9873
- border-radius: var(--border-radius-xs);
9874
- background-color: var(--color-base-50);
9875
- }
9876
-
9877
- .Layer__MetricCard__Label {
9878
- flex-shrink: 0;
9879
- white-space: nowrap;
9880
- }
9881
-
9882
- .Layer__MetricCard__Meter {
9883
- flex: 1;
9884
- min-width: 0;
9885
- }
9886
-
9887
- .Layer__MetricRow__Value {
9888
- flex: 0 0 56%;
9889
- justify-content: flex-end;
9890
- min-width: 0;
9891
- }
9892
-
9893
- .Layer__MetricCard .Layer__MoneySpan {
9894
- flex-shrink: 0;
9895
- }
9896
-
9897
- @container (max-width: 720px) {
9898
- .Layer__MetricRow,
9899
- .Layer__MetricRow__Value {
9900
- flex-direction: column;
9901
- align-items: stretch;
9902
- }
9903
- .Layer__MetricRow__Value {
9904
- flex-basis: auto;
9905
- }
9906
- }.Layer__TaxOverview__Card {
9907
- --color-tax-overview-income-meter-fill: #6d3cc8;
9908
- --color-tax-overview-deductions-meter-fill: #1c7e9a;
9909
- --color-tax-overview-taxable-income-meter-fill: #3b9c63;
9910
- --color-tax-overview-unknown-meter-fill: var(--color-base-500);
9911
- gap: var(--spacing-lg);
9912
- padding: var(--spacing-lg);
9913
- }
9914
- .Layer__TaxOverview__Card .Layer__card {
9915
- border: 1px solid var(--color-base-200);
9916
- box-shadow: none;
9917
- }
9918
-
9919
- .Layer__TaxOverview__Meter {
9920
- flex: 1;
9921
- min-width: 9rem;
9922
- }
9923
-
9924
- .Layer__TaxOverview__Meter__track {
9925
- fill: var(--color-base-100);
9926
- }
9927
-
9928
- .Layer__TaxOverview__IncomeMeter.Layer__TaxOverview__Meter__fill {
9929
- fill: var(--color-tax-overview-income-meter-fill);
9930
- }
9931
-
9932
- .Layer__TaxOverview__DeductionsMeter.Layer__TaxOverview__Meter__fill {
9933
- fill: var(--color-tax-overview-deductions-meter-fill);
9934
- }
9935
-
9936
- .Layer__TaxOverview__TaxableIncomeMeter.Layer__TaxOverview__Meter__fill {
9937
- fill: var(--color-tax-overview-taxable-income-meter-fill);
9938
- }
9939
-
9940
- .Layer__TaxOverview__UnknownMetricMeter.Layer__TaxOverview__Meter__fill {
9941
- fill: var(--color-tax-overview-unknown-meter-fill);
9942
- }
9943
-
9944
- @container (max-width: 720px) {
9945
- .Layer__TaxOverview__Card {
9946
- gap: var(--spacing-md);
9947
- padding: 0;
9948
- }
9949
- }
9950
- .Layer__TaxOverview__Card__MetricRow--mobile {
9951
- gap: var(--spacing-sm);
9952
- }
9953
-
9954
- .Layer__MetricCard .Layer__TaxOverview__Meter {
9955
- width: 100%;
9956
- min-width: 0;
9957
- }.Layer__TaxOverview__DeadlineCard {
9958
- box-sizing: border-box;
9959
- min-width: 0;
9960
- padding: 0;
9961
- border-radius: var(--border-radius-xs);
9962
- border: 1px solid var(--color-base-200);
9963
- background-color: var(--color-base-0);
9964
- }
9965
- .Layer__TaxOverview__DeadlineReviewRow {
9966
- background-color: var(--color-base-50);
9967
- }
9968
- .Layer__TaxOverview__DeadlineContent {
9969
- min-width: 0;
9970
- }
9971
- .Layer__TaxOverview__DeadlineAmountColumn {
9972
- flex-shrink: 0;
9973
- min-width: 10rem;
9974
- }
9975
- .Layer__TaxOverview__DeadlineValueRow {
9976
- justify-content: flex-end;
9977
- }
9978
- .Layer__TaxOverview__AmountIcon {
9979
- display: inline-flex;
9980
- align-items: center;
9981
- justify-content: center;
9982
- height: 1.25rem;
9983
- width: 1.25rem;
9984
- border-radius: 50%;
9985
- background-color: var(--color-info-neutral-bg);
9986
- color: var(--color-info-neutral-fg);
9987
- }
9988
- .Layer__TaxOverview__AmountIcon--warning {
9989
- background-color: var(--color-info-warning-bg);
9990
- color: var(--color-info-warning-fg);
9991
- }
9992
- .Layer__TaxOverview__AmountIcon--pastDue {
9993
- background-color: var(--color-info-error-bg);
9994
- color: var(--color-info-error);
9995
- }
9996
- .Layer__TaxOverview__AmountIcon--paid {
9997
- background-color: var(--color-info-success-bg);
9998
- color: var(--color-info-success);
9999
- }
10000
- .Layer__TaxOverview__AmountIcon--due {
10001
- background-color: var(--color-info-bg);
10002
- color: var(--color-info);
10003
- }
10004
- .Layer__TaxOverview__DeadlineReviewContent {
10005
- min-width: 0;
10006
- }
10007
- .Layer__TaxOverview__DeadlineReviewIcon {
10008
- display: inline-flex;
10009
- align-items: center;
10010
- justify-content: center;
10011
- color: var(--color-info-warning);
10012
- }
10013
- .Layer__TaxOverview__DeadlineReviewLabel {
10014
- color: var(--color-info-warning-fg);
10015
- }
10016
-
10017
- @media (width <= 500px) {
10018
- .Layer__TaxOverview__DeadlineReviewRow button {
10019
- width: fit-content;
10020
- }
10021
- }.Layer__TaxOverview__Card--deadlines {
10022
- min-width: 25rem;
10023
- }
10024
- @container (max-width: 960px) {
10025
- .Layer__TaxOverview__Card--deadlines {
10026
- min-width: unset;
10027
- }
10028
- }
10029
- .Layer__TaxOverview__Card.Layer__card {
10030
- gap: var(--spacing-lg);
10031
- padding: var(--spacing-lg);
10032
- border: 1px solid var(--color-base-200);
10033
- box-shadow: none;
10034
- }
10035
-
10036
- @container (max-width: 720px) {
10037
- .Layer__TaxOverview__Card.Layer__card {
10038
- gap: var(--spacing-md);
10039
- }
10040
- }.Layer__TaxOverview {
10041
- inline-size: min(100%, 1406px);
10042
- container-type: inline-size;
10043
- }
10044
- .Layer__TaxOverview__PrimaryColumn {
10045
- flex: 1 1 0%;
10046
- min-width: 0;
10047
- }
10048
- .Layer__TaxOverview__SecondaryColumn {
10049
- flex: 0 0 38%;
10050
- min-width: 23rem;
10051
- max-width: 32rem;
10052
- }
10053
-
10054
- @container (max-width: 1140px) {
10055
- .Layer__TaxOverview__SecondaryColumn {
10056
- flex-basis: 36%;
10057
- min-width: 22rem;
10058
- }
10059
10176
  }.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
10060
10177
  .Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
10061
10178
  padding: var(--spacing-sm);
@@ -10263,7 +10380,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10263
10380
  font-size: 1.75rem;
10264
10381
  line-height: 1;
10265
10382
  color: var(--color-base-0);
10266
- font-variant-numeric: tabular-nums;
10267
10383
  letter-spacing: 0.02em;
10268
10384
  }
10269
10385
 
@@ -10282,7 +10398,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10282
10398
 
10283
10399
  .Layer__ActiveTimeTracker__DurationValue {
10284
10400
  font-size: var(--text-heading-3xl);
10285
- font-variant-numeric: tabular-nums;
10286
10401
  line-height: 1;
10287
10402
  }
10288
10403
 
@@ -10508,7 +10623,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10508
10623
 
10509
10624
  .Layer__TimeTrackingStats__SummaryValue {
10510
10625
  font-size: var(--text-heading);
10511
- font-variant-numeric: tabular-nums;
10512
10626
  line-height: 1;
10513
10627
  }
10514
10628