/* =========================================================
   DP STOCK BOARD — FRONTEND STYLES
   ========================================================= */


/* =========================================================
   TOOLBAR LAYOUT
   ========================================================= */

.dp-stock-toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  margin:0 0 18px;
}


/* =========================================================
   STOCK TAKE SWITCHER
   ========================================================= */

.dp-stocktake-switcher{
  width:100%;
}

.dp-stocktake-select{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:16px;
  font-weight:500;
  outline:none;
}

.dp-stocktake-select option{
  color:#111;
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.dp-filter-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dp-filter-toggle,
.dp-filter-close{
  display:none;
}


/* =========================================================
   FILTERS
   ========================================================= */

.dp-stock-filters{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  width:100%;
}

.dp-stock-filters select{
  flex:0 1 220px;
  min-width:160px;
}

.dp-stock-filters input{
  flex:1 1 320px;
  min-width:200px;
}

.dp-stock-filters button{
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.75);
  color:#000;
  font-weight:700;
  cursor:pointer;
}

.dp-stock-filters select,
.dp-stock-filters input{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  outline:none;
}

.dp-stock-filters select option{
  color:#111;
}

.dp-stock-filters input::placeholder{
  color:rgba(255,255,255,.55);
}


/* =========================================================
   BULK BUTTONS
   ========================================================= */

.dp-stock-bulk{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
  gap:10px;
  width:100%;
}

.dp-bulk-row{
  display:contents;
}

.dp-stock-bulk button{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:var(--dp-btn-bg,rgba(255,255,255,.75)) !important;
  color:#000 !important;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:filter .12s ease;
}

.dp-stock-bulk button:hover{
  filter:brightness(.85);
}

.dp-stock-bulk button:active{
  filter:brightness(.7);
}

#dp-select-all-shown,
#dp-deselect-all,
#dp-reset-selected-qty{
  --dp-btn-bg:rgba(255,255,255,.75);
}

.dp-bulk[data-bulk="in"]{
  --dp-btn-bg:#86efac;
}

.dp-bulk[data-bulk="low"]{
  --dp-btn-bg:#fde68a;
}

.dp-bulk[data-bulk="out"]{
  --dp-btn-bg:#fda4af;
}


/* =========================================================
   LOOP ITEM CONTROL
   ========================================================= */

.dp-stock-control{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:0;
  background:transparent;
}

.dp-stock-control.dp-stock-control--stacked{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}

.dp-stock-control.dp-stock-control--stacked .dp-stock-status-wrap,
.dp-stock-control.dp-stock-control--stacked .dp-stock-qty-wrap{
  width:100%;
}

.dp-stock-control.dp-stock-control--stacked .dp-stock-status-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.dp-stock-control.dp-stock-control--stacked .dp-stock-qty-wrap{
  text-align:right;
}


/* =========================================================
   STATUS SELECT
   ========================================================= */

.dp-stock-control .dp-status{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding:10px 38px 10px 12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.92) !important;
  font-size:14px;
  line-height:1.2;
  outline:none;
}

.dp-stock-control .dp-status:focus{
  border-color:rgba(255,255,255,.25) !important;
}

.dp-stock-control .dp-status option{
  color:#111;
}

.dp-stock-control.dp-stock-control--stacked .dp-status{
  max-width:160px;
}


/* =========================================================
   QTY / UNIT
   ========================================================= */

.dp-add-qty,
.dp-unit-edit{
  opacity:.85;
  cursor:pointer;
}

.dp-add-qty{
  opacity:.6;
}

.dp-stock-control.dp-stock-control--stacked .dp-add-qty{
  display:inline-block;
  font-size:12px;
  opacity:.65;
}

.dp-unit-edit:hover,
.dp-add-qty:hover{
  opacity:1;
  text-decoration:none;
}

.dp-unit-input{
  max-width:90px;
  padding:4px 6px;
  border-radius:6px;
}

.dp-unit-locked{
  opacity:.85;
  cursor:default;
}

.dp-qty-display{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dp-stock-control.dp-stock-control--stacked .dp-qty-display{
  gap:2px;
}

.dp-qty-delete{
  opacity:.5;
  cursor:pointer;
}

.dp-qty-delete:hover{
  opacity:1;
}


/* =========================================================
   BADGES
   ========================================================= */

.dp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}

