/* ============================================================
   WEB-EBOOKS — seller.css
   Seller dashboard styles
   ============================================================ */

/* ─── Layout ─────────────────────────────────────────────────── */
.seller-layout {
  display:    flex;
  min-height: 100vh;
  background: var(--blush-pale);
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.seller-sidebar {
  width:           240px;
  flex-shrink:     0;
  background:      linear-gradient(180deg, #2a0a00 0%, #4a1500 60%, #3a0e00 100%);
  display:         flex;
  flex-direction:  column;
  position:        sticky;
  top:             0;
  height:          100vh;
  overflow-y:      auto;
  z-index:         100;
  transition:      transform 0.3s;
}
.sidebar-logo {
  padding:       24px 20px 20px;
  border-bottom: 1px solid rgba(255,150,80,0.15);
  display:       flex;
  align-items:   center;
  gap:           10px;
}
.sidebar-logo img {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid rgba(255,150,80,0.40);
}
.sidebar-logo-text {
  font-family: var(--font);
  font-size:   1rem;
  font-weight: 700;
  font-style:  italic;
  color:       #fff;
}
.sidebar-user {
  padding:       16px 20px;
  border-bottom: 1px solid rgba(255,150,80,0.12);
}
.sidebar-user-name  { font-size: 0.875rem; font-weight: 700; color: #fff; }
.sidebar-user-email { font-size: 0.72rem; color: rgba(255,200,160,0.55); margin-top: 2px; }
.sidebar-user-badge { margin-top: 6px; }

.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-nav-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     11px 20px;
  cursor:      pointer;
  font-size:   0.875rem;
  font-weight: 600;
  color:       rgba(255,200,160,0.65);
  transition:  all 0.18s;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
}
.sidebar-nav-item:hover  { background: rgba(255,150,80,0.10); color: rgba(255,220,180,0.90); }
.sidebar-nav-item.active {
  background:  rgba(255,100,50,0.18);
  color:       #fff;
  border-left: 3px solid var(--coral);
}
.sidebar-nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-nav-badge {
  margin-left:     auto;
  background:      var(--flame);
  color:           #fff;
  font-size:       0.6rem;
  font-weight:     700;
  min-width:       18px;
  height:          18px;
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 4px;
}
.sidebar-section-label {
  padding:        16px 20px 6px;
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          rgba(255,150,80,0.40);
  font-family:    var(--font-ui);
}
.sidebar-footer {
  padding:       16px 20px;
  border-top:    1px solid rgba(255,150,80,0.12);
}

/* ─── Main Content ───────────────────────────────────────────── */
.seller-main {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}
.seller-topbar {
  background:      rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  border-bottom:   1px solid rgba(255,100,50,0.14);
  padding:         0 32px;
  height:          60px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  position:        sticky;
  top:             0;
  z-index:         50;
}
.topbar-title {
  font-family: var(--font);
  font-size:   1.1rem;
  font-weight: 700;
  font-style:  italic;
  color:       var(--ink);
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.seller-content { flex: 1; padding: 32px; }

/* ─── Page Sections ──────────────────────────────────────────── */
.seller-page { display: none; }
.seller-page.active { display: block; }

/* ─── Stats Cards ────────────────────────────────────────────── */
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   20px;
  margin-bottom:         32px;
}
.stat-card {
  background:      rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  border-radius:   var(--radius);
  padding:         22px;
  border:          1px solid rgba(255,100,50,0.14);
  box-shadow:      var(--glass-shadow);
  display:         flex;
  flex-direction:  column;
  gap:             6px;
}
.stat-card-icon  { font-size: 1.6rem; margin-bottom: 4px; }
.stat-card-value {
  font-family: var(--font);
  font-size:   1.9rem;
  font-weight: 700;
  font-style:  italic;
  color:       var(--flame);
  line-height: 1;
}
.stat-card-label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--ink-muted);
  font-family:    var(--font-ui);
}
.stat-card-sub { font-size: 0.78rem; color: var(--ink-muted); margin-top: 2px; }

/* ─── Section Header ─────────────────────────────────────────── */
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   24px;
  padding-bottom:  16px;
  border-bottom:   1px solid rgba(255,100,50,0.14);
}
.page-header h2 { font-style: italic; margin: 0; }
.page-header-actions { display: flex; gap: 10px; }

