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

body{
  font-family:'Segoe UI',Tahoma,sans-serif;
  background:var(--brand-cream);
  direction:rtl;
  color:var(--brand-dark);
}

button,
input,
select{
  font-family:inherit;
}

img{
  max-width:100%;
}

/* HEADER */

header{
  padding:10px 20px;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1800px;
  margin:0 auto;
  gap:12px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  order:1;
  min-width:60px;
}

.header-center{
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  order:2;
}

.header-left{
  flex-shrink:0;
  order:3;
  min-width:60px;
}

.logo{
  width:1.93in;
  height:1.34in;
  display:block;
  margin:0 auto;
}

header h1{
  color:var(--brand-brown);
  font-size:clamp(14px,3vw,22px);
  line-height:1.4;
}

#search{
  width:80%;
  max-width:700px;
  padding:14px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
}

/* CATEGORIES */

.categories{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:20px;
}

.cat-btn{
  padding:10px 20px;
  border:none;
  background:var(--brand-brown);
  color:white;
  cursor:pointer;
  border-radius:8px;
  font-weight:bold;
  transition:.3s;
}

.cat-btn:hover{
  background:var(--brand-gold);
}

/* PRODUCTS */

.products-section{
  padding:20px;
}

#products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

.product{
  background:white;
  border-radius:16px;
  padding:15px;
  text-align:center;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  transition:.3s;
}

.product:hover{
  transform:translateY(-5px);
}

.product img{
  width:100%;
  height:220px;
  object-fit:contain;
}

.product h3{
  margin:10px 0;
}

.product p{
  color:#666;
  margin-bottom:8px;
}

.price{
  font-size:30px;
  font-weight:800;
  color:var(--brand-brown);
  margin:15px 0;
}

.cart-btn{
  width:100%;
  min-height:64px;
  padding:12px 18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand-brown) 0%,var(--brand-gold) 100%);
  color:white;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 10px 22px rgba(84,67,60,.22);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  overflow:hidden;
}

.cart-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(84,67,60,.28);
}

.cart-btn:active{
  transform:translateY(0) scale(.98);
}

.cart-btn-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  line-height:1;
  flex:0 0 auto;
  transition:background .25s ease,transform .25s ease;
}

.cart-btn-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.25;
}

.cart-btn-label span:first-child{
  font-size:17px;
}

.cart-btn-label span:last-child{
  font-size:15px;
}

.cart-btn.is-added{
  background:linear-gradient(135deg,var(--brand-brown) 0%,#25d366 100%);
  box-shadow:0 12px 28px rgba(37,211,102,.28);
}

.cart-btn.is-added .cart-btn-icon{
  background:white;
  color:var(--brand-brown);
  transform:scale(1.08);
}

.cart-btn:hover{
  background:var(--brand-gold);
}

/* FLOATING CART */

.cart-icon{
  position:fixed;
  top:15px;
  left:15px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:var(--brand-brown);
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:24px;
  cursor:pointer;
  z-index:99999;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.cart-icon span{
  position:absolute;
  top:-3px;
  right:-3px;
  background:red;
  color:white;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:11px;
  font-weight:bold;
}

/* SIDEBAR */

.cart-sidebar{
  position:fixed;
  top:0;
  left:-650px;
  width:650px;
  height:100%;
  background:white;
  overflow-y:auto;
  box-shadow:0 0 25px rgba(0,0,0,.25);
  transition:.4s;
  z-index:9998;
}

.cart-sidebar.active{
  left:0;
}

.cart-header{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding:20px;
  background:var(--brand-brown);
  color:white;
}

.cart-header button{
  position:absolute;
  right:15px;
  top:15px;
  background:none;
  border:none;
  color:white;
  font-size:28px;
  cursor:pointer;
}

/* CART PAGE */

.cart-page{
  max-width:1800px;
  margin:auto;
  padding:20px;
  display:grid;
  grid-template-columns:1fr 380px;
  gap:25px;
  align-items:start;
}

#cartItems{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(450px,1fr));
  gap:20px;
  align-items:start;
}

.cart-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  padding:15px;
  border-radius:15px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  min-height:140px;
  width:100%;
}

.cart-item img{
  width:120px;
  height:120px;
  object-fit:contain;
  border:1px solid #ddd;
  border-radius:12px;
  padding:5px;
  background:white;
}

.cart-item .info{
  flex:1;
}

.cart-item h3,
.cart-item h4{
  margin-bottom:8px;
  font-size:20px;
}

.cart-item p{
  margin:5px 0;
  color:#666;
}

.qty-controls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.qty-controls button,
.delete-cart-item{
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  font-weight:bold;
}

.qty-controls button{
  background:#f2f2f2;
  color:#222;
}

.delete-cart-item{
  background:#dc3545;
  color:white;
}

.qty-input{
  width:70px;
  height:38px;
  text-align:center;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:16px;
  font-weight:bold;
}

.cart-summary{
  background:white;
  padding:25px;
  border-radius:18px;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  position:sticky;
  top:20px;
}

.cart-summary h2{
  text-align:center;
  margin-bottom:20px;
  color:var(--brand-brown);
}

.cart-summary span{
  font-size:42px;
  font-weight:800;
  display:block;
  margin-top:10px;
}

.cart-summary input,
#customerName{
  width:100%;
  padding:14px;
  margin:15px 0;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:16px;
  outline:none;
  background:#fafafa;
}