.dp-stock-control[data-mode="badge"] .dp-badge{
  width:100%;
  padding:10px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.dp-badge-in{
  border-color:#34d399;
  background:rgba(52,211,153,.18);
}

.dp-badge-low{
  border-color:#fbbf24;
  background:rgba(251,191,36,.20);
  box-shadow:0 0 0 3px rgba(251,191,36,.15);
}

.dp-badge-out{
  border-color:#fb7185;
  background:rgba(251,113,133,.20);
  box-shadow:0 0 0 3px rgba(251,113,133,.15);
}

.dp-stock-control[data-mode="badge"] .dp-badge-action{
  pointer-events:auto !important;
  cursor:pointer !important;
  user-select:none;
}

.dp-stock-control[data-mode="badge"] .dp-badge-action:active{
  transform:scale(.98);
}


/* =========================================================
   DROPDOWN MODE DOT
   ========================================================= */

.dp-stock-control[data-mode="dropdown"] .dp-badge{
  flex:0 0 20px;
  width:20px;
  height:20px;
  padding:0;
  border:0;
  border-radius:50%;
  background:currentColor;
  box-shadow:none;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
  pointer-events:none;
  cursor:default;
}

.dp-stock-control[data-mode="dropdown"] .dp-badge-in{
  color:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.25);
}

.dp-stock-control[data-mode="dropdown"] .dp-badge-low{
  color:#fbbf24;
  box-shadow:0 0 0 3px rgba(251,191,36,.25);
}

.dp-stock-control[data-mode="dropdown"] .dp-badge-out{
  color:#fb7185;
  box-shadow:0 0 0 3px rgba(251,113,133,.25);
}


/* =========================================================
   SELECTED CARD STATE
   ========================================================= */

.dp-ingredient-card{
  position:relative;
}

.dp-ingredient-card > *{
  position:relative;
  z-index:1;
}

.dp-ingredient-card.dp-selected,
.dp-selected .dp-ingredient-card{
  box-shadow:
    0 0 0 2px rgba(210,210,210,.22),
    0 0 18px rgba(210,210,210,.22);
}

.dp-ingredient-card.dp-selected::before,
.dp-selected .dp-ingredient-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}


/* =========================================================
   EMAIL BUTTON
   ========================================================= */

.dp-stock-email-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.dp-stock-email-btn{
  padding:10px 14px;
  border:0;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

.dp-stock-email-status{
  font-size:14px;
  opacity:.85;
}


/* =========================================================
   HIDDEN FILTERED ITEMS
   ========================================================= */

.dp-stock-hidden{
  display:none !important;
}


/* =========================================================
   SHOPPING LIST
   ========================================================= */

#dp-shopping-list{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
}

#dp-shopping-list *,
#dp-shopping-list *::before,
#dp-shopping-list *::after{
  box-sizing:border-box;
}


/* Header */

.dp-shopping-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:28px;
  margin-bottom:10px;
}

.dp-shopping-count{
  margin:0;
  font-size:15px;
  line-height:1.3;
  opacity:.8;
}

.dp-shopping-message{
  min-height:20px;
  margin:0;
  font-size:14px;
  text-align:right;
  opacity:.75;
}


/* Top stock-take and search fields */

.dp-shopping-controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch;
  gap:12px;
  width:100%;
  margin:0 0 22px;
}

.dp-shopping-controls select,
.dp-shopping-controls input{
  display:block;
  width:100% !important;
  min-width:0 !important;
  height:48px;
  margin:0 !important;
  padding:0 15px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,255,255,.94) !important;
  font:inherit;
  line-height:48px;
  outline:none;
}

.dp-shopping-controls select:focus,
.dp-shopping-controls input:focus{
  border-color:rgba(255,255,255,.38) !important;
}

.dp-shopping-controls select option{
  color:#111;
}

.dp-shopping-controls input::placeholder{
  color:rgba(255,255,255,.48);
}


/* Empty message */

.dp-shopping-empty{
  padding:24px 18px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  text-align:center;
  opacity:.75;
}

.dp-shopping-empty[hidden]{
  display:none !important;
}


/* Suppliers */

