*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#fff8f1;color:#2b1208}
button,input,select,textarea{font-family:inherit;font-size:16px}
button{cursor:pointer}

.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:#fff8f1}
.auth-card{width:430px;max-width:100%;background:#fff;border:1px solid #eee;border-radius:30px;padding:32px;text-align:center;box-shadow:0 20px 60px rgba(91,42,22,.12)}
.auth-logo{width:110px;height:110px;object-fit:contain}
.auth-card h1{margin:10px 0 4px;font-size:30px}
.auth-card p{color:#777}
.auth-card input{width:100%;padding:16px;margin-top:12px;border:1px solid #ddd;border-radius:16px;outline:none}
.auth-card button{width:100%;padding:16px;margin-top:16px;border:0;border-radius:16px;background:#5b2a16;color:#fff;font-weight:900}
.error-msg{color:#b91c1c;font-weight:700}

.app-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eee;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-row{display:flex;align-items:center;gap:14px}
.brand-logo{width:62px;height:62px;object-fit:contain}
.brand-row h1{margin:0;font-size:26px}
.brand-row p{margin:4px 0 0;color:#777}
.outline-btn{background:#fff;border:1px solid #ddd;border-radius:16px;padding:12px 18px;font-weight:900;color:#2b1208}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.install-app-btn{border-color:#5b2a16;background:#5b2a16;color:#fff}
.install-app-btn:disabled{opacity:.75;cursor:pointer}

.dashboard{max-width:1240px;margin:0 auto;padding:30px 20px 80px}

.input-alert{background:#fff1f1;border:1px solid #fecaca;color:#991b1b;border-radius:22px;padding:18px 20px;margin-bottom:20px;animation:pulseAlert 1.3s infinite}
.input-alert p{margin:6px 0 0}
@keyframes pulseAlert{0%,100%{box-shadow:0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.08)}}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid #eee;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 35px rgba(91,42,22,.06)}
.stat-card span{color:#777;font-size:14px}
.stat-card b{font-size:27px;color:#5b2a16}

.request-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px}
.action-card{background:#fff;border:1px solid #eee;border-radius:24px;padding:22px;box-shadow:0 12px 35px rgba(91,42,22,.04);cursor:pointer;min-height:120px}
.action-card b{font-size:22px;color:#2b1208}
.action-card p{margin:8px 0 0;color:#777;line-height:1.4}
.action-card.active{background:#fff3e7;border-color:#5b2a16}

.raise-panel{background:#fff;border:1px solid #eee;border-radius:26px;padding:24px;margin-bottom:24px;box-shadow:0 12px 35px rgba(91,42,22,.04)}
.raise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.raise-grid label{display:flex;flex-direction:column;gap:7px}
.raise-grid label span{font-size:13px;font-weight:900;color:#5b2a16}
.raise-grid .full{grid-column:1/-1}
.raise-grid input,.raise-grid select,.raise-grid textarea{width:100%;border:1px solid #ddd;border-radius:16px;padding:14px;outline:none;background:#fff}
.raise-grid textarea{grid-column:1/-1;min-height:110px;resize:vertical}

.primary-btn{width:100%;min-height:52px;margin-top:16px;border:0;border-radius:18px;background:#5b2a16;color:#fff;font-weight:900}
.request-msg{font-weight:800;color:#5b2a16}
.hidden{display:none!important}

.raw-placeholder{background:#fff8f1;border:1px dashed #e7c6a5;border-radius:22px;padding:28px}
.raw-placeholder b{font-size:22px;color:#5b2a16}
.raw-placeholder p{color:#777}

.work-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:22px}
.panel{background:#fff;border:1px solid #eee;border-radius:26px;padding:24px;box-shadow:0 12px 35px rgba(91,42,22,.04)}
.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.panel h2{margin:0;font-size:26px}
.panel-title p{margin:6px 0 0;color:#777}
.panel-title input{min-width:220px;border:1px solid #ddd;border-radius:16px;padding:13px 14px}

.request-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #eee;border-radius:20px;padding:18px;margin-bottom:14px;min-height:110px;transition:.2s}
.request-card:hover,.request-card.selected{background:#fff3e7;border-color:#5b2a16}
.request-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.request-card b{font-size:18px}
.request-card h3{margin:10px 0 6px;font-size:20px}
.request-card p{margin:0;color:#777;font-size:16px}
.request-card small{display:block;margin-top:6px;color:#2b1208;font-size:14px}
.input-pill{background:#dc2626;color:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;animation:pulseAlert 1.3s infinite}

.journey-summary{background:#fff8f1;border-radius:18px;padding:16px;margin:16px 0}
.journey-summary b{font-size:18px}
.journey-summary span{display:inline-block;margin-left:8px;color:#5b2a16;font-weight:900}
.journey-summary p{margin:8px 0 0;color:#777}
.timeline-item{border-left:4px solid #5b2a16;padding:0 0 18px 16px;margin-bottom:14px}
.timeline-item b{font-size:17px}
.timeline-item p{margin:5px 0;color:#666;font-size:16px}
.timeline-item small{color:#333;font-size:13px}
.show-more-btn{width:100%;min-height:50px;border:0;border-radius:16px;background:#5b2a16;color:#fff;font-weight:900;margin-top:8px}
.show-more-btn.secondary{background:#fff;border:1px solid #ddd;color:#5b2a16}
.muted{color:#777}
.empty-box{padding:25px;border:1px dashed #ddd;border-radius:20px;color:#777;text-align:center}

/* RAW MATERIAL ORDER */
.rm-category{margin-bottom:16px;background:#fff;border:1px solid #f0dfcf;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(82,45,18,.06)}
.rm-category-title{width:100%;border:0;background:linear-gradient(90deg,#fff7ec,#fff);padding:16px 18px;font-size:15px;font-weight:900;color:#4b1f08;display:flex;justify-content:space-between;align-items:center}
.rm-category-body{padding:0 14px 16px}

.rm-product-row{display:grid;grid-template-columns:2fr 80px 170px 90px 70px 110px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f3e5d8}
.rm-product-head{font-size:11px;text-transform:uppercase;font-weight:900;color:#8a4a1d}
.rm-product-row strong{font-size:15px}
.rm-product-row small{color:#8a6b58}

.qty-control{display:flex;align-items:center;gap:8px}
.qty-btn{width:42px;height:42px;border:0;border-radius:12px;background:#5b2a16;color:#fff;font-size:22px;font-weight:900;flex-shrink:0}
.qty-btn:active{transform:scale(.96)}
.rm-qty-input{width:70px;text-align:center;font-size:18px;font-weight:900;border:1px solid #e5cdb8;border-radius:12px;padding:10px;background:#fff}
.rm-qty-input::-webkit-outer-spin-button,.rm-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rm-qty-input[type=number]{-moz-appearance:textfield}

.rm-line-total{font-weight:900;color:#3a1707;text-align:right}

.rm-custom-box{background:#fffaf5;border:1px dashed #e2b27f;border-radius:14px;padding:14px;margin-top:12px}
.rm-custom-box h3{margin:0 0 6px;color:#5b2a16}
.rm-custom-box p{margin:0 0 12px;color:#777}
.rm-custom-grid{display:grid;grid-template-columns:1.5fr 90px 120px 2fr;gap:10px}
.rm-custom-box input,.rm-custom-box textarea{width:100%;border:1px solid #e5cdb8;border-radius:10px;padding:10px}

.sticky-order-summary{position:sticky;bottom:0;background:#fff;padding:14px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:5;box-shadow:0 -8px 24px rgba(82,45,18,.06)}

/* DOCUMENTS PANEL */
.documents-panel{margin-top:18px;padding:16px;border:1px solid #f0dfd4;border-radius:18px;background:#fffaf6}
.documents-panel h3{margin:0 0 12px;font-size:18px}
.document-card{padding:14px;margin-bottom:12px;border:1px solid #ead8cc;border-radius:16px;background:#fff}
.document-card:last-child{margin-bottom:0}
.document-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.document-card b{font-size:15px}
.document-card p{margin:6px 0;color:#5f5f5f}
.document-meta{display:block;font-size:12px;color:#777;margin-top:4px}
.document-download-btn{display:inline-block;margin-top:10px;padding:10px 14px;border-radius:999px;background:#6b2d18;color:#fff;font-weight:700;text-decoration:none;font-size:14px}

/* RAW MATERIAL EDIT LIST */
.rm-edit-list{display:grid;gap:12px;margin-top:15px}
.rm-edit-card{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px;border:1px solid #ead8cc;border-radius:16px;background:#fffaf6}
.rm-edit-info b{display:block;font-size:15px}
.rm-edit-info small{display:block;margin-top:4px;color:#777}
.rm-edit-info span{display:block;margin-top:6px;font-weight:700;color:#6b2d18}
.rm-edit-qty-control{display:flex;align-items:center;gap:8px}
.edit-qty-btn{width:42px;height:42px;border:0;border-radius:14px;background:#6b2d18;color:#fff;font-size:22px;font-weight:800}
.edit-rm-qty{width:72px;height:42px;border:1px solid #ead8cc;border-radius:14px;text-align:center;font-size:18px;font-weight:800;outline:none}

/* RAW MATERIAL ADMIN STATUS ACTIONS */
.rm-admin-status-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.rm-status-action-btn{background:#fff;border:1px solid #d1a478;color:#6b2d16;padding:10px 16px;border-radius:12px;font-weight:800;font-size:13px;cursor:pointer;transition:.2s ease}
.rm-status-action-btn:hover{background:#6b2d16;color:#fff;border-color:#6b2d16}
.rm-dispatch-box{margin-top:16px;padding:18px;border:1px solid #efd4c4;border-radius:18px;background:#fff9f4;display:grid;gap:12px}
.rm-dispatch-box h3{margin:0 0 4px;font-size:16px;font-weight:900;color:#1f0f08}
.rm-dispatch-box label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#6b2d16}
.rm-dispatch-box input,.rm-dispatch-box textarea{width:100%;box-sizing:border-box;border:1px solid #e6cdbd;background:#fff;border-radius:12px;padding:11px 12px;font-size:14px;font-family:inherit;outline:none}
.rm-dispatch-box textarea{min-height:90px;resize:vertical}
.rm-dispatch-box input:focus,.rm-dispatch-box textarea:focus{border-color:#6b2d16;box-shadow:0 0 0 3px rgba(107,45,22,.08)}
.rm-dispatch-box .primary-btn{width:100%;margin-top:4px;border-radius:14px;padding:13px 16px}

/* ADMIN CARD ICONS - DOUBLED SIZE */
.admin-card-title{display:flex;align-items:center;gap:12px;font-family:Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;line-height:1.25!important;color:#2b1208!important}
.admin-card-logo{width:56px;height:56px;object-fit:contain;flex-shrink:0}

/* CARD FONT STYLING */
.action-card b,.action-card h3{font-family:Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;line-height:1.25!important;color:#2b1208!important}
.action-card p,.admin-card p{font-family:Arial,sans-serif!important;font-size:13px!important;font-weight:400!important;line-height:1.45!important;color:#555!important}

/* NEW REQUEST VISUAL INDICATORS */
.new-badge{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:900;letter-spacing:.5px;box-shadow:0 2px 8px rgba(16,185,129,.3);animation:badge-pulse 2s ease-in-out infinite;display:inline-block;margin-right:6px}
@keyframes badge-pulse{0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(16,185,129,.3)}50%{transform:scale(1.05);box-shadow:0 4px 12px rgba(16,185,129,.5)}}
.new-request-highlight{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%)!important;border:2px solid #10b981!important;box-shadow:0 4px 20px rgba(16,185,129,.2)!important}
.new-request-highlight:hover{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%)!important;box-shadow:0 6px 25px rgba(16,185,129,.3)!important}
.request-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.request-card-top b{margin-right:auto}

/* OUTLET STYLING */
#activeOutletSelector{appearance:auto!important;-webkit-appearance:menulist!important;-moz-appearance:menulist!important;background-color:#fff!important;padding-right:36px!important}
.outlet-id-chip{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:6px 0 4px;padding:4px 9px;border-radius:999px;background:#fff3e8;border:1px solid #f4b183;color:#6b2d14;font-size:12px;font-weight:800;letter-spacing:.2px}
.outlet-line-text{display:block;color:#374151;font-size:13px;line-height:1.35}

/* MOBILE RESPONSIVE */
@media(max-width:900px){
  .app-header{padding:12px 14px}
  .brand-logo{width:52px;height:52px}
  .brand-row h1{font-size:22px}
  .dashboard{padding:18px 12px 90px}
  .stats-row{display:flex;overflow-x:auto;gap:12px;padding-bottom:6px;scroll-snap-type:x mandatory}
  .stat-card{min-width:170px;scroll-snap-align:start}
  .work-grid{grid-template-columns:1fr}
  .panel{padding:18px;border-radius:22px}
  .panel-title{flex-direction:column}
  .panel-title input{width:100%;min-width:0}
}

@media(max-width:768px){
  .request-actions{grid-template-columns:1fr}
  .raise-grid{grid-template-columns:1fr}
  .rm-product-row{grid-template-columns:1fr;background:#fff;border:1px solid #f1dfce;border-radius:14px;margin-bottom:10px;padding:12px}
  .rm-product-head{display:none}
  .rm-line-total{text-align:left}
  .rm-custom-grid{grid-template-columns:1fr}
  .sticky-order-summary{flex-direction:column;align-items:stretch}
  .qty-control{justify-content:flex-start}
  .qty-btn{width:48px;height:48px;font-size:24px}
  .rm-qty-input{width:82px;height:48px}
  .rm-admin-status-actions{display:grid;grid-template-columns:1fr 1fr}
  .rm-status-action-btn{width:100%;padding:10px 8px}
  .rm-dispatch-box{padding:14px;border-radius:16px}
  .request-card-top{gap:4px}
  .new-badge{font-size:10px;padding:3px 8px;margin-right:4px}
  .input-pill{font-size:10px!important;padding:4px 8px!important}
}

@media(max-width:700px){
  .outlet-id-chip{font-size:12px;padding:5px 10px}
  .outlet-line-text{font-size:13px}
}

@media(max-width:520px){
  .app-header{align-items:flex-start}
  .header-actions{flex-direction:column;align-items:stretch;gap:8px}
  .outline-btn{padding:10px 14px;min-height:44px}
  .brand-row{gap:10px}
  .brand-logo{width:48px;height:48px}
  .brand-row h1{font-size:20px}
  .brand-row p{font-size:14px}
  .stat-card b{font-size:24px}
  .panel h2{font-size:22px}
  .action-card{min-height:110px;padding:18px}
  .action-card b{font-size:19px}
}
/* =========================================================
   THE WAFFLE STREET - ADMIN COMMON PROFESSIONAL DESIGN ADD-ON
   Paste this at the VERY BOTTOM of /assets/css/style.css
   Purpose: common admin button colours, better Manage Partners UI,
   professional Map button, cleaner cards, and mobile-first polish.
   ========================================================= */

:root{
  --tws-brown:#6b2d16;
  --tws-brown-dark:#4b1f0f;
  --tws-brown-soft:#fff7ef;
  --tws-border:#ead8cc;
  --tws-border-strong:#d7b398;
  --tws-text:#21110a;
  --tws-muted:#6b7280;
  --tws-danger:#dc3545;
  --tws-danger-dark:#b91c1c;
  --tws-success:#10b981;
  --tws-warning:#f59e0b;
  --tws-shadow:0 12px 34px rgba(91,42,22,.08);
}

/* Common admin polish */
body .dashboard,
body .panel,
body .action-card,
body .request-card,
body .admin-form-box,
body .journey-summary{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Admin top cards */
.request-actions .action-card{
  border:1px solid #eee!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(91,42,22,.055)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.request-actions .action-card:hover{
  transform:translateY(-2px);
  border-color:var(--tws-border-strong)!important;
  box-shadow:0 16px 38px rgba(91,42,22,.10)!important;
}
.request-actions .action-card.active{
  background:linear-gradient(135deg,#fff7ef 0%,#fff 100%)!important;
  border:1.5px solid var(--tws-brown)!important;
  box-shadow:0 14px 36px rgba(107,45,22,.12)!important;
}

/* Common button system across admin sections */
.primary-btn,
.show-more-btn,
button.primary-btn,
button.show-more-btn,
#adminControlDetailBox .primary-btn,
#adminControlDetailBox button.primary-btn,
#adminControlDetailBox button[id*="Btn"].primary-btn,
#adminControlDetailBox button[class*="primary"]{
  background:linear-gradient(135deg,var(--tws-brown) 0%,var(--tws-brown-dark) 100%)!important;
  color:#fff!important;
  border:1px solid var(--tws-brown)!important;
  border-radius:14px!important;
  min-height:44px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  box-shadow:0 8px 18px rgba(107,45,22,.16)!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}
.primary-btn:hover,
.show-more-btn:hover,
#adminControlDetailBox .primary-btn:hover,
#adminControlDetailBox button[class*="primary"]:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(107,45,22,.20)!important;
}
.primary-btn:active,
.show-more-btn:active,
#adminControlDetailBox .primary-btn:active{
  transform:translateY(0) scale(.99);
}

.outline-btn,
#adminControlDetailBox .outline-btn,
#adminControlDetailBox button.outline-btn{
  background:#fff!important;
  color:var(--tws-brown)!important;
  border:1px solid var(--tws-border-strong)!important;
  border-radius:14px!important;
  min-height:42px!important;
  font-weight:900!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease!important;
}
.outline-btn:hover,
#adminControlDetailBox .outline-btn:hover{
  background:var(--tws-brown-soft)!important;
  border-color:var(--tws-brown)!important;
  transform:translateY(-1px);
}

/* Danger buttons should stay red but look consistent */
.delete-user-btn,
button.delete-user-btn,
#adminControlDetailBox .delete-user-btn,
#adminControlDetailBox button[style*="background:#dc3545"],
#adminControlDetailBox button[style*="background: #dc3545"]{
  background:linear-gradient(135deg,var(--tws-danger) 0%,var(--tws-danger-dark) 100%)!important;
  color:#fff!important;
  border:1px solid var(--tws-danger)!important;
  border-radius:14px!important;
  min-height:42px!important;
  box-shadow:0 8px 18px rgba(220,53,69,.14)!important;
}
.delete-user-btn:hover,
#adminControlDetailBox .delete-user-btn:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

/* Manage Partners / Users - premium cards */
#adminControlDetailBox .admin-form-box{
  background:#fff!important;
  border:1px solid var(--tws-border)!important;
  border-radius:20px!important;
  box-shadow:var(--tws-shadow)!important;
  padding:18px!important;
}
#adminControlDetailBox .admin-form-box h3{
  color:var(--tws-text)!important;
  font-size:18px!important;
  line-height:1.25!important;
  margin:0 0 8px!important;
}
#adminControlDetailBox .admin-form-box input,
#adminControlDetailBox .admin-form-box select,
#adminControlDetailBox .admin-form-box textarea,
#adminControlDetailBox input,
#adminControlDetailBox select,
#adminControlDetailBox textarea{
  border:1px solid #ddd!important;
  border-radius:12px!important;
  background:#fff!important;
  min-height:44px!important;
  outline:none!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}
#adminControlDetailBox input:focus,
#adminControlDetailBox select:focus,
#adminControlDetailBox textarea:focus{
  border-color:var(--tws-brown)!important;
  box-shadow:0 0 0 3px rgba(107,45,22,.10)!important;
}

/* User cards inside Manage Partners */
#userSearchResults .request-card{
  border:1px solid #e5e7eb!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(91,42,22,.045)!important;
  padding:18px!important;
}
#userSearchResults .request-card:hover,
#userSearchResults .request-card.selected{
  background:#fff!important;
  border-color:var(--tws-border-strong)!important;
  box-shadow:0 12px 32px rgba(91,42,22,.08)!important;
}
#userSearchResults .request-card-top{
  padding-bottom:8px;
  border-bottom:1px solid #f1e4da;
  margin-bottom:10px;
}
#userSearchResults .request-card-top b{
  font-size:18px!important;
  color:var(--tws-text)!important;
}

/* Role badges - cleaner and readable */
#userSearchResults .input-pill,
#adminControlDetailBox .input-pill{
  color:#fff!important;
  border-radius:999px!important;
  padding:5px 10px!important;
  font-size:11px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  animation:none!important;
  box-shadow:none!important;
}

/* Mapping area */
#userSearchResults .request-card div[style*="background:#fff8ee"],
#userSearchResults .request-card div[style*="background: #fff8ee"]{
  background:linear-gradient(135deg,#fff8ee 0%,#fff 100%)!important;
  border:1px solid #efd0b8!important;
  border-radius:16px!important;
  padding:12px!important;
}
#userSearchResults .user-outlet-map-select{
  height:46px!important;
  border-radius:12px!important;
  border:1px solid #ddd!important;
  padding:0 12px!important;
  font-weight:700!important;
  color:#25130b!important;
}
#userSearchResults .map-user-outlet-btn{
  margin:0!important;
  min-width:84px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:12px!important;
  font-size:14px!important;
  white-space:nowrap!important;
  align-self:stretch!important;
}

/* Mapped outlet rows and remove button */
#userSearchResults .remove-user-outlet-btn{
  color:var(--tws-danger)!important;
  border-color:#f3b4bb!important;
  background:#fff!important;
  border-radius:10px!important;
  min-height:34px!important;
  padding:6px 10px!important;
}
#userSearchResults .remove-user-outlet-btn:hover{
  color:#fff!important;
  background:var(--tws-danger)!important;
  border-color:var(--tws-danger)!important;
}

/* Reset / delete button row */
#userSearchResults .reset-password-btn,
#userSearchResults .delete-user-btn{
  min-height:42px!important;
  border-radius:14px!important;
  font-size:13px!important;
  padding:9px 12px!important;
}
#userSearchResults .reset-password-btn{
  background:#fff!important;
  color:var(--tws-brown)!important;
}

/* Stats cards inside admin detail */
#adminControlDetailBox .journey-summary .request-card{
  min-height:auto!important;
  border-radius:16px!important;
  box-shadow:0 8px 20px rgba(91,42,22,.045)!important;
}
#adminControlDetailBox .journey-summary b[style*="font-size:24px"]{
  color:var(--tws-brown)!important;
}

/* Mobile-first admin layout */
@media(max-width:768px){
  #adminControlDetailBox .admin-form-box,
  #userSearchResults .request-card{
    border-radius:18px!important;
    padding:14px!important;
  }
  #adminControlDetailBox .admin-form-box .raise-grid,
  #adminControlDetailBox div[style*="grid-template-columns:2fr 1fr 1fr"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #userSearchResults .request-card div[style*="grid-template-columns:1fr auto"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #userSearchResults .map-user-outlet-btn{
    width:100%!important;
    min-width:0!important;
  }
  #userSearchResults .request-card div[style*="display:flex;gap:8px"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #userSearchResults .reset-password-btn,
  #userSearchResults .delete-user-btn{
    width:100%!important;
    min-width:0!important;
  }
  #userSearchResults .request-card-top{
    align-items:flex-start!important;
  }
}

@media(max-width:520px){
  #adminControlDetailBox .journey-summary > div[style*="grid-template-columns:1fr 1fr 1fr"]{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  #userSearchResults .request-card{
    padding:13px!important;
  }
  #userSearchResults .request-card p,
  #userSearchResults .request-card small{
    font-size:12px!important;
    line-height:1.45!important;
  }
  #userSearchResults .request-card-top b{
    font-size:17px!important;
  }
}
/* Admin stats cards - compact professional layout */
#dashboard .stats-grid,
#dashboard .summary-grid,
#dashboard .admin-stats,
#dashboard .mapping-summary-grid {
  align-items: stretch;
}

#dashboard .stat-card,
#dashboard .summary-card,
#dashboard .metric-card {
  min-height: 82px !important;
  padding: 16px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}

#dashboard .stat-card h2,
#dashboard .stat-card h3,
#dashboard .stat-card .stat-number,
#dashboard .summary-card h2,
#dashboard .summary-card h3,
#dashboard .summary-card .stat-number,
#dashboard .metric-card h2,
#dashboard .metric-card h3,
#dashboard .metric-card .stat-number {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #5a2412 !important;
}

#dashboard .stat-card p,
#dashboard .stat-card span,
#dashboard .summary-card p,
#dashboard .summary-card span,
#dashboard .metric-card p,
#dashboard .metric-card span {
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: 12px !important;
  color: #5f6673 !important;
  font-weight: 600 !important;
}

/* Specifically fix Manage Partners / Users top stat boxes */
#dashboard .details-panel .stat-card,
#dashboard .details-panel .summary-card,
#dashboard .details-panel .metric-card {
  max-height: 95px !important;
}

/* Mobile polish */
@media (max-width: 700px) {
  #dashboard .stat-card,
  #dashboard .summary-card,
  #dashboard .metric-card {
    min-height: 72px !important;
    padding: 12px 10px !important;
  }

  #dashboard .stat-card h2,
  #dashboard .stat-card h3,
  #dashboard .stat-card .stat-number,
  #dashboard .summary-card h2,
  #dashboard .summary-card h3,
  #dashboard .summary-card .stat-number,
  #dashboard .metric-card h2,
  #dashboard .metric-card h3,
  #dashboard .metric-card .stat-number {
    font-size: 22px !important;
  }

  #dashboard .stat-card p,
  #dashboard .stat-card span,
  #dashboard .summary-card p,
  #dashboard .summary-card span,
  #dashboard .metric-card p,
  #dashboard .metric-card span {
    font-size: 11px !important;
  }
}

/* =========================================================
   THE WAFFLE STREET - PROFESSIONAL LOGIN SCREEN REDESIGN
   Paste this at the BOTTOM of your /assets/css/style.css
   ========================================================= */

/* ===== LOGIN PAGE STYLES ===== */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #fff8f1 0%, #fef5ec 50%, #fdf0e3 100%);
  position: relative;
  overflow: hidden;
}

.auth-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(91, 42, 22, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(91, 42, 22, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 200, 150, 0.05) 0%, transparent 60%);
  animation: bgFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bgFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-20px, -20px) rotate(1deg); }
  66% { transform: translate(20px, -10px) rotate(-1deg); }
}

.auth-deco {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 42, 22, 0.06), rgba(91, 42, 22, 0.02));
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

.auth-deco-1 { width: 300px; height: 300px; top: -100px; right: -100px; animation-delay: 0s; }
.auth-deco-2 { width: 200px; height: 200px; bottom: -60px; left: -60px; animation-delay: -3s; }
.auth-deco-3 { width: 150px; height: 150px; top: 40%; left: 10%; animation-delay: -5s; opacity: 0.5; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 32px;
  padding: 40px 36px 36px;
  text-align: center;
  box-shadow: 
    0 4px 6px rgba(91, 42, 22, 0.04),
    0 10px 20px rgba(91, 42, 22, 0.06),
    0 25px 50px rgba(91, 42, 22, 0.08),
    0 0 0 1px rgba(91, 42, 22, 0.03);
  position: relative;
  z-index: 1;
  animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes cardEnter {
  to { opacity: 1; transform: translateY(0); }
}

.auth-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.auth-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 42, 22, 0.08) 0%, transparent 70%);
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.auth-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(91, 42, 22, 0.15));
  animation: logoBounce 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes logoBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.auth-card h1 {
  margin: 16px 0 4px;
  font-size: 32px;
  font-weight: 900;
  color: #2b1208;
  letter-spacing: -0.5px;
  animation: fadeUp 0.5s ease 0.3s both;
}

.auth-subtitle {
  margin: 0 0 32px;
  color: #8a6b58;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  animation: fadeUp 0.5s ease 0.4s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-input-group {
  position: relative;
  margin-bottom: 16px;
  animation: fadeUp 0.5s ease 0.5s both;
}

.auth-input-group:nth-child(2) { animation-delay: 0.6s; }

.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #b8a090;
  transition: color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.auth-card input {
  width: 100%;
  padding: 16px 16px 16px 48px;
  border: 2px solid #f0e6dc;
  border-radius: 16px;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: #2b1208;
  background: #fff;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.auth-card input::placeholder { color: #c4b5a5; font-weight: 400; }
.auth-card input:hover { border-color: #e0d0c0; background: #fffbf7; }
.auth-card input:focus {
  border-color: #5b2a16;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91, 42, 22, 0.08), 0 4px 12px rgba(91, 42, 22, 0.06);
}

.auth-card input:focus + .auth-input-icon,
.auth-input-group:focus-within .auth-input-icon { color: #5b2a16; }

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #b8a090;
  transition: color 0.2s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover { color: #5b2a16; }
.password-toggle svg { width: 20px; height: 20px; }

.auth-card button#loginBtn {
  width: 100%;
  padding: 18px 24px;
  margin-top: 8px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #5b2a16 0%, #4a2212 50%, #5b2a16 100%);
  background-size: 200% 200%;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 12px rgba(91, 42, 22, 0.25), 0 8px 24px rgba(91, 42, 22, 0.15);
  animation: fadeUp 0.5s ease 0.7s both;
}

.auth-card button#loginBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.auth-card button#loginBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(91, 42, 22, 0.3), 0 12px 32px rgba(91, 42, 22, 0.2);
  background-position: 100% 100%;
}

.auth-card button#loginBtn:hover::before { left: 100%; }
.auth-card button#loginBtn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(91, 42, 22, 0.2); }

.auth-card button#loginBtn.loading { pointer-events: none; opacity: 0.8; }
.auth-card button#loginBtn.loading .btn-text { opacity: 0; }
.auth-card button#loginBtn.loading .btn-spinner { opacity: 1; }

.btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-spinner::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f1 100%);
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: shake 0.5s ease, fadeUp 0.3s ease both;
}

.auth-error::before { content: '⚠'; font-size: 18px; flex-shrink: 0; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.auth-success {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  color: #15803d;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeUp 0.3s ease both;
}

.auth-success::before { content: '✓'; font-size: 18px; flex-shrink: 0; }

.auth-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f0e6dc;
  animation: fadeUp 0.5s ease 0.8s both;
}

.auth-footer p { margin: 0; color: #b8a090; font-size: 12px; font-weight: 500; letter-spacing: 0.5px; }
.auth-footer .brand-tag { color: #5b2a16; font-weight: 700; }

.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 16px;
  animation: fadeUp 0.5s ease 0.65s both;
}

.auth-remember label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #6b5b4f;
  font-weight: 500;
  user-select: none;
}

.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid #d4c4b4;
  border-radius: 5px;
  cursor: pointer;
  accent-color: #5b2a16;
  margin: 0;
}

.forgot-link {
  font-size: 13px;
  color: #8a6b58;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.forgot-link:hover { color: #5b2a16; text-decoration: underline; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  .auth-page { padding: 12px; background: linear-gradient(180deg, #fff8f1 0%, #fef5ec 100%); }
  .auth-page::before { display: none; }
  .auth-deco { display: none; }

  .auth-card {
    padding: 28px 20px 24px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(91, 42, 22, 0.06), 0 8px 24px rgba(91, 42, 22, 0.08);
    border: 1px solid rgba(240, 230, 220, 0.8);
  }

  .auth-logo { width: 90px; height: 90px; }
  .auth-card h1 { font-size: 26px; margin-top: 12px; }
  .auth-subtitle { font-size: 14px; margin-bottom: 24px; }

  .auth-card input {
    padding: 14px 14px 14px 44px;
    font-size: 16px;
    border-radius: 14px;
  }

  .auth-input-icon { width: 18px; height: 18px; left: 14px; }

  .auth-card button#loginBtn {
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 14px;
    min-height: 52px;
  }

  .auth-remember { margin: 4px 0 12px; }
  .auth-remember label { font-size: 13px; }
  .auth-footer { margin-top: 20px; padding-top: 16px; }
  .auth-error, .auth-success { padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 360px) {
  .auth-card { padding: 24px 16px 20px; border-radius: 20px; }
  .auth-card h1 { font-size: 24px; }
  .auth-logo { width: 80px; height: 80px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .auth-page { padding: 8px; align-items: flex-start; padding-top: 20px; }
  .auth-card { padding: 20px 24px; }
  .auth-logo { width: 60px; height: 60px; }
  .auth-card h1 { font-size: 22px; margin-top: 8px; }
  .auth-subtitle { margin-bottom: 16px; }
  .auth-input-group { margin-bottom: 10px; }
  .auth-card input { padding: 12px 12px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page::before, .auth-deco, .auth-logo-wrap::before, .auth-card, .auth-logo,
  .auth-card h1, .auth-subtitle, .auth-input-group, .auth-card button#loginBtn, .auth-footer, .auth-remember {
    animation: none !important;
    transition: none !important;
  }
  .auth-card { opacity: 1; transform: none; }
}


/* =========================================================
   THE WAFFLE STREET - PROFESSIONAL LOGIN SCREEN REDESIGN
   FIXED VERSION - Paste at BOTTOM of style.css
   ========================================================= */

/* ===== LOGIN PAGE STYLES ===== */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #fff8f1 0%, #fef5ec 50%, #fdf0e3 100%);
  position: relative;
  overflow: hidden;
}

.auth-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(91, 42, 22, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(91, 42, 22, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 200, 150, 0.05) 0%, transparent 60%);
  animation: bgFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bgFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-20px, -20px) rotate(1deg); }
  66% { transform: translate(20px, -10px) rotate(-1deg); }
}

.auth-deco {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 42, 22, 0.06), rgba(91, 42, 22, 0.02));
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

.auth-deco-1 { width: 300px; height: 300px; top: -100px; right: -100px; animation-delay: 0s; }
.auth-deco-2 { width: 200px; height: 200px; bottom: -60px; left: -60px; animation-delay: -3s; }
.auth-deco-3 { width: 150px; height: 150px; top: 40%; left: 10%; animation-delay: -5s; opacity: 0.5; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 32px;
  padding: 40px 36px 36px;
  text-align: center;
  box-shadow: 
    0 4px 6px rgba(91, 42, 22, 0.04),
    0 10px 20px rgba(91, 42, 22, 0.06),
    0 25px 50px rgba(91, 42, 22, 0.08),
    0 0 0 1px rgba(91, 42, 22, 0.03);
  position: relative;
  z-index: 1;
  animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes cardEnter {
  to { opacity: 1; transform: translateY(0); }
}

.auth-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.auth-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 42, 22, 0.08) 0%, transparent 70%);
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.auth-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(91, 42, 22, 0.15));
  animation: logoBounce 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes logoBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.auth-card h1 {
  margin: 16px 0 4px;
  font-size: 32px;
  font-weight: 900;
  color: #2b1208;
  letter-spacing: -0.5px;
  animation: fadeUp 0.5s ease 0.3s both;
}

.auth-subtitle {
  margin: 0 0 32px;
  color: #8a6b58;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  animation: fadeUp 0.5s ease 0.4s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-input-group {
  position: relative;
  margin-bottom: 16px;
  animation: fadeUp 0.5s ease 0.5s both;
}

.auth-input-group:nth-child(2) { animation-delay: 0.6s; }

.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #b8a090;
  transition: color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.auth-card input[type="text"],
.auth-card input[type="password"] {
  width: 100%;
  padding: 16px 44px 16px 48px;
  border: 2px solid #f0e6dc;
  border-radius: 16px;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: #2b1208;
  background: #fff;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.auth-card input::placeholder { color: #c4b5a5; font-weight: 400; }
.auth-card input:hover { border-color: #e0d0c0; background: #fffbf7; }
.auth-card input:focus {
  border-color: #5b2a16;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91, 42, 22, 0.08), 0 4px 12px rgba(91, 42, 22, 0.06);
}

.auth-card input:focus + .auth-input-icon,
.auth-input-group:focus-within .auth-input-icon { color: #5b2a16; }

/* Password toggle - FIXED: Specific selector to override general button styles */
.auth-page .password-toggle,
.auth-card .password-toggle,
.auth-input-group .password-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  cursor: pointer !important;
  color: #b8a090 !important;
  transition: color 0.2s ease !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.auth-page .password-toggle:hover,
.auth-card .password-toggle:hover,
.auth-input-group .password-toggle:hover {
  color: #5b2a16 !important;
  background: rgba(91, 42, 22, 0.06) !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

.auth-page .password-toggle svg,
.auth-card .password-toggle svg,
.auth-input-group .password-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Login button - FIXED: Highly specific to prevent override */
.auth-page .auth-card > button#loginBtn,
.auth-card > button#loginBtn {
  width: 100% !important;
  padding: 18px 24px !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #5b2a16 0%, #4a2212 50%, #5b2a16 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 4px 12px rgba(91, 42, 22, 0.25), 0 8px 24px rgba(91, 42, 22, 0.15) !important;
  animation: fadeUp 0.5s ease 0.7s both !important;
  font-family: inherit !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-page .auth-card > button#loginBtn::before,
.auth-card > button#loginBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.auth-page .auth-card > button#loginBtn:hover,
.auth-card > button#loginBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(91, 42, 22, 0.3), 0 12px 32px rgba(91, 42, 22, 0.2) !important;
  background-position: 100% 100% !important;
  filter: none !important;
}

.auth-page .auth-card > button#loginBtn:hover::before,
.auth-card > button#loginBtn:hover::before { left: 100%; }

.auth-page .auth-card > button#loginBtn:active,
.auth-card > button#loginBtn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(91, 42, 22, 0.2) !important;
}

.auth-page .auth-card > button#loginBtn.loading,
.auth-card > button#loginBtn.loading {
  pointer-events: none !important;
  opacity: 0.8 !important;
}

.auth-page .auth-card > button#loginBtn.loading .btn-text,
.auth-card > button#loginBtn.loading .btn-text { opacity: 0; }

.auth-page .auth-card > button#loginBtn.loading .btn-spinner,
.auth-card > button#loginBtn.loading .btn-spinner { opacity: 1; }

.btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-spinner::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f1 100%);
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: shake 0.5s ease, fadeUp 0.3s ease both;
}

.auth-error::before { content: '⚠'; font-size: 18px; flex-shrink: 0; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.auth-success {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  color: #15803d;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeUp 0.3s ease both;
}

.auth-success::before { content: '✓'; font-size: 18px; flex-shrink: 0; }

.auth-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f0e6dc;
  animation: fadeUp 0.5s ease 0.8s both;
}

.auth-footer p { margin: 0; color: #b8a090; font-size: 12px; font-weight: 500; letter-spacing: 0.5px; }
.auth-footer .brand-tag { color: #5b2a16; font-weight: 700; }

.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 16px;
  animation: fadeUp 0.5s ease 0.65s both;
}

.auth-remember label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #6b5b4f;
  font-weight: 500;
  user-select: none;
}

.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid #d4c4b4;
  border-radius: 5px;
  cursor: pointer;
  accent-color: #5b2a16;
  margin: 0;
  flex-shrink: 0;
}

.forgot-link {
  font-size: 13px;
  color: #8a6b58;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.forgot-link:hover { color: #5b2a16; text-decoration: underline; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  .auth-page { padding: 12px; background: linear-gradient(180deg, #fff8f1 0%, #fef5ec 100%); }
  .auth-page::before { display: none; }
  .auth-deco { display: none; }

  .auth-card {
    padding: 28px 20px 24px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(91, 42, 22, 0.06), 0 8px 24px rgba(91, 42, 22, 0.08);
    border: 1px solid rgba(240, 230, 220, 0.8);
  }

  .auth-logo { width: 90px; height: 90px; }
  .auth-card h1 { font-size: 26px; margin-top: 12px; }
  .auth-subtitle { font-size: 14px; margin-bottom: 24px; }

  .auth-card input[type="text"],
  .auth-card input[type="password"] {
    padding: 14px 40px 14px 44px;
    font-size: 16px;
    border-radius: 14px;
  }

  .auth-input-icon { width: 18px; height: 18px; left: 14px; }

  .auth-page .password-toggle,
  .auth-card .password-toggle,
  .auth-input-group .password-toggle {
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
  }

  .auth-page .auth-card > button#loginBtn,
  .auth-card > button#loginBtn {
    padding: 16px 20px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    min-height: 52px !important;
  }

  .auth-remember { margin: 4px 0 12px; }
  .auth-remember label { font-size: 13px; }
  .auth-footer { margin-top: 20px; padding-top: 16px; }
  .auth-error, .auth-success { padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 360px) {
  .auth-card { padding: 24px 16px 20px; border-radius: 20px; }
  .auth-card h1 { font-size: 24px; }
  .auth-logo { width: 80px; height: 80px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .auth-page { padding: 8px; align-items: flex-start; padding-top: 20px; }
  .auth-card { padding: 20px 24px; }
  .auth-logo { width: 60px; height: 60px; }
  .auth-card h1 { font-size: 22px; margin-top: 8px; }
  .auth-subtitle { margin-bottom: 16px; }
  .auth-input-group { margin-bottom: 10px; }
  .auth-card input[type="text"],
  .auth-card input[type="password"] { padding: 12px 40px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page::before, .auth-deco, .auth-logo-wrap::before, .auth-card, .auth-logo,
  .auth-card h1, .auth-subtitle, .auth-input-group, 
  .auth-page .auth-card > button#loginBtn, .auth-card > button#loginBtn, 
  .auth-footer, .auth-remember {
    animation: none !important;
    transition: none !important;
  }
  .auth-card { opacity: 1; transform: none; }
}