#customerName:focus{
  border-color:var(--brand-brown);
  background:white;
  box-shadow:0 0 10px rgba(84,67,60,.15);
}

#createInvoice,
#whatsappBtn,
#clearCartBtn,
#clearCart,
.clear-cart-btn{
  width:100%;
  padding:15px;
  border:none;
  border-radius:12px;
  color:white;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

#createInvoice{
  background:var(--brand-brown);
  box-shadow:0 4px 12px rgba(84,67,60,.25);
}

#createInvoice:hover{
  background:var(--brand-gold);
  transform:translateY(-2px);
}

#whatsappBtn{
  margin-top:12px;
  background:#64bd85;
}

#whatsappBtn:hover{
  background:#64bd85;
}

#clearCartBtn,
#clearCart,
.clear-cart-btn{
  margin-top:12px;
  background:#dc3545;
  box-shadow:0 4px 12px rgba(220,53,69,.2);
}

#clearCartBtn:hover,
#clearCart:hover,
.clear-cart-btn:hover{
  background:#bb2d3b;
  transform:translateY(-2px);
}

.back-btn{
  display:block;
  text-align:center;
  margin-top:15px;
  padding:14px;
  background:#f2f2f2;
  border-radius:12px;
  text-decoration:none;
  color:#333;
  font-weight:bold;
}

/* DELETE ALL CONFIRM MODAL */

.confirm-overlay,
.clear-cart-overlay,
#clearCartConfirmModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.55);
  z-index:100000;
  direction:rtl;
}

.confirm-overlay.active,
.clear-cart-overlay.active,
#clearCartConfirmModal.active,
#clearCartConfirmModal.show{
  display:flex;
}

.confirm-dialog,
.clear-cart-dialog,
.confirm-modal-box{
  width:min(430px,100%);
  background:#fff;
  border-radius:18px;
  padding:24px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.confirm-dialog h3,
.clear-cart-dialog h3,
.confirm-modal-box h3{
  color:#dc3545;
  margin-bottom:10px;
  font-size:24px;
}

.confirm-dialog p,
.clear-cart-dialog p,
.confirm-modal-box p{
  color:#555;
  line-height:1.7;
  margin-bottom:16px;
  font-size:15px;
}

.confirm-dialog input,
.clear-cart-dialog input,
#confirmClearInput{
  width:100%;
  padding:13px 14px;
  border:1px solid #ddd;
  border-radius:12px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  outline:none;
  direction:ltr;
  background:#fafafa;
}

.confirm-dialog input:focus,
.clear-cart-dialog input:focus,
#confirmClearInput:focus{
  border-color:#dc3545;
  background:#fff;
  box-shadow:0 0 0 4px rgba(220,53,69,.1);
}

.confirm-actions,
.clear-cart-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.confirm-actions button,
.clear-cart-actions button{
  border:none;
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  font-size:15px;
  font-weight:800;
}

.confirm-cancel,
.cancel-clear-cart{
  background:#f2f2f2;
  color:#333;
}

.confirm-delete,
.confirm-clear-cart{
  background:#dc3545;
  color:#fff;
}

.confirm-delete:disabled,
.confirm-clear-cart:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* SKU */

.sku{
  font-size:12px;
  color:#777;
  margin-top:4px;
  margin-bottom:10px;
  font-weight:600;
  letter-spacing:.5px;
}

.branch-select{
  width:100%;
  padding:10px 12px;
  border:2px solid var(--brand-brown);
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:#333;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354433C' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat left 12px center;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  margin-bottom:8px;
  box-sizing:border-box;
}
.branch-select:focus{
  outline:none;
  border-color:var(--brand-gold);
  box-shadow:0 0 0 3px rgba(84,67,60,.15);
}
.branch-select option{
  padding:8px;
  font-weight:400;
}

/* INVOICE TEMPLATE */

#invoiceTemplate{
  position:fixed;
  left:-99999px;
  top:0;
  width:1120px;
  background:#fff;
  padding:14px;
  direction:rtl;
}

.invoice-box{
  width:100%;
  background:#fff;
  color:#111;
  font-family:Arial,'Segoe UI',Tahoma,sans-serif;
  direction:rtl;
}

.invoice-brand{
  text-align:center;
  margin-bottom:8px;
}

.invoice-logo{
  display:block;
  width:80px;
  height:auto;
  margin:0 auto 4px;
}

.invoice-title-main{
  font-size:18px;
  font-weight:800;
  color:#111;
  text-align:center;
  font-family:Arial,'Segoe UI',Tahoma,sans-serif;
}

.invoice-branches{
  display:flex;
  justify-content:space-between;
  margin:6px 0 4px;
  font-size:11px;
}

.inv-branch-label{
  font-weight:700;
  color:#444;
}

.inv-branch-line{
  display:inline-block;
  min-width:120px;
  border-bottom:1px solid #999;
  color:#000000;
  font-weight:400;
}

.invoice-info-row{
  display:flex;
  justify-content:space-between;
  padding:4px 8px;
  margin-bottom:8px;
  font-size:11px;
  color:#555;
  font-weight:600;
  border-bottom:1px solid #ddd;
}

.invoice-info-row strong{
  color:#111;
  font-weight:800;
}

.invoice-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  direction:rtl;
  page-break-inside:auto;
}