.dp-shopping-suppliers{
  display:flex;
  flex-direction:column;
  gap:22px;
  width:100%;
}

.dp-shopping-supplier{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}

.dp-shopping-supplier[hidden]{
  display:none !important;
}

.dp-shopping-supplier-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:82px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.dp-shopping-supplier-heading{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
}

.dp-shopping-supplier-name{
  margin:0 !important;
  padding:0 !important;
  font-size:25px;
  line-height:1.15;
}

.dp-shopping-supplier-count{
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.2;
  opacity:.65;
}

.dp-shopping-complete-supplier{
  flex:0 0 auto;
  min-height:42px;
  margin:0;
  padding:9px 14px;
  border:0;
  border-radius:10px;
  background:#428fe8;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.dp-shopping-complete-supplier:hover{
  filter:brightness(.92);
}

.dp-shopping-complete-supplier:disabled{
  opacity:.5;
  cursor:wait;
}


/* Items */

.dp-shopping-items{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100%;
  margin:0;
  padding:0;
}

.dp-shopping-item{
  display:block !important;
  position:relative;
  width:100% !important;
  min-height:76px;
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:transparent;
  transition:
    opacity .2s ease,
    transform .2s ease,
    background .15s ease;
}

.dp-shopping-item:last-child{
  border-bottom:0;
}

.dp-shopping-item:hover{
  background:rgba(255,255,255,.045);
}

.dp-shopping-item[hidden]{
  display:none !important;
}


/*
 * Padding is applied to the label rather than the outer item.
 * This removes the empty black strip that appeared above the text.
 */
.dp-shopping-item-label{
  display:flex !important;
  align-items:center !important;
  gap:14px;
  width:100% !important;
  min-height:76px;
  margin:0 !important;
  padding:14px 18px !important;
  cursor:pointer;
}


/* Real checkbox */

.dp-shopping-check{
  flex:0 0 24px;
  width:24px;
  height:24px;
  margin:0 !important;
  padding:0;
  accent-color:#86efac;
  cursor:pointer;
}


/* Text */

.dp-shopping-item-content{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  line-height:1.25;
}

.dp-shopping-item-title,
.dp-shopping-item-quantity,
.dp-shopping-item-status{
  display:inline-block;
  margin:0 !important;
  padding:0 !important;
  line-height:1.25;
}

.dp-shopping-item-title{
  font-size:17px;
  font-weight:700;
}

.dp-shopping-item-quantity{
  font-size:16px;
  opacity:.88;
	font-weight: 300;
}

.dp-shopping-item-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:4px 8px !important;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.03em;
}

.dp-shopping-item-status-low{
  background:#fde68a;
  color:#2f2400;
}

.dp-shopping-item-status-out{
  background:#fda4af;
  color:#3d0711;
}


/* Remove theme margins from anything inserted inside items */

.dp-shopping-item p,
.dp-shopping-item h1,
.dp-shopping-item h2,
.dp-shopping-item h3,
.dp-shopping-item h4,
.dp-shopping-item h5,
.dp-shopping-item h6,
.dp-shopping-item label,
.dp-shopping-item span{
  margin-top:0;
  margin-bottom:0;
}


/* Completion animation */

.dp-shopping-item.is-saving{
  opacity:.5;
  pointer-events:none;
}

