/* ============================================
   Custom Styles - Themed with CSS Variables
   ============================================ */

.login {
    height: 1000px;
}
.login form {
    padding-top: 10%;
}
.logo {
    text-align: center;
    padding-bottom: 4%;
}
.input, .select select, .select.pickerToggler {
    padding: 0.5rem 0.75rem;
}
/* Bulma's .select is a wrapper that adds the dropdown arrow via ::after.
   It must stay a transparent container so the native <select> inside is
   not visually framed twice. The inner element gets its own border/padding. */
.select:not(.pickerToggler) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex;
    align-items: stretch;
    height: auto;
}
.select:not(.pickerToggler) > select {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid var(--theme-input-border);
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
    font-weight: bold;
}
.select:not(.pickerToggler) > select:focus {
    border-color: var(--theme-border-focus);
    box-shadow: 0 0 0 2px rgba(115, 101, 255, 0.2);
}
.dropDownItem {
    padding: 0.25rem 0.75rem;
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}
.dropDownItem:first-child {
    padding-top: 0.5rem;
}
.dropDownItem:last-child {
    padding-bottom: 0.5rem;
}
.dropDownItem:hover {
    background-color: var(--theme-bg-hover);
}
.pickerContent .pickerItem {
    padding: 0.675rem 0.75rem;
}
.pickerHeader .input {
    border-radius: none;
    border: none;
}
.check .checkLabel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--theme-text-primary);
}
.button {
    padding: 0.5rem 0.75rem;
}
select.select,
.select.pickerToggler {
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}
.select:not(.is-multiple):not(.is-loading)::after {
    border-color: transparent !important;
}
.tedirTimeGroup .group .button.groupItem {
    padding: 0px;
}
.calendarDay, .calendarMonth, .tedirDateControl {
    display: flex;
    justify-content: center;
}
.tedirDateCenter, .tedirDateMonth {
    flex-grow: 1;
}
.tedirDateEnd {
    flex-grow: 0 !important;
}
.detailRecordTab {
    margin: 0px !important;
    padding: 0px !important;
    overflow-x: auto;
    width: 100%;
    z-index: 1;
}
.detailRecordTab .tabs {
    width: 100%;
}
.detailRecordTab .tabs ul {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.card.sd-none {
    box-shadow: none !important;
}

.pickerItem {
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}
.scrolling-wrapper .card {
    display: inline-block;
}

.container.is-fluid {
    padding-left: 0;
    padding-right: 0;
}

main .breadcum {
    margin-top: 0px !important;
}
.modal {
    z-index: 6000 !important;
}
.modalHeader, .modalBody, .modalFooter {
    padding: 0.75rem !important;
    background-color: var(--theme-modal-bg);
    color: var(--theme-text-primary);
}
.modalHeader.modalHeaderNoPad {
    padding: 0px !important;
}

.tabs.is-boxed li.is-active a {
    font-weight: bold;
    background-color: var(--theme-bg-selected) !important;
    color: var(--theme-text-primary) !important;
}

.tabs.is-boxed li a {
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}

.tabs.is-boxed li a:hover {
    background-color: var(--theme-bg-hover);
}

.input {
    border-color: var(--theme-input-border);
    border-width: 1px;
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}

.input:focus {
    border-color: var(--theme-border-focus);
    box-shadow: 0 0 0 2px rgba(115, 101, 255, 0.2);
}

@media (min-width: 1024px) {
    .modalPrintPreview .modalContent {
        width: 960px;
    }
}

textarea[disabled],
textarea[readonly],
input[disabled],
input[readonly],
select[disabled] {
    background-color: var(--theme-bg-disabled);
    color: var(--theme-text-secondary);
    opacity: 0.6;
    border: 1px solid var(--theme-border);
}

.select.pickerToggler {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.pickerContent .pickerItem {
    padding: 5px 5px 5px !important;
}

.pickerContent .pickerItem:hover {
    background-color: var(--theme-primary);
    color: var(--theme-text-inverse);
}


.check input[type="checkbox"] {
    /* Base Styles aka unchecked */
    font-weight: 300;
    font-size: 16px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 0px;
}

.check input[type="checkbox"]:not(:checked) {
    /* Explicit Unchecked Styles */
    background-color: var(--theme-input-bg);
}
.check input[type="checkbox"]:disabled {
    /* Explicit Unchecked Styles */
    background-color: var(--theme-bg-disabled);
}
.check input[type="checkbox"]:checked {
    /* Checked Styles */
    font-weight: 900;
    background-color: var(--theme-checkbox-checked);
}

select.select,
.select.pickerToggler,
.input {
    border-width: 1px;
    border-style: solid;
    font-weight: bold;
}

label.label {
    font-weight: normal;
    color: var(--theme-text-primary);
}
.pickerContent .pickerHeader {
    padding: 0px;
    border-bottom: 0px;
    border: 2px dotted var(--theme-primary);
    background-color: var(--theme-surface);
}

.modalContent {
    background-color: var(--theme-modal-bg);
    color: var(--theme-text-primary);
}

button.button {
  background-color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
  color: var(--theme-text-inverse);
}
button.button:hover,
button.button.buttonActive {
  border: 1px solid var(--theme-primary-light);
  background-color: var(--theme-primary-light);
}

.headerActionFocus {
    border-radius: 0px !important;
}

.headerActionFocus.d-flex.justify-between {
    justify-content: normal;
}

.button.is-danger {
    background-color: var(--theme-danger);
    border-color: var(--theme-danger);
    color: var(--theme-text-inverse);
}

.button.is-danger:hover {
    background-color: var(--theme-danger-hover);
    border-color: var(--theme-danger-hover);
    color: var(--theme-text-inverse);
}

.button.is-success {
    background-color: var(--theme-success);
    border-color: var(--theme-success);
    color: var(--theme-text-inverse);
}

.button.is-success:hover {
    background-color: #008f00;
    border-color: #008f00;
    color: var(--theme-text-inverse);
}

.button.is-warning {
    background-color: var(--theme-warning);
    border-color: var(--theme-warning);
    color: var(--theme-text-inverse);
}

.button.is-warning:hover {
    background-color: #946d00;
    border-color: #946d00;
    color: var(--theme-text-inverse);
}

.button.is-info {
    background-color: var(--theme-info);
    border-color: var(--theme-info);
    color: var(--theme-text-inverse);
}

.button.is-info:hover {
    background-color: #1a86d0;
    border-color: #1a86d0;
    color: var(--theme-text-inverse);
}

.button.is-danger:disabled,
.button.is-success:disabled,
.button.is-warning:disabled,
.button.is-info:disabled,
.button.is-primary:disabled,
.button.is-ticket:disabled {
    opacity: 0.7;
    color: var(--theme-text-inverse);
}

button.button.is-ticket,
.button.is-ticket {
    background-color: #facc15;
    border-color: #facc15;
    color: #000000;
}

button.button.is-ticket:hover,
.button.is-ticket:hover {
    background-color: #eab308;
    border-color: #eab308;
    color: #000000;
}

button.button.is-ticket:disabled,
.button.is-ticket:disabled {
    color: #000000;
}

main .container .bannercontrol {
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--theme-surface);
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid var(--theme-border);
    border-top: 1px solid var(--theme-border);
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
}

.productGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.galleryBox, .productChooserBox {
    width: 128px;
    height: 128px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-surface);
}