.invoice-table th{
  background:#e9e9e9;
  color:#111;
  border:1px solid #222;
  padding:5px 4px;
  font-size:12px;
  font-weight:800;
  text-align:center;
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-table td{
  border:1px solid #222;
  padding:4px 5px;
  height:36px;
  vertical-align:middle;
  background:#fff;
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-table thead{
  display:table-header-group;
}

.invoice-table tbody{
  display:table-row-group;
}

.invoice-table tr{
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-check-col{
  width:32px;
}

.invoice-qty-col,
.invoice-qty-cell{
  display:none;
}

.invoice-check-cell{
  text-align:center;
}

.invoice-check-box{
  display:inline-block;
  width:14px;
  height:14px;
  border:1.5px solid #111;
  background:white;
}

.invoice-product-cell{
  text-align:right;
  overflow:hidden;
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-product-main{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:5px;
  line-height:1.2;
  page-break-inside:avoid;
  break-inside:avoid;
}



.invoice-product-number,
.invoice-product-qty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  height:24px;
  border:1.5px solid #555;
  border-radius:2px;
  background:#fff;
  font-size:11px;
  font-weight:900;
  color:#111;
}

.invoice-product-main strong{
  font-size:12px;
  font-weight:800;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.invoice-product-details{
  margin-top:3px;
  padding-right:35px;
  font-size:11px;
  color:#000000;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-empty-cell{
  background:#fafafa;
}

.invoice-page,
.invoice-page-section{
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-page-break{
  display:block;
  height:0;
  page-break-before:always;
  break-before:page;
}

.invoice-summary-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:8px;
  border:1px solid #222;
  page-break-inside:avoid;
  break-inside:avoid;
}

.invoice-summary-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
}

.invoice-summary-item:first-child{
  border-left:1px solid #222;
}

.invoice-summary-item strong{
  font-size:15px;
}

.invoice-delivery-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:18px;
  padding-top:10px;
  border-top:1px solid #222;
  page-break-inside:avoid;
  break-inside:avoid;
  direction:ltr;
  text-align:left;
}

.inv-delivery-col{
  font-size:11px;
  color:#333;
}

.inv-delivery-title{
  font-weight:800;
  font-size:12px;
  color:#111;
  margin-bottom:8px;
  text-decoration:underline;
}

.inv-delivery-row{
  margin-bottom:6px;
  font-weight:600;
}

.delivery-underline{
  display:inline;
  font-weight:400;
  color:#555;
}

/* ADMIN PANEL */

.admin-box{
  max-width:1400px;
  margin:auto;
  padding:20px;
}

.admin-box h1,
.admin-box h2{
  text-align:center;
  margin-bottom:20px;
  color:var(--brand-brown);
}

.admin-box input,
.admin-box select{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:15px;
}

.admin-box button{
  padding:12px 18px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  font-weight:bold;
}

#save{
  width:100%;
  background:var(--brand-brown);
  color:white;
  margin-top:10px;
}

#searchAdmin{
  margin-top:15px;
}

.sort-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.sort-buttons button{
  background:#f2f2f2;
}

#productsTable{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.admin-product{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  background:white;
  border-radius:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.admin-product img{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #ddd;
  padding:5px;
  background:white;
}

.admin-info{
  flex:1;
}

.admin-info h3{
  margin-bottom:8px;
}

.admin-info p{
  margin:4px 0;
  color:#555;
}

.admin-actions{
  display:flex;
  gap:10px;
}

.edit-btn{
  background:#04e0dc;
}

.delete-btn{
  background:#dc3545;
  color:white;
}

.upload-btn{
  display:block;
  width:100%;
  padding:14px;
  background:var(--brand-brown);
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
  text-align:center;
  margin:10px 0;
}

.upload-btn:hover{
  opacity:.9;
}

/* STATS */

.stats-box{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
  margin:20px 0;
}

.stat-card{
  background:white;
  padding:20px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.stat-card h3{
  font-size:16px;
  margin-bottom:10px;
  color:#555;
}

.stat-card span{
  font-size:32px;
  font-weight:800;
  color:var(--brand-brown);
}

/* PRINT */

@page{
  size:A4 portrait;
  margin:8mm;
}

@media print{
  body{
    background:white;
  }

  #invoiceTemplate{
    position:static;
    width:100%;
    padding:0;
  }

  .invoice-table tr,
  .invoice-table td,
  .invoice-product-cell,
  .invoice-summary-row,
  .invoice-delivery-info{
    page-break-inside:avoid;
    break-inside:avoid;
  }
}

/* MOBILE */

@media(max-width:768px){
  .cart-sidebar{
    width:90%;
    left:-100%;
    z-index:99998;
  }

  .cart-sidebar.active{
    left:0;
  }

  .cart-page{
    grid-template-columns:1fr;
  }

  #cartItems{
    grid-template-columns:1fr;
    gap:15px;
  }

  .cart-item{
    gap:12px;
    min-height:130px;
  }

  .cart-item img{
    width:95px;
    height:95px;
  }

  .cart-summary{
    position:static;
  }

  .confirm-actions,
  .clear-cart-actions{
    grid-template-columns:1fr;
  }

  .admin-product{
    flex-direction:column;
    text-align:center;
  }

  .admin-actions{
    justify-content:center;
  }
}
/* ADMIN LOGIN */

.admin-login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top,var(--brand-cream) 0%,rgba(242,239,234,0) 34%),
    linear-gradient(135deg,#f7f7f7 0%,#ffffff 100%);
}