/* ─── Book List ──────────────────────────────────────────────── */
.books-list { display: flex; flex-direction: column; gap: 14px; }
.book-list-item {
  background:      rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border-radius:   var(--radius);
  border:          1px solid rgba(255,100,50,0.14);
  padding:         16px 20px;
  display:         flex;
  align-items:     center;
  gap:             16px;
  box-shadow:      var(--glass-shadow);
  transition:      box-shadow 0.2s;
}
.book-list-item:hover { box-shadow: var(--glass-shadow-lg); }
.book-list-cover {
  width:         60px;
  height:        80px;
  border-radius: 6px;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--blush);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.5rem;
  border:        1px solid rgba(255,100,50,0.15);
  overflow:      hidden;
}
.book-list-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-list-info { flex: 1; min-width: 0; }
.book-list-title  { font-family: var(--font); font-weight: 700; font-style: italic; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.book-list-meta   { font-size: 0.78rem; color: var(--ink-muted); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.book-list-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Rejection reason */
.rejection-reason {
  background:    rgba(192,40,10,0.07);
  border:        1px solid rgba(192,40,10,0.20);
  border-radius: var(--radius-sm);
  padding:       8px 12px;
  font-size:     0.8rem;
  color:         var(--crimson);
  margin-top:    6px;
}
.rejection-reason strong { display: block; margin-bottom: 2px; }

/* ─── Book Builder ───────────────────────────────────────────── */
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap:     28px;
  align-items: start;
}
.builder-main, .builder-side {
  background:      rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  border-radius:   var(--radius);
  border:          1px solid rgba(255,100,50,0.14);
  padding:         28px;
  box-shadow:      var(--glass-shadow);
}
.builder-section-title {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--flame);
  margin-bottom:  16px;
  padding-bottom: 8px;
  border-bottom:  1px solid rgba(255,100,50,0.14);
  font-family:    var(--font-ui);
}

/* Color pickers */
.color-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.color-picker-item { display: flex; flex-direction: column; gap: 5px; }
.color-picker-item label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-muted); font-family: var(--font-ui); }
.color-picker-item input[type="color"] {
  width:         100%;
  height:        40px;
  border:        1px solid var(--border-solid);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  padding:       2px;
  background:    rgba(255,255,255,0.75);
}

/* Cover upload */
.cover-upload-area {
  border:          2px dashed rgba(255,100,50,0.30);
  border-radius:   var(--radius);
  padding:         24px;
  text-align:      center;
  cursor:          pointer;
  transition:      all 0.2s;
  background:      rgba(255,100,50,0.03);
  position:        relative;
  overflow:        hidden;
}
.cover-upload-area:hover { border-color: var(--coral); background: rgba(255,100,50,0.06); }
.cover-upload-area.has-cover { padding: 0; border-style: solid; }
.cover-upload-area img { width: 100%; height: 220px; object-fit: cover; border-radius: calc(var(--radius) - 2px); display: block; }
.cover-upload-icon  { font-size: 2rem; margin-bottom: 8px; opacity: 0.4; }
.cover-upload-text  { font-size: 0.85rem; color: var(--ink-muted); }
.cover-upload-hint  { font-size: 0.72rem; color: var(--ink-light); margin-top: 4px; }
.cover-change-btn {
  position:   absolute;
  bottom:     8px; right: 8px;
  background: rgba(0,0,0,0.55);
  color:      #fff;
  border:     none;
  border-radius: 6px;
  padding:    5px 10px;
  font-size:  0.75rem;
  cursor:     pointer;
}

/* ─── Chapter Builder ────────────────────────────────────────── */
.chapters-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.chapter-item {
  background:    rgba(255,100,50,0.04);
  border:        1px solid rgba(255,100,50,0.16);
  border-radius: var(--radius-sm);
  overflow:      hidden;
}
.chapter-item-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 14px;
  cursor:      pointer;
  transition:  background 0.15s;
}
.chapter-item-header:hover { background: rgba(255,100,50,0.06); }
.chapter-drag-handle { color: var(--ink-light); cursor: grab; font-size: 1rem; }
.chapter-num   { font-size: 0.72rem; font-weight: 700; color: var(--ink-muted); min-width: 22px; font-family: var(--font-ui); }
.chapter-name  { flex: 1; font-weight: 600; font-style: italic; font-family: var(--font); font-size: 0.9rem; }
.chapter-free-badge {
  font-size:   0.62rem;
  background:  rgba(45,106,45,0.12);
  color:       #1a5c1a;
  padding:     2px 7px;
  border-radius: 20px;
  font-weight: 700;
  font-family: var(--font-ui);
  border:      1px solid rgba(45,106,45,0.22);
}
.chapter-item-body { padding: 0 14px 14px; display: none; }
.chapter-item.open .chapter-item-body { display: block; }
.chapter-item.open .chapter-item-header { background: rgba(255,100,50,0.06); }

