/* =========================
   Base Layout
========================= */


:root {
    --brand: #6f42c1;
    --brand-2: #0ea5e9;
}
  .btn-success { background:#16a34a; border:none; }
    #chat-box {
      height:650px;
      overflow-y:auto;
      border:1px solid #ccc;
      padding:8px;
      border-radius:8px;
      background: #f9f9f9;
    }
html, body {
  min-width: 1280px;
  
  color: #333;
  font-family: Arial, sans-serif;
}

/* =========================
   Navbar
========================= */
.navbar-modern {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  min-height: 64px;
  padding: 0.5rem 1rem;
  border: 0;
}

.navbar-modern .navbar-brand,
.navbar-modern .nav-link,
.navbar-modern .text-white {
  color: #fff !important;
}

.navbar-modern .btn-light {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}

.navbar-modern .btn-light:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-2px);
  
} 
  .navbar-modern .wrap,
.navbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}
  
  


/* =========================
   Layout Containers
========================= */
.wrap {
  max-width: 75%;
  margin: 24px auto 48px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.navbar-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.layout {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.column {
  flex: 1 1 0;
  min-width: 0;
}

/* =========================
   Cards
========================= */
.card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: #E8E5FF;
  box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);
  padding: 1.5rem;
}

.card + .card {
  margin-top: 32px;
}

.card-header {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 14px;
  color: #fff;
}

.card-body {
  background: linear-gradient(0deg, rgba(179,179,179,1) 0%, rgba(222,222,222,1) 50%, rgba(245,240,240,1) 100%);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.card > .card-body:first-of-type {
  margin-top: 0;
}

/* =========================
   UI Elements
========================= */
.section-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}

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

.stat {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
  font-size: 0.85rem;
}

.badge-soft-success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.badge-soft-secondary {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}

.preview-img {
  max-height: 220px;
  object-fit: cover;
  width: 100%;
}

.table thead th {
  background: #f1f3f8;
}

.table td,
.table th {
  vertical-align: middle;
}

.scroll-x {
  overflow-x: auto;
}

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.toolbar .left,
.toolbar .right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* =========================
   Dark Mode
========================= */
body.dark-mode {
  --bg-soft: #1e1e2f;
  --card-border: #2c2f3a;
  --text-muted: #a0a0b2;
  --brand: #8b5cf6;
  --brand-2: #0ea5e9;
  background: #121212;
  color: #f0f0f0;
}

body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header {
  background: #2a2a3d;
  color: #f0f0f0;
   box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);
}