.admin-login-card{
  width:min(440px,100%);
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:22px;
  padding:30px;
  text-align:center;
  box-shadow:0 18px 55px rgba(0,0,0,.12);
}

.admin-login-card img{
  width:110px;
  height:auto;
  margin-bottom:14px;
}

.admin-login-card h1{
  color:var(--brand-brown);
  font-size:30px;
  line-height:1.35;
  margin-bottom:8px;
}

.admin-login-card p{
  color:#666;
  font-size:15px;
  line-height:1.7;
  margin-bottom:18px;
}

.admin-login-card input{
  width:100%;
  padding:15px;
  border:1px solid #ddd;
  border-radius:14px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  direction:ltr;
  outline:none;
  background:#fafafa;
}

.admin-login-card input:focus{
  border-color:var(--brand-brown);
  background:#fff;
  box-shadow:0 0 0 4px rgba(84,67,60,.12);
}

.admin-login-card button{
  width:100%;
  margin-top:14px;
  padding:15px;
  border:none;
  border-radius:14px;
  background:var(--brand-brown);
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 10px 22px rgba(84,67,60,.22);
}

.admin-login-card button:hover{
  background:var(--brand-gold);
  transform:translateY(-2px);
}

.admin-login-error{
  min-height:24px;
  margin-top:12px;
  color:#dc3545;
  font-weight:800;
  font-size:14px;
}

body.admin-locked{
  overflow:hidden;
}

[hidden]{
  display:none !important;
}
/* STORE REDESIGN + PRODUCT MODAL */

.store-header{
  padding:26px 20px 12px;
  background:
    linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
}

.store-header hr{
  width:min(760px,86%);
  margin:12px auto 18px;
  border:none;
  border-top:1px solid rgba(84,67,60,.16);
}

#search{
  background:#fff;
  border:1px solid rgba(84,67,60,.18);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  text-align:center;
  font-weight:700;
}

.categories{
  padding:18px 20px 10px;
}

.cat-btn{
  min-width:145px;
  padding:12px 18px;
  border:1px solid rgba(84,67,60,.18);
  background:#fff;
  color:var(--brand-brown);
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.cat-btn:hover{
  background:var(--brand-brown);
  color:#fff;
  transform:translateY(-2px);
}

.products-section{
  padding:20px clamp(14px,3vw,34px) 34px;
}

#products{
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:24px;
}

.product{
  position:relative;
  min-height:420px;
  padding:14px;
  border:1.5px solid rgba(205,184,154,.55);
  border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,var(--brand-cream) 100%);
  box-shadow:0 16px 36px rgba(30,45,35,.08);
  overflow:hidden;
}

.product:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(30,45,35,.13);
}

.product-image-wrap{
  position:relative;
  height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
}

.product img{
  width:100%;
  height:220px;
  object-fit:contain;
}

.product-view-btn{
  position:absolute;
  left:10px;
  bottom:10px;
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:var(--brand-gold);
  color:var(--brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(205,184,154,.28);
  transition:.25s ease;
}

.product-view-btn:hover{
  transform:scale(1.06);
  background:var(--brand-gold);
}

.product-view-btn svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.product-content{
  min-height:118px;
  padding:14px 6px 8px;
}

.product h3{
  font-size:21px;
  line-height:1.35;
  color:var(--brand-dark);
}

.product p{
  font-size:17px;
  line-height:1.45;
  color:var(--brand-gray);
}

.product .sku{
  color:var(--brand-gray);
  font-size:13px;
  font-weight:800;
}

.product .cart-btn{
  min-height:56px;
  border:1.5px solid var(--brand-gold);
  border-radius:999px;
  background:#fff;
  color:var(--brand-gold);
  box-shadow:none;
}

.product .cart-btn:hover{
  background:var(--brand-cream);
  color:var(--brand-gold);
  box-shadow:0 12px 24px rgba(205,184,154,.18);
}

.product .cart-btn.is-added{
  background:var(--brand-brown);
  color:#fff;
  border-color:var(--brand-brown);
}

.product-modal-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}

.product-modal-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.product-modal-overlay[hidden]{
  display:none !important;
}

.product-modal{
  position:relative;
  width:min(1080px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(330px,1.15fr) minmax(300px,.85fr);
  gap:30px;
  padding:34px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}

.product-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:#f56565;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

.product-modal-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
}

.product-modal-media img{
  width:100%;
  max-height:410px;
  object-fit:contain;
}

.product-modal-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

.product-modal-category{
  width:max-content;
  max-width:100%;
  padding:8px 14px;
  border-radius:999px;
  background:var(--brand-cream);
  color:var(--brand-gold);
  font-weight:900;
}

.product-modal-info h2{
  font-size:30px;
  line-height:1.35;
  color:var(--brand-dark);
}

.product-modal-description{
  font-size:20px;
  line-height:1.6;
  color:var(--brand-gray);
}

.product-modal-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.product-modal-meta div{
  padding:14px;
  border:1px solid #e6e8eb;
  border-radius:16px;
  background:#fafafa;
}

.product-modal-meta span{
  display:block;
  margin-bottom:5px;
  color:var(--brand-gray);
  font-size:13px;
  font-weight:800;
}

.product-modal-meta strong{
  color:var(--brand-dark);
  font-size:16px;
}

.product-modal-cart-btn{
  min-height:58px;
  border:1.5px solid var(--brand-gold);
  border-radius:999px;
  background:#fff;
  color:var(--brand-gold);
  cursor:pointer;
  font-size:17px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transition:.25s ease;
}

