/* KITSCH Inventory Search App */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:#1a1a1a;
  --white:#ffffff;
  --cream:#faf6f1;
  --warm-bg:#f5f0eb;
  --peach:#f8b68f;
  --peach-light:#fde8d8;
  --peach-dark:#e8956a;
  --charcoal:#303030;
  --mid-gray:#707070;
  --light-gray:#b0b0b0;
  --border:#e5ddd5;
  --border-light:#efe9e2;
  --green:#2d8a6e;
  --green-light:#e0f0e8;
  --red:#c44040;
  --radius:16px;
  --radius-sm:10px;
  --transition:all .2s ease;
}

html{height:100%}
body{
  font-family:'Figtree',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* NAV BAR */
.inv-nav{
  background:var(--black);
  padding:0 40px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.inv-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.inv-logo img{height:36px;width:auto;mix-blend-mode:screen;filter:invert(1)}
.inv-logo-divider{width:1px;height:28px;background:rgba(255,255,255,.2)}
.inv-logo-title{
  font-family:'PT Serif',serif;
  font-size:14px;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.7);letter-spacing:.3px;
}
.inv-back{
  color:rgba(255,255,255,.5);
  font-size:13px;font-weight:500;
  text-decoration:none;
  transition:var(--transition);
  display:flex;align-items:center;gap:6px;
}
.inv-back:hover{color:var(--white)}

/* SEARCH SECTION */
.inv-search-section{
  padding:48px 40px 32px;
  text-align:center;
}
.inv-search-section h1{
  font-family:'PT Serif',serif;
  font-size:34px;font-weight:700;
  color:var(--black);
  margin-bottom:8px;
  letter-spacing:-.3px;
}
.inv-search-section p{
  font-size:15px;
  color:var(--mid-gray);
  margin-bottom:28px;
}
.inv-search-bar{
  display:flex;
  align-items:center;
  max-width:720px;
  margin:0 auto;
  gap:0;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.inv-search-bar:focus-within{
  border-color:var(--peach);
  box-shadow:0 0 0 3px rgba(248,182,143,.2);
}
.inv-search-select{
  border:none;
  background:var(--warm-bg);
  padding:14px 16px;
  font-family:'Figtree',sans-serif;
  font-size:14px;font-weight:500;
  color:var(--charcoal);
  cursor:pointer;
  border-right:1.5px solid var(--border);
  outline:none;
  min-width:150px;
}
.inv-search-input{
  flex:1;
  border:none;
  padding:14px 20px;
  font-family:'Figtree',sans-serif;
  font-size:15px;
  color:var(--charcoal);
  background:transparent;
  outline:none;
}
.inv-search-input::placeholder{color:var(--light-gray)}
.inv-search-btn{
  border:none;
  background:var(--black);
  color:var(--white);
  padding:14px 28px;
  font-family:'Figtree',sans-serif;
  font-size:14px;font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}
.inv-search-btn:hover{background:var(--charcoal)}

/* RESULTS AREA */
.inv-results{
  max-width:1200px;
  margin:0 auto 80px;
  padding:0 40px;
}

/* PRODUCT HEADER */
.inv-product-header{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 32px;
  margin-bottom:24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.inv-product-info h2{
  font-family:'PT Serif',serif;
  font-size:24px;font-weight:700;
  color:var(--black);
  margin-bottom:8px;
}
.inv-product-meta{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.inv-product-meta span{
  font-size:13px;
  color:var(--mid-gray);
}
.inv-product-meta strong{
  color:var(--charcoal);
  font-weight:600;
}
.inv-total-qty{
  text-align:right;
  flex-shrink:0;
}
.inv-total-qty .qty-number{
  font-family:'PT Serif',serif;
  font-size:32px;font-weight:700;
  color:var(--black);
  line-height:1;
}
.inv-total-qty .qty-label{
  font-size:12px;
  color:var(--mid-gray);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-top:4px;
}

/* ALLOCATION SUMMARY CARDS */
.inv-alloc-summary{
  display:flex;
  gap:16px;
  margin-bottom:24px;
}
.alloc-card{
  flex:1;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:20px 24px;
  text-align:center;
}
.alloc-number{
  font-family:'PT Serif',serif;
  font-size:24px;font-weight:700;
  color:var(--black);
  line-height:1;
  margin-bottom:6px;
}
.alloc-number.qty-positive{color:var(--green)}
.alloc-number.qty-negative{color:var(--red)}
.alloc-number.qty-zero{color:var(--light-gray)}
.alloc-label{
  font-size:11px;
  font-weight:600;
  color:var(--mid-gray);
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* RESULT SECTION CARDS */
.inv-section{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:24px;
  overflow:hidden;
}
.inv-section-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 28px;
  border-bottom:1px solid var(--border-light);
}
.inv-section-icon{
  font-size:20px;
}
.inv-section-header h3{
  font-family:'PT Serif',serif;
  font-size:18px;font-weight:700;
  color:var(--black);
}
.inv-section-count{
  margin-left:auto;
  font-size:12px;
  font-weight:600;
  color:var(--mid-gray);
  background:var(--warm-bg);
  padding:4px 12px;
  border-radius:20px;
}

/* DATA TABLES */
.inv-table{
  width:100%;
  border-collapse:collapse;
}
.inv-table thead th{
  text-align:left;
  padding:12px 20px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--mid-gray);
  background:var(--warm-bg);
  border-bottom:1px solid var(--border-light);
}
.inv-table tbody tr{
  transition:var(--transition);
}
.inv-table tbody tr:hover{
  background:rgba(248,182,143,.06);
}
.inv-table tbody tr:nth-child(even){
  background:rgba(250,246,241,.5);
}
.inv-table tbody tr:nth-child(even):hover{
  background:rgba(248,182,143,.06);
}
.inv-table tbody td{
  padding:12px 20px;
  font-size:14px;
  color:var(--charcoal);
  border-bottom:1px solid var(--border-light);
}
.inv-table tbody tr:last-child td{
  border-bottom:none;
}

/* NUMERIC COLUMNS */
.inv-table .num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.inv-table thead .num{text-align:right}

/* TOTALS ROW */
.inv-table tfoot td{
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  color:var(--black);
  background:var(--warm-bg);
  border-top:2px solid var(--border);
}

/* POSITIVE/NEGATIVE INDICATORS */
.qty-positive{color:var(--green)}
.qty-negative{color:var(--red)}
.qty-zero{color:var(--light-gray)}

/* EMPTY STATE */
.inv-empty{
  text-align:center;
  padding:60px 40px;
}
.inv-empty-icon{
  font-size:48px;
  margin-bottom:16px;
  opacity:.4;
}
.inv-empty h3{
  font-family:'PT Serif',serif;
  font-size:20px;font-weight:700;
  color:var(--charcoal);
  margin-bottom:8px;
}
.inv-empty p{
  font-size:14px;
  color:var(--mid-gray);
  max-width:400px;
  margin:0 auto;
  line-height:1.5;
}

/* LOADING SPINNER */
.inv-loading{
  display:none;
  text-align:center;
  padding:60px 40px;
}
.inv-loading.active{display:block}
.inv-spinner{
  width:40px;height:40px;
  border:3px solid var(--border);
  border-top-color:var(--peach);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:0 auto 16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.inv-loading p{
  font-size:14px;
  color:var(--mid-gray);
}

/* ERROR STATE */
.inv-error{
  display:none;
  text-align:center;
  padding:40px;
  background:var(--white);
  border:1px solid var(--red);
  border-radius:var(--radius);
  margin-bottom:24px;
}
.inv-error.active{display:block}
.inv-error p{
  font-size:14px;
  color:var(--red);
}

/* MULTIPLE RESULTS LIST */
.inv-multi-results{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:24px;
  overflow:hidden;
}
.inv-multi-header{
  padding:20px 28px;
  border-bottom:1px solid var(--border-light);
}
.inv-multi-header h3{
  font-family:'PT Serif',serif;
  font-size:18px;font-weight:700;
  color:var(--black);
}
.inv-multi-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  border-bottom:1px solid var(--border-light);
  cursor:pointer;
  transition:var(--transition);
}
.inv-multi-item:last-child{border-bottom:none}
.inv-multi-item:hover{background:rgba(248,182,143,.06)}
.inv-multi-item-name{
  font-size:14px;font-weight:500;
  color:var(--charcoal);
}
.inv-multi-item-sku{
  font-size:13px;
  color:var(--mid-gray);
  margin-left:12px;
}
.inv-multi-item-qty{
  font-size:14px;font-weight:600;
  color:var(--charcoal);
  font-variant-numeric:tabular-nums;
}
.inv-multi-item-arrow{
  color:var(--light-gray);
  margin-left:12px;
  font-size:16px;
}

/* SIMILAR SKUS - CLICKABLE ROWS */
.inv-table tbody tr.clickable{cursor:pointer}
.inv-table tbody tr.clickable:hover{
  background:rgba(248,182,143,.1);
}

/* FOOTER */
.inv-footer{
  margin-top:auto;
  padding:24px 40px;
  text-align:center;
  font-size:12px;
  color:var(--light-gray);
  border-top:1px solid var(--border-light);
}

/* RESPONSIVE */
@media(max-width:768px){
  .inv-nav{padding:0 20px}
  .inv-search-section{padding:32px 20px 24px}
  .inv-search-section h1{font-size:26px}
  .inv-search-bar{flex-direction:column;border-radius:var(--radius-sm)}
  .inv-search-select{
    border-right:none;
    border-bottom:1.5px solid var(--border);
    width:100%;
    min-width:unset;
  }
  .inv-search-input{width:100%}
  .inv-search-btn{width:100%;border-radius:0}
  .inv-results{padding:0 16px}
  .inv-product-header{flex-direction:column;padding:20px}
  .inv-total-qty{text-align:left}
  .inv-alloc-summary{flex-wrap:wrap;gap:10px}
  .alloc-card{min-width:calc(50% - 10px);padding:14px 16px}
  .alloc-number{font-size:20px}
  .inv-section-header{padding:16px 20px}
  .inv-table thead th,
  .inv-table tbody td{padding:10px 12px;font-size:13px}
  .inv-table thead th{font-size:10px}
}

@media(max-width:480px){
  .inv-table{font-size:12px}
  .inv-table thead th,
  .inv-table tbody td{padding:8px 10px}
}