.dp-shopping-item.is-complete{
  opacity:0;
  transform:translateX(18px);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:769px){

  .dp-filter-toggle,
  .dp-filter-close{
    display:none !important;
  }

  .dp-filter-panel{
    display:flex !important;
    flex-direction:column;
    gap:12px;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .dp-stock-toolbar{
    padding:0 32px;
    box-sizing:border-box;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:980px){

  .dp-stock-filters{
    flex-wrap:wrap;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

  .dp-stock-toolbar,
  .dp-stock-filters,
  .dp-stock-bulk,
  .dp-stocktake-switcher{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
  }

  .dp-filter-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px !important;
    max-width:42px !important;
    height:42px !important;
    padding:10px !important;
    border-radius:40px !important;
    background:rgba(255,255,255,.08) !important;
  }

  .dp-filter-toggle svg{
    display:block;
  }

  .dp-filter-panel{
    display:none;
    position:relative;
    padding:14px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(255,255,255,.04);
  }

  .dp-filter-panel.is-open{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .dp-filter-close{
    align-self:flex-end;
    width:30px;
    height:30px;
    padding:10px !important;
    border:0;
    border-radius:20px !important;
    background:rgba(255,255,255,.08) !important;
    color:#000;
    font-weight:700;
    line-height:10px;
    cursor:pointer;
  }


  /* Quantity */

  .dp-qty-display{
    display:inline-grid !important;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "qty delete"
      "unit delete";
    align-items:center;
    column-gap:6px;
    row-gap:0;
    font-size:10px !important;
    text-align:center;
  }

  .dp-qty-value{
    grid-area:qty;
    font-size:20px;
    font-weight:700;
    line-height:1;
  }

  .dp-qty-unit{
    grid-area:unit;
    font-size:13px;
    line-height:1.1;
    opacity:.8;
  }

  .dp-qty-delete{
    grid-area:delete;
    font-size:14px;
  }


  /* Stock controls */

  .dp-stock-control[data-mode="dropdown"] .dp-status{
    display:none !important;
  }

  .dp-stock-control.dp-stock-control--stacked{
    display:grid !important;
    grid-template-columns:34px 1fr;
    align-items:center;
    gap:0;
  }

  .dp-stock-control.dp-stock-control--stacked .dp-stock-status-wrap{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
  }

  .dp-stock-control.dp-stock-control--stacked .dp-stock-qty-wrap{
    width:auto !important;
    font-size:10px;
    text-align:right;
  }

  .dp-stock-control[data-mode="dropdown"] .dp-badge{
    flex:0 0 24px !important;
    width:24px !important;
    height:24px !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }


  /* Filters */

  .dp-stock-filters{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr .8fr;
    align-items:center;
    gap:8px;
    width:100%;
  }

  .dp-stock-filters select,
  .dp-stock-filters input{
    width:100%;
    min-width:0;
  }

  .dp-stock-filters select{
    padding:9px 10px;
    border-radius:10px;
    font-size:12px;
    line-height:1.1;
    appearance:auto;
  }

  .dp-stock-filters #dp-reset-filters{
    width:100%;
    min-width:0;
    padding:9px 10px;
    border:0 !important;
    border-radius:10px;
    background:rgba(255,255,255,.75) !important;
    box-shadow:none !important;
    color:#000 !important;
    font-size:12px;
    line-height:1.1;
  }

  .dp-stock-filters #dp-filter-search{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    margin-top:8px;
    padding:9px 10px;
    border-radius:10px;
    font-size:12px;
  }


  /* Bulk buttons */

  .dp-stock-bulk{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .dp-bulk-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .dp-stock-bulk button{
    width:100%;
    min-width:0;
    padding:9px 8px;
    border-radius:10px;
    font-size:12px;
    line-height:1.1;
    white-space:nowrap;
  }

  .dp-stock-bulk .dp-bulk{
    position:relative;
    overflow:hidden;
    text-indent:-9999px;
  }

  .dp-stock-bulk .dp-bulk::after{
    content:attr(data-bulk);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    font-weight:700;
    text-indent:0;
    text-transform:uppercase;
  }


  /* Shopping list */

  #dp-shopping-list{
    padding:0 10px;
  }

  /*
   * Keep the two top fields side by side on mobile,
   * as requested.
   */
  .dp-shopping-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px;
  }

  .dp-shopping-controls select,
  .dp-shopping-controls input{
    height:44px;
    padding:0 10px !important;
    font-size:12px;
    line-height:44px;
  }

  .dp-shopping-supplier-header{
    align-items:stretch;
    flex-direction:column;
    min-height:0;
    padding:14px;
  }

  .dp-shopping-supplier-name{
    font-size:22px;
  }

  .dp-shopping-complete-supplier{
    width:100%;
  }

  .dp-shopping-item{
    min-height:72px;
  }

  .dp-shopping-item-label{
    min-height:72px;
    padding:12px 14px !important;
  }

  .dp-shopping-check{
    flex-basis:26px;
    width:26px;
    height:26px;
  }

  .dp-shopping-item-title{
    font-size:16px;
  }

  .dp-shopping-item-quantity{
    font-size:15px;
  }
}