.product-modal-cart-btn:hover{
  background:var(--brand-cream);
  transform:translateY(-2px);
}

.product-modal-cart-btn.is-added{
  background:var(--brand-brown);
  border-color:var(--brand-brown);
  color:#fff;
}

body.modal-open{
  overflow:hidden;
}

@media(max-width:768px){
  #products{
    grid-template-columns:1fr;
    gap:18px;
  }

  .product{
    min-height:auto;
    border-radius:20px;
  }

  .product-image-wrap{
    height:220px;
  }

  .product-view-btn{
    width:46px;
    height:46px;
  }

  .product-modal-overlay{
    padding:10px;
    align-items:flex-end;
  }

  .product-modal{
    grid-template-columns:1fr;
    gap:16px;
    width:100%;
    max-height:calc(100vh - 20px);
    padding:20px;
    border-radius:22px 22px 0 0;
  }

  .product-modal-close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
  }

  .product-modal-media{
    min-height:260px;
    padding-top:34px;
  }

  .product-modal-media img{
    max-height:250px;
  }

  .product-modal-info h2{
    font-size:24px;
  }

  .product-modal-description{
    font-size:17px;
  }

  .product-modal-meta{
    grid-template-columns:1fr;
  }
}
.modal-qty-box{
  padding:14px;
  border:1px solid #e6e8eb;
  border-radius:16px;
  background:#fafafa;
}

.modal-qty-controls{
  height:48px;
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  overflow:hidden;
  border:1px solid #dde2e8;
  border-radius:12px;
  background:#fff;
  direction:ltr;
}

.modal-qty-controls button{
  height:100%;
  border:none;
  background:#f7f8fa;
  color:var(--brand-gray);
  font-size:30px;
  cursor:pointer;
  transition:.2s;
}

.modal-qty-controls button:hover{
  background:var(--brand-cream);
  color:var(--brand-brown);
}

.modal-qty-controls strong{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-dark);
  font-size:20px;
}

.product-modal-cart-btn{
  min-height:62px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,var(--brand-brown) 0%,var(--brand-gold) 100%);
  color:#fff;
  box-shadow:0 14px 30px rgba(84,67,60,.28);
}

.product-modal-cart-btn:hover{
  background:linear-gradient(135deg,var(--brand-gold) 0%,var(--brand-gold) 100%);
  transform:translateY(-2px);
}

.product-modal-cart-btn .cart-btn-icon{
  background:rgba(255,255,255,.2);
  color:#fff;
}

.product-modal-cart-btn.is-added{
  background:linear-gradient(135deg,var(--brand-brown) 0%,#25d366 100%);
  color:#fff;
}
/* BRAND COLOR SYSTEM */

:root{
  --brand-dark:#141414;
  --brand-cream:#F2EFEA;
  --brand-gray:#626262;
  --brand-gold:#CDB89A;
  --brand-brown:#54433C;
  --brand-light-gray:#D9D5CF;
}

/* STORE MAIN */

body{
  background:linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
  color:var(--brand-dark);
}

.store-header{
  background:
    radial-gradient(circle at top,var(--brand-cream) 0%,rgba(242,239,234,0) 42%),
    linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
  text-align:center;
}

.store-header hr{
  border-top:1px solid rgba(84,67,60,.18);
}

header h1{
  color:var(--brand-dark);
}

#search{
  border:1px solid var(--brand-border);
  color:var(--brand-gray-dark);
  background:#fff;
  box-shadow:0 10px 26px rgba(84,67,60,.08);
}

#search:focus{
  border-color:var(--brand-light);
  box-shadow:0 0 0 4px rgba(205,184,154,.16);
}

/* CART FLOAT ICON */

.cart-icon{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-gold));
  box-shadow:0 12px 28px rgba(84,67,60,.28);
}

.cart-icon span{
  background:var(--brand-gold);
  color:var(--brand-dark);
}

/* CATEGORIES */

.cat-btn{
  border:1px solid rgba(84,67,60,.18);
  background:#fff;
  color:var(--brand-dark);
  box-shadow:0 8px 22px rgba(84,67,60,.08);
}

.cat-btn:hover{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-gold));
  color:#fff;
}

/* PRODUCT CARDS */

.product{
  border:1.5px solid rgba(205,184,154,.55);
  background:
    linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
  box-shadow:0 16px 36px rgba(84,67,60,.10);
}

.product:hover{
  box-shadow:0 22px 46px rgba(84,67,60,.16);
}

.product-image-wrap{
  background:linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
}

.product h3{
  color:var(--brand-dark);
}

.product p{
  color:var(--brand-gray-dark);
}

.product .sku{
  color:var(--brand-gray);
}

/* VIEW BUTTON */

.product-view-btn{
  background:var(--brand-gold);
  color:var(--brand-dark);
  box-shadow:0 12px 24px rgba(205,184,154,0.5);
}

.product-view-btn:hover{
  background:var(--brand-gold);
}

/* ADD TO CART BUTTON */

.product .cart-btn,
.product-modal-cart-btn{
  border:none;
  background:linear-gradient(135deg,var(--brand-gold) 0%,var(--brand-gold) 100%);
  color:var(--brand-dark);
  box-shadow:0 12px 28px rgba(205,184,154,.32);
}