/* Chapter fields */
.chapter-fields-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.chapter-field-item {
  background:    rgba(255,255,255,0.70);
  border:        1px solid rgba(255,100,50,0.14);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     0.85rem;
}
.field-type-badge {
  font-size:   0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  padding:     2px 7px;
  border-radius: 20px;
  font-family: var(--font-ui);
  flex-shrink: 0;
}
.field-type-text  { background: rgba(26,58,106,0.10); color: #0c5460; border: 1px solid rgba(26,58,106,0.18); }
.field-type-image { background: rgba(45,106,45,0.10); color: #1a5c1a; border: 1px solid rgba(45,106,45,0.18); }
.field-type-list  { background: rgba(139,96,0,0.10);  color: #856404; border: 1px solid rgba(139,96,0,0.18); }

/* Rich text area */
.chapter-content-area {
  width:         100%;
  min-height:    160px;
  padding:       12px;
  border:        1px solid var(--border-solid);
  border-radius: var(--radius-sm);
  font-size:     0.95rem;
  font-family:   var(--font-body);
  color:         var(--ink);
  background:    rgba(255,255,255,0.80);
  resize:        vertical;
  outline:       none;
  transition:    border-color 0.2s;
  line-height:   1.7;
}
.chapter-content-area:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,100,50,0.10); }

/* ─── Earnings / Wallet ──────────────────────────────────────── */
.wallet-summary {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   16px;
  margin-bottom:         28px;
}
.wallet-card {
  background:      rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border-radius:   var(--radius);
  padding:         20px;
  border:          1px solid rgba(255,100,50,0.14);
  box-shadow:      var(--glass-shadow);
}
.wallet-card-label {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--ink-muted);
  font-family:    var(--font-ui);
  margin-bottom:  6px;
}
.wallet-card-value {
  font-family: var(--font);
  font-size:   1.6rem;
  font-weight: 700;
  font-style:  italic;
  color:       var(--flame);
  line-height: 1;
}
.wallet-card-sub { font-size: 0.75rem; color: var(--ink-muted); margin-top: 4px; }

/* Transaction table */
.tx-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid rgba(255,100,50,0.14); }

/* Withdrawal form */
.withdrawal-form {
  background:      rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border-radius:   var(--radius);
  border:          1px solid rgba(255,100,50,0.14);
  padding:         24px;
  max-width:       480px;
  box-shadow:      var(--glass-shadow);
}

/* ─── Recent Sales ───────────────────────────────────────────── */
.recent-sales-list { display: flex; flex-direction: column; gap: 10px; }
.sale-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 16px;
  background:    rgba(255,255,255,0.65);
  border-radius: var(--radius-sm);
  border:        1px solid rgba(255,100,50,0.12);
  font-size:     0.875rem;
}
.sale-item-book  { flex: 1; font-weight: 600; font-style: italic; font-family: var(--font); }
.sale-item-buyer { color: var(--ink-muted); font-size: 0.78rem; }
.sale-item-amount { font-weight: 700; color: var(--flame); font-family: var(--font); white-space: nowrap; }
.sale-item-date  { font-size: 0.72rem; color: var(--ink-light); white-space: nowrap; }

/* ─── Pending status page ────────────────────────────────────── */
.pending-page {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      60vh;
  text-align:      center;
  padding:         40px;
}
.pending-icon  { font-size: 4rem; margin-bottom: 20px; }
.pending-page h2 { margin-bottom: 10px; font-style: italic; }
.pending-page p  { max-width: 420px; color: var(--ink-muted); }

/* ─── Mobile sidebar toggle ──────────────────────────────────── */
.sidebar-toggle {
  display:         none;
  background:      none;
  border:          none;
  font-size:       1.4rem;
  cursor:          pointer;
  color:           var(--ink);
  padding:         4px;
}
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.45);
  z-index:    99;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-side   { order: -1; }
}
@media (max-width: 768px) {
  .seller-sidebar {
    position:  fixed;
    left:      0; top: 0; bottom: 0;
    transform: translateX(-100%);
    z-index:   200;
  }
  .seller-sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .sidebar-toggle  { display: flex; }
  .seller-content  { padding: 16px; }
  .seller-topbar   { padding: 0 16px; }
  .stats-grid      { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wallet-summary  { grid-template-columns: repeat(2, 1fr); }
  .book-list-item  { flex-wrap: wrap; }
  .book-list-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .stats-grid     { grid-template-columns: 1fr 1fr; }
  .color-pickers  { grid-template-columns: 1fr 1fr; }
}