.productChooserBox {
    width: 145px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    pointer-events: none;
}

.thumbnailBox {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--theme-border);
    border-radius: 0rem;
    background-color: var(--theme-surface);
}

.thumbnailBox img,
.galleryBox img,
.productChooserBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;

}

.galleryBox .selectedGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px; /*45px*/
    color: var(--theme-info);
}
.galleryBox .chooseGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px;
    color: var(--theme-info);
}
.galleryBox .destroyGalleryBox {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--theme-danger);
}

.addGalleryBox {
    border: 2px dashed var(--theme-border-dark);
    padding: 2.75rem;
    background-color: var(--theme-surface);
}

.column.importantwrapper {
    border: 1px solid var(--theme-border-dark);
    border-radius: 0px;
}

.offCanvasBackdrop {
    background-color: var(--theme-surface-overlay);
}

@media (max-width: 900px) {

    .container.is-fluid .banner {
        margin-left: 0px;
        margin-right: 0px;
    }

    .check input[type="checkbox"] {
        font-size: 30px;
    }

}

.check input[type="checkbox"]{
    border: 1px solid var(--theme-input-border);
}

label.label.d-block {
    font-size: 14px;
}

.calendar {
    width: auto !important;
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}

.legend {
    position: relative;
}

.legend .label {
    position: absolute;
    left: 10px;
    top: -13px;
    z-index: 10;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    background-color: var(--theme-surface);
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90%;
    color: var(--theme-text-primary);
}