.product .cart-btn:hover,
.product-modal-cart-btn:hover{
  background:linear-gradient(135deg,var(--brand-brown) 0%,var(--brand-gold) 100%);
  color:var(--brand-dark);
  box-shadow:0 16px 34px rgba(205,184,154,.38);
}

.product .cart-btn .cart-btn-icon,
.product-modal-cart-btn .cart-btn-icon{
  background:rgba(84,67,60,.13);
  color:var(--brand-dark);
}

.product .cart-btn.is-added,
.product-modal-cart-btn.is-added{
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand-light) 100%);
  color:#fff;
}

.product .cart-btn.is-added .cart-btn-icon,
.product-modal-cart-btn.is-added .cart-btn-icon{
  background:#fff;
  color:var(--brand-dark);
}

/* PRODUCT MODAL */

.product-modal-overlay{
  background:rgba(85,85,85,.48);
  backdrop-filter:blur(12px);
}

.product-modal{
  background:#fff;
  box-shadow:0 28px 80px rgba(84,67,60,.24);
}

.product-modal-close{
  background:var(--brand-gold);
  color:var(--brand-dark);
}

.product-modal-close:hover{
  background:var(--brand-gold);
}

.product-modal-media{
  background:linear-gradient(180deg,#ffffff 0%,var(--brand-cream) 100%);
}

.product-modal-category{
  background:var(--brand-light-gray);
  color:var(--brand-dark);
}

.product-modal-info h2{
  color:var(--brand-dark);
}

.product-modal-description{
  color:var(--brand-gray-dark);
}

.product-modal-meta div,
.modal-qty-box{
  border:1px solid rgba(84,67,60,.14);
  background:var(--brand-cream);
}

.product-modal-meta span,
.modal-qty-box span{
  color:var(--brand-gray);
}

.product-modal-meta strong{
  color:var(--brand-dark);
}

/* MODAL QUANTITY */

.modal-qty-controls{
  border:1px solid rgba(84,67,60,.18);
  background:#fff;
}

.modal-qty-controls button{
  background:var(--brand-light-gray);
  color:var(--brand-gray-dark);
}

.modal-qty-controls button:hover{
  background:var(--brand-light-gray);
  color:var(--brand-dark);
}

.modal-qty-controls strong{
  color:var(--brand-dark);
}
/* RESPONSIVE BUTTON SIZING */

.cat-btn{
  min-width:128px;
  padding:10px 15px;
  font-size:14px;
  line-height:1.35;
}

.product .cart-btn{
  min-height:48px;
  padding:9px 14px;
  font-size:14px;
}

.product .cart-btn .cart-btn-icon{
  width:28px;
  height:28px;
  font-size:18px;
}

.product .cart-btn .cart-btn-label span:first-child{
  font-size:15px;
}

.product .cart-btn .cart-btn-label span:last-child{
  font-size:14px;
}

.product-view-btn{
  width:44px;
  height:44px;
}

.product-view-btn svg{
  width:21px;
  height:21px;
}

.product-modal-cart-btn{
  min-height:52px;
  padding:10px 16px;
  font-size:15px;
}

.product-modal-cart-btn .cart-btn-icon{
  width:30px;
  height:30px;
  font-size:18px;
}

@media(max-width:768px){
  .categories{
    gap:8px;
    padding:12px 10px 6px;
  }

  .cat-btn{
    min-width:auto;
    flex:1 1 calc(50% - 8px);
    padding:9px 10px;
    font-size:13px;
    border-radius:14px;
  }

  .product .cart-btn{
    width:100%;
    min-height:46px;
    padding:8px 12px;
    border-radius:14px;
    gap:8px;
  }

  .product .cart-btn .cart-btn-icon{
    width:26px;
    height:26px;
    font-size:17px;
  }

  .product .cart-btn .cart-btn-label span:first-child{
    font-size:14px;
  }

  .product .cart-btn .cart-btn-label span:last-child{
    font-size:13px;
  }

  .product-view-btn{
    width:42px;
    height:42px;
    left:9px;
    bottom:9px;
  }

  .product-view-btn svg{
    width:20px;
    height:20px;
  }

  .product-modal-cart-btn{
    min-height:48px;
    padding:9px 14px;
    border-radius:14px;
    gap:8px;
  }

  .product-modal-cart-btn .cart-btn-icon{
    width:27px;
    height:27px;
    font-size:17px;
  }

  .modal-qty-controls{
    height:44px;
    grid-template-columns:46px 1fr 46px;
  }

  .modal-qty-controls button{
    font-size:24px;
  }

  .modal-qty-controls strong{
    font-size:18px;
  }
}
/* ADMIN MOBILE COMPACT */

@media(max-width:768px){
  .admin-box{
    padding:12px;
  }

  .sort-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:8px 0 12px;
  }

  .sort-buttons button{
    min-height:44px;
    padding:7px 6px;
    border-radius:12px;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
  }

  .sort-buttons button br{
    display:none;
  }

  .stats-box{
    grid-template-columns:repeat(2,1fr);
    gap:9px;
    margin:10px 0 14px;
  }

  .stat-card{
    padding:12px 8px;
    border-radius:14px;
  }

  .stat-card h3{
    font-size:13px;
    margin-bottom:5px;
    line-height:1.2;
  }

  .stat-card span{
    font-size:28px;
    margin:0;
    line-height:1.1;
  }

  #productsTable{
    margin-top:12px;
    gap:10px;
  }
}