body.dark-mode .card-body {
  background: linear-gradient(0deg, #2c2c3c 0%, #3a3a4a 50%, #444 100%);
}

body.dark-mode .navbar-modern {
  background: linear-gradient(90deg, #222, #333);
}

body.dark-mode .btn-light {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

    .video-container iframe {
      width:100%;
      aspect-ratio:16/9;
      border-radius:12px;
    box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);
    }
    .img-fit {
      width:100%; height:100%;
      object-fit:cover; border-radius:8px;
    }
    
.glass{
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(10px);      
  -webkit-backdrop-filter: blur(10px);  
  border-radius: 10px;                  
  border: 1px solid rgba(255, 255, 255, 0.3); 
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 
  padding: 20px;
  color: #000000;              
}

.img-fit {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
}

html body {
  padding-top: 70px !important;
}



/* Active state */
.admin-tab.active {
    background: #ffffff;
    color: #000;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* Dark mode compatibility */
body.dark-mode .admin-tab {
    background: rgba(255,255,255,0.15);
    color: #000;
    border: 2px solid #000;
}

body.dark-mode .admin-tab:hover,
body.dark-mode .admin-tab.active {
    background: #ffffff;
    color: #000;
}

.admin-switcher{
  border-radius: 18px;
  padding: 14px 16px;
}

.admin-section{
  display: none;
  animation: adminFade .18s ease-in-out;
}

.admin-section.active{
  display: block;
}

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

/* Hide all admin sections by default */
.admin-section {
  display: none;
}

/* Show only the active one */
.admin-section.active {
  display: block;
}
.admin-nav-buttons .admin-tab {
  transition: background-color 0.2s ease, color 0.2s ease;
  transform: none !important;
}

.admin-nav-buttons .admin-tab:hover {
  transform: none !important;
}
/* 3-pane layout */
.auction-layout{
  display: grid;
  grid-template-columns: var(--leftW, 0px) minmax(720px, 1fr) var(--rightW, 0px);
  gap: 16px;
  align-items: stretch;
}

/* panes */
.pane{ position: relative; min-height: 600px; }
.pane-inner{ height: 100%; }

/* collapsed panes */
.pane.is-collapsed{
  overflow: visible;
}
.pane.is-collapsed .pane-inner{
  display: none;
}

/* Tab handles */
.pane-tab{
  position: absolute;
  top: 140px; /* below navbar; adjust if needed */
  z-index: 20;
  border: 0;
  padding: 10px 10px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0,0,0,0.75);
  color: #fff;
}

.pane-tab-left{
  right: -44px;
  border-radius: 0 12px 12px 0;
  writing-mode: vertical-rl;
  
}

.pane-tab-right{
  left: -44px;
  border-radius: 12px 0 0 12px;
  writing-mode: vertical-rl;
}

/* Resize handles */
.pane-resize{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 15;
  cursor: col-resize;
}

.pane-left .pane-resize{ right: -5px; }
.pane-right .pane-resize{ left: -5px; }

/* nicer catalog vertical preview */
.catalog-preview img{
  max-height: 220px;
}

/* prevent broken image icon */
#catalog-image.d-none{ display:none !important; }

/* Responsive: on small screens, keep main only */
@media (max-width: 992px){
  .auction-layout{
    grid-template-columns: 1fr;
  }
  .pane-left, .pane-right{
    display: none;
  }
}
/* Combined video + bid panel */
.main-auction-panel {
  padding: 16px;
}

.main-auction-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* video wider than bid panel */
  gap: 14px; /* small gap between video and bid section */
  align-items: start;
}

/* Video area sizing */
.main-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

/* Bid/details column */
.main-bid {
  min-width: 260px;
}

/* Responsive fallback: stack on smaller screens */
@media (max-width: 992px) {
  .main-auction-grid {
    grid-template-columns: 1fr;
  }
}
#auction-description {
  max-height: 180px;
  overflow: auto;
}

.auction-layout{
  height: calc(100dvh - 140px); /* use 100vh if you prefer, but 100dvh is better on mobile */
}

/* Let panes stretch to the auction-layout height */
.pane{
  height: 100%;
  min-height: 0; /* important so inner scroll areas can actually shrink */
}

/* Make inner wrapper fill the pane */
.pane-inner{
  height: 100%;
}

/* Override the old fixed chat height so it can flex */
#chat-box{
  height: auto !important;
  min-height: 0;

}



.chat-username {
    font-weight: 700;
    color: #0d6efd;
    padding: 2px 8px;
    border-radius: 8px;
}


/* Justify auction descriptions */
#catalog-description,
#auction-description {
    text-align: justify;
}
/* Align pane tabs to very top of columns */
.pane-tab {
    top: 0 !important;
    transform: none !important;
}
/* New main column layout */
.main-auction-new{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auction-title-hr{
  margin: 0 auto;
  width: 80%;
  opacity: .6;
}

.auction-media-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.auction-media-video iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.auction-media-image{
  display: flex;
  justify-content: center;
  align-items: start;
}

.auction-img{
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 12px;
}

.auction-description-box{
  border-radius: 14px;
  padding: 14px 16px;
  background: #f1f3f5;
  border: 1px solid rgba(255,255,255,0.18);
}

.auction-bid-wrap{
  display: flex;
  justify-content: center;
}

.bid-form-centered{
  width: min(520px, 100%);
}

.auction-stats-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.auction-stats-left{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.auction-stats-right{
  display: flex;
  align-items: center;
}

.bid-inline-form{
  display: flex;
  gap: 10px;
  align-items: center;
}

.bid-inline-form input{
  width: 160px;
}
/* Overlay that sits above everything (no dark backdrop) */
.img-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent; /* key: no dark modal */
}

/* The framed container */
.img-frame{
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  padding: 14px;
}

/* Large image scales down to fit */
.img-frame img{
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 70px);
  border-radius: 10px;
}

/* Close button */
.img-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.modal {
  overflow-y: auto !important;
}

.modal-dialog {
  margin-top: 80px !important; /* pushes modal down from navbar */
}
/* Light gray striping for current auctions table */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f2f2f2 !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #ffffff !important;
}