.select.pickerToggler {
    border-color: var(--theme-input-border) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

@ref d-inlineFlex items-center gap-5px fg-primary fg-success fg-info fg-warning fg-danger cursor-pointer;
@ref d-flex justify-between mb-3 gap-0.75rem pointerEvents-none opacity-0.6 filter-grayscale(1) w-180px;
@ref primary-light success-light info-light warning-light danger-light padding-0.5rem_0.75rem color-inherit;
@ref gap-10px w-100pct w-100px ml-2 fg-hex999 fg-hexfff sd-none bd-1px_solid_hexe4e3e6 mb-0px px-1.5rem;
@ref bg-hexfff w-150px flexDirection-column align-center flexGrow-1 mt-2 my-3 bt-2px_dashed_hexe2e2e2;
@ref textAlign-center textAlign-right mnh-450px overflowX-auto d-none flexWrap-wrap zIndex-1 w-60px;
@ref w-300px w-280px bb-1px_solid_hexe2e2e2 p-10px p-0.75rem w-145px p-1.5rem gap-1.5rem mr-1 verticalAlign-middle;
@ref w-250px h-450px mnh-768px px-3rem;
@ref d-grid placeItems-center overflow-auto rd-0px justify-center fs-64px m-1.5rem pt-1.5rem mt-1.5rem;
@ref px-0.75rem pt-0.75rem mxh-450px overflowY-auto justifyContent-flexEnd w-220px fw-bold mb-2 h-100pct;
@use form {
    field: button, group;
}
@use offCanvas;
@use slideX;
@use list;

.mt-0px {
    margin-top: 0px !important;
}

.legend.mt-2 {
    margin-top: 1.5rem !important;
}

.textAlignCenter {
    text-align: center !important;
}
.textAlignRight {
    text-align: right !important;
}
.verticalAlignMiddle {
    vertical-align: middle !important;
}
.banner {
    border: 1px solid var(--theme-border);
    box-shadow: 0px 3px 8px var(--theme-shadow-lg);
    background-color: var(--theme-surface);
}

.notification {
    top: auto;
    right: auto;
    color: var(--theme-text-inverse);
}

.fgInheritImportant {
  color: inherit !important;
}

.mb-0px {
  margin-bottom: 0px !important;
}

.check {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}

.checkInput {
  border-width: 1px !important;
}

.columnProductInfo {
  background-color: var(--theme-bg-tertiary) !important;
}

@media (max-width: 1200px) {
  .detailRecordResponsive .tableResponsive,
  .lineTableResponsive .tableResponsive {
    overflow-x: visible;
    overflow-y: visible;
  }
}

main .container .banner {
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    border-radius: 3px;
}

main .container .banner.datatable-wrapper {
  padding: 1.5rem !important;
}

aside {
    overflow-y: visible;
}

.redButton {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
  color: var(--theme-text-inverse) !important;
}
.redIcon {
  color: var(--theme-danger) !important;
}
.detailRecordResponsive span > .menu-icon.tf-icons {
  zoom: 1.5;
}

.redRow {
  background-color: var(--theme-row-red) !important;
}
.orangeRow {
  background-color: var(--theme-row-orange) !important;
}
.tealRow {
  background-color: var(--theme-row-teal) !important;
}
.greenRow {
    background-color: var(--theme-row-green) !important;
}
.greyRow {
    background-color: var(--theme-row-grey) !important;
}

a {
  --bulma-link-text: var(--theme-text-link) !important;
  color: var(--theme-text-link);
}

a:hover {
  color: var(--theme-text-link-hover);
}

.switch {
  display: inline-flex;
  align-items: center;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.switch .switchInput {
  width: 1.5em;
  height: 1.5em;
  appearance: none;
  background-color: var(--theme-input-bg);
  border: 1px solid var(--theme-border)
}
.switch .switchInput:checked {
  border-color: var(--theme-switch-checked);
  background-color: var(--theme-switch-checked)
}
.switch .switchInput[disabled], .switch .switchInput.disabled {
  border-color: var(--theme-border);
  background-color: var(--theme-bg-disabled);
  pointer-events: none
}
.switch .switchInput:checked[disabled], .switch .switchInput:checked.disabled {
  background-color: var(--theme-text-muted)
}
.switch .switchInput[disabled] ~ .switchLabel, .switch .switchInput.disabled ~ .switchLabel {
  color: var(--theme-text-muted);
  cursor: default
}
.switch .switchLabel {
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  color: var(--theme-text-primary);
}
.switch .switchInput {
  width: 2.85em;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em !important;
  transform: scale(1) !important;
  transition: background-position .15s ease-in-out
}
.switch .switchInput:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.fg-warning {
  color: var(--theme-warning);
}

.overlay.active {
  margin-left: 250px !important;
}
.sidebar-collapsed .overlay.active {
  margin-left: 60px !important;
}

/* ============================================
   Card Theming
   ============================================ */
.card {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.card .cardBody,
.card .card-body {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

/* ============================================
   Table Theming
   ============================================ */
table,
.table {
  background-color: var(--theme-table-bg);
  color: var(--theme-text-primary);
}

table th,
.table th {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-table-border);
}

table td,
.table td {
  border-color: var(--theme-table-border);
  color: var(--theme-text-primary);
}

table tr:hover,
.table tr:hover {
  background-color: var(--theme-table-row-hover);
}

/* ============================================
   Dropdown Menu Theming
   ============================================ */
.dropdown-menu,
.dropDown,
.dropDownContent {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: 0 4px 6px var(--theme-shadow);
}

.dropdown-item {
  color: var(--theme-text-primary);
}

.dropdown-item:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

/* ============================================
   Footer Theming
   ============================================ */
.footer,
footer {
  background-color: var(--theme-surface);
  color: var(--theme-text-secondary);
  border-top: 1px solid var(--theme-border);
}

/* ============================================
   Text Color Utilities (Themed)
   ============================================ */
.text-primary,
.fg-primary {
  color: var(--theme-primary) !important;
}

.text-success,
.fg-success {
  color: var(--theme-success) !important;
}

.text-warning,
.fg-warning {
  color: var(--theme-warning) !important;
}

.text-danger,
.fg-danger {
  color: var(--theme-danger) !important;
}

.text-info,
.fg-info {
  color: var(--theme-info) !important;
}

.text-muted {
  color: var(--theme-text-muted) !important;
}

/* ============================================
   Background Color Utilities (Themed)
   ============================================ */
.bg-primary {
  background-color: var(--theme-primary) !important;
}

.bg-success {
  background-color: var(--theme-success) !important;
}

.bg-warning {
  background-color: var(--theme-warning) !important;
}

.bg-danger {
  background-color: var(--theme-danger) !important;
}

.bg-info {
  background-color: var(--theme-info) !important;
}

/* ============================================
   Hero Section Theming
   ============================================ */
.hero {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

.hero.is-info {
  background-color: var(--theme-info);
  color: var(--theme-text-inverse);
}

.hero.is-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* ============================================
   Section Theming
   ============================================ */
.section {
  background-color: var(--theme-bg-secondary);
}

/* ============================================
   Breadcrumb Theming
   ============================================ */
.breadcrumb {
  background-color: transparent;
}

.breadcrumb a {
  color: var(--theme-text-link);
}

.breadcrumb li.is-active a {
  color: var(--theme-text-primary);
}

/* ============================================
   Orientation Lock Overlay for Mobile/Tablet
   ============================================ */
.orientation-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--theme-bg-primary, #1a1a1a);
  color: var(--theme-text-primary, #ffffff);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

.orientation-overlay-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: rotate-phone 1.5s ease-in-out infinite;
}

.orientation-overlay-text {
  font-size: 1.25rem;
  font-weight: 500;
}

@keyframes rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

/* Show overlay on mobile phones in landscape (tablets can use landscape) */
/* Use max-height < 600px - in landscape, height is the shorter dimension (phone screen width) */
@media screen and (max-height: 599px) and (orientation: landscape) {
  .orientation-overlay {
    display: flex;
  }
}

/* ============================================
   Tablet Landscape Styles for Mobile Section
   ============================================ */
@media screen and (min-width: 768px) and (orientation: landscape) {
  /* All mobile page containers - centered with max width */
  .mobile-dashboard,
  .mobile-product,
  .mobile-inventory,
  .mobile-movement,
  .mobile-commission,
  .mobile-locator-articles,
  .mobile-generate-shipments,
  .mobile-return {
    max-width: 1000px;
    margin: 0 auto;
    padding: 16px 32px;
  }

  /* Headers - wider spacing */
  .mobile-header {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .mobile-header h1 {
    font-size: 28px;
  }

  /* Search containers - more horizontal space */
  .search-container {
    max-width: 700px;
    margin: 0 auto 24px auto;
  }

  /* Product and result cards - side by side layout */
  .product-info,
  .content-container,
  .results-container {
    max-width: 900px;
    margin: 0 auto;
  }

  /* Product card with image - horizontal layout */
  .product-card .product-header-row {
    gap: 20px;
  }

  .product-thumbnail {
    width: 100px;
    height: 100px;
  }

  /* Movement sections - grid layout for tablet */
  .movement-section {
    padding: 20px;
  }

  /* Locator buttons - more columns */
  .locator-buttons {
    gap: 12px;
  }

  .locator-chip {
    min-width: 120px;
  }

  /* Quantity controls - larger on tablet */
  .qty-control {
    max-width: 400px;
    margin: 0 auto;
  }

  .qty-btn {
    width: 64px;
    height: 64px;
  }

  .qty-input {
    font-size: 28px;
  }

  /* Actions - horizontal button layout */
  .actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 700px;
    margin: 16px auto 0 auto;
  }

  .action-button {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 300px;
  }

  /* Modals and overlays - wider on tablet */
  .modal-content,
  .selector-panel,
  .overlay-content {
    max-width: 550px;
  }

  /* Digital picklist - handled in generate-shipments.vue with 3-column layout */
  .digital-picklist-body {
    padding: 12px;
  }

  /* Shipment list - grid layout */
  .shipment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Articles list on locator page - better layout */
  .articles-list .article-card {
    padding: 20px;
  }

  .article-thumbnail {
    width: 70px;
    height: 70px;
  }

  .article-actions {
    gap: 12px;
  }

  .action-btn {
    width: 52px;
    height: 52px;
  }

  /* Commission page - grid for products */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .paket-type-grid {
    gap: 12px;
  }

  .paket-type-button {
    min-width: 100px;
    padding: 14px 20px;
  }

  /* Picked items - horizontal scroll or grid */
  .picked-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .picked-actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  /* Form cards - wider inputs */
  .form-card {
    max-width: 600px;
    margin: 0 auto;
  }

  .form-select {
    font-size: 18px;
  }

  /* Info cards */
  .info-card {
    padding: 20px;
  }

  /* Return page specific */
  .return-lines-section {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Scanner component adjustments */
  .scanner-container {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Stats banner */
  .stats-banner {
    max-width: 700px;
    margin: 0 auto 20px auto;
  }

  /* Empty states */
  .empty-state,
  .no-items,
  .all-done {
    padding: 60px 40px;
  }
}