@media(max-width:420px){
  .sort-buttons{
    gap:6px;
  }

  .sort-buttons button{
    min-height:40px;
    padding:6px 4px;
    font-size:12px;
  }

  .stats-box{
    grid-template-columns:repeat(2,1fr);
  }

  .stat-card{
    padding:10px 6px;
  }

  .stat-card h3{
    font-size:12px;
  }

  .stat-card span{
    font-size:25px;
  }
}
/* ADMIN IMPORT EXPORT MOBILE COMPACT */

@media(max-width:768px){
  .form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  #importExcel,
  #exportExcel{
    width:100%;
    min-height:42px;
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
    line-height:1.25;
    background:#f2f2f2;
    color:var(--brand-dark);
    box-shadow:none;
  }

  #importExcel br,
  #exportExcel br{
    display:none;
  }

  #importExcel{
    grid-column:auto;
  }

  #exportExcel{
    grid-column:auto;
  }

  #importExcel,
  #exportExcel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .upload-btn{
    min-height:48px;
    padding:10px 12px;
    border-radius:12px;
    font-size:14px;
    line-height:1.35;
  }
}

@media(max-width:520px){
  .form-grid{
    grid-template-columns:1fr 1fr;
  }

  .form-grid input,
  .form-grid select,
  .upload-btn{
    grid-column:1 / -1;
  }

  #importExcel,
  #exportExcel{
    grid-column:auto;
    font-size:12px;
    padding:7px 6px;
    min-height:40px;
  }

  #importExcel{
    grid-column:1;
  }

  #exportExcel{
    grid-column:2;
  }
}

/* =========================
HEADER LOGIN / USER BUTTONS
========================= */

.login-btn{
  padding:6px 12px;
  border:none;
  border-radius:8px;
  background:var(--brand-brown);
  color:#fff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:.25s;
  line-height:1.3;
  white-space:nowrap;
}

.login-btn:hover{
  background:var(--brand-gold);
}

.logout-btn{
  background:#dc3545;
  color:#fff;
}

.logout-btn:hover{
  background:#bb2d3b;
}

.invoices-btn{
  background:#ffc107;
  color:#333;
}

.invoices-btn:hover{
  background:#e0a800;
}

.logged-in-user{
  color:var(--brand-brown);
  font-weight:800;
  font-size:15px;
  padding:6px 12px;
  background:var(--brand-cream);
  border-radius:8px;
}

/* =========================
MODAL OVERLAY (LOGIN, INVOICES, ETC)
========================= */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}

.modal-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.modal-overlay[hidden]{
  display:none !important;
}

.modal-dialog{
  position:relative;
  width:min(440px,100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:#fff;
  border-radius:20px;
  padding:30px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  direction:rtl;
}

.modal-dialog.invoices-dialog,
.modal-dialog.invoice-detail-dialog{
  width:min(650px,100%);
}

.modal-close-btn{
  position:absolute;
  top:12px;
  left:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:#f2f2f2;
  color:#555;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.login-dialog .modal-close-btn{
  right:12px;
  left:auto;
  top:12px;
  width:32px;
  height:32px;
  border-radius:6px;
  font-size:20px;
}

.modal-close-btn:hover{
  background:#dc3545;
  color:#fff;
}

.login-logo{
  width:1.6in;
  height:auto;
  margin-bottom:10px;
}

.login-dialog h2{
  color:var(--brand-brown);
  font-size:26px;
  margin-bottom:6px;
}

.login-subtitle{
  color:#777;
  font-size:14px;
  margin-bottom:18px;
}

.login-dialog input{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:16px;
  text-align:center;
  outline:none;
  background:#fafafa;
  font-weight:700;
}

.login-dialog input:focus{
  border-color:var(--brand-brown);
  background:#fff;
  box-shadow:0 0 0 4px rgba(84,67,60,.12);
}

.login-select{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:16px;
  text-align:center;
  outline:none;
  background:#fafafa;
  font-weight:700;
  cursor:pointer;
  appearance:auto;
  -webkit-appearance:auto;
}

.login-select:focus{
  border-color:var(--brand-brown);
  background:#fff;
  box-shadow:0 0 0 4px rgba(84,67,60,.12);
}

.login-dialog button[type="button"]{
  width:100%;
  padding:10px;
  border:none;
  border-radius:12px;
  background:var(--brand-brown);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 4px 12px rgba(84,67,60,.18);
}

.login-dialog button[type="button"]:hover{
  background:var(--brand-gold);
  transform:translateY(-2px);
}

.login-error{
  min-height:24px;
  margin-top:10px;
  color:#dc3545;
  font-weight:800;
  font-size:14px;
}

/* =========================
INVOICES HISTORY MODAL
========================= */

.invoices-dialog h2{
  color:var(--brand-brown);
  font-size:24px;
  margin-bottom:6px;
}

.invoices-subtitle{
  color:#777;
  font-size:14px;
  margin-bottom:16px;
}

.invoices-list{
  max-height:60vh;
  overflow-y:auto;
  text-align:right;
}

.invoice-history-card{
  background:#f9f9f9;
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:14px;
  margin-bottom:10px;
  cursor:pointer;
  transition:.2s;
}

.invoice-history-card:hover{
  background:var(--brand-cream);
  border-color:var(--brand-brown);
  transform:translateX(-3px);
}

.invoice-history-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}

.invoice-history-no{
  color:var(--brand-brown);
  font-size:15px;
}

.invoice-history-date{
  color:#888;
  font-size:13px;
}

.invoice-history-items{
  color:#666;
  font-size:13px;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.invoice-history-footer{
  display:flex;
  gap:14px;
  font-size:12px;
  color:#888;
}

.invoices-close-btn{
  width:100%;
  margin-top:14px;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#f2f2f2;
  color:#333;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.invoices-close-btn:hover{
  background:#ddd;
}

.loading-text,
.empty-text,
.error-text{
  text-align:center;
  padding:20px;
  color:#888;
  font-size:15px;
}

.error-text{
  color:#dc3545;
}

/* =========================
INVOICE DETAIL MODAL
========================= */

.invoice-detail-header{
  text-align:center;
  margin-bottom:16px;
}

.invoice-detail-logo{
  width:80px;
  height:auto;
  margin-bottom:6px;
}

.invoice-detail-header h2{
  color:var(--brand-brown);
  font-size:22px;
}

.invoice-detail-meta{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-bottom:16px;
  padding:12px;
  border:1px solid #e0e0e0;
  border-radius:10px;
  background:#fafafa;
}

.invoice-detail-meta div{
  text-align:center;
}

.invoice-detail-meta span{
  display:block;
  color:#888;
  font-size:12px;
  font-weight:700;
  margin-bottom:4px;
}

.invoice-detail-meta strong{
  color:#333;
  font-size:14px;
}

.invoice-detail-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:14px;
}

.invoice-detail-table th{
  background:var(--brand-brown);
  color:#fff;
  padding:10px 12px;
  border:1px solid var(--brand-brown);
  font-size:14px;
}

.invoice-detail-table td{
  padding:8px 12px;
  border:1px solid #ddd;
  font-size:14px;
  text-align:center;
}

.invoice-detail-summary{
  display:flex;
  justify-content:center;
  gap:24px;
  padding:12px;
  background:var(--brand-cream);
  border-radius:10px;
  font-weight:700;
  color:var(--brand-brown);
  font-size:15px;
}

/* =========================
MOBILE ADJUSTMENTS FOR NEW ELEMENTS
========================= */

@media(max-width:768px){
  .logo{
    width:1.93in;
    height:1.34in;
    margin:0 auto;
  }
}

  header h1{
    font-size:clamp(12px,2.5vw,16px);
  }

  .login-btn{
    padding:4px 8px;
    font-size:11px;
  }

  .profile-toggle-btn{
    padding:3px 8px;
    font-size:11px;
  }

  .logged-in-user{
    font-size:13px;
    padding:4px 10px;
  }

  .modal-dialog{
    padding:20px;
  }

  .invoice-detail-meta{
    grid-template-columns:1fr;
    gap:6px;
  }
}

/* =========================
AUTH TABS
======================== */

.auth-tabs{
  display:flex;
  gap:0;
  margin-bottom:14px;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
}

.auth-tab{
  flex:1;
  padding:8px 10px;
  border:none;
  background:#f8f8f8;
  color:#555;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.auth-tab.active{
  background:var(--brand-brown);
  color:#fff;
}

.auth-tab:not(.active):hover{
  background:var(--brand-cream);
}

/* =========================
PROFILE DROPDOWN
======================== */

.user-profile{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.profile-toggle-btn{
  background:var(--brand-brown);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.profile-toggle-btn:hover{
  background:var(--brand-gold);
}

.profile-dropdown{
  position:absolute;
  top:100%;
  right:0;
  min-width:200px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  z-index:1000;
  padding:8px;
  display:none;
  margin-top:4px;
}

.profile-dropdown.show{
  display:block;
}

.profile-dropdown-item{
  padding:8px 10px;
  font-size:13px;
  color:#333;
  border-bottom:1px solid #f0f0f0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.profile-dropdown-item:last-child{
  border-bottom:none;
}

.profile-dropdown-item strong{
  color:#111;
  min-width:50px;
}

.profile-dropdown-item button{
  background:#f0f0f0;
  border:1px solid #ddd;
  border-radius:6px;
  padding:5px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  color:#333;
  transition:.2s;
}

.profile-dropdown-item button:hover{
  background:var(--brand-brown);
  color:#fff;
  border-color:var(--brand-brown);
}

/* =========================
INVOICE PRINT SMALL BUTTON
======================== */

.inv-print-small-btn{
  background:#ffc107;
  color:#333;
  border:none;
  border-radius:6px;
  padding:5px 12px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  width:100%;
}

.inv-print-small-btn:hover{
  background:#e0a800;
}

.dash-menu-btn{
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:9999;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--brand-brown);
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s,box-shadow .2s;
}
.dash-menu-btn:hover{ transform:scale(1.1); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.dash-menu-btn span{
  display:block;
  width:20px;
  height:3px;
  background:#fff;
  border-radius:2px;
  transition:all .3s;
}
.dash-menu-btn.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.dash-menu-btn.active span:nth-child(2){
  opacity:0;
}
.dash-menu-btn.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}
.dash-menu-dropdown{
  position:fixed;
  bottom:78px;
  left:20px;
  z-index:9998;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  padding:8px 0;
  min-width:200px;
  display:none;
  overflow:hidden;
}
.dash-menu-dropdown.show{ display:block; }
.dash-menu-dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  text-decoration:none;
  color:#333;
  font-size:14px;
  font-weight:600;
  transition:background .15s;
}
.dash-menu-dropdown a:hover{ background:#f2f2f2; }
.dash-menu-dropdown .dash-icon{ font-size:18px; }