/* modern.css - Includes common styles and modern-specific rules from both buyer.ejs and seller.ejs */

:root{
    --accent:#2563eb;
    --accent-soft:#e0edff;
    --accent-weak:#93c5fd;
    --success:#16a34a;
    --danger:#ef4444;
    --warning:#f59e0b;
    --text-main:#0f172a;
    --text-muted:#6b7280;
    --neon-light:#b7ffbf;
  }

  html,body{
    height:100%;
  }

  body{
    margin:0;
    font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
    transition: background-color .25s ease, color .25s ease;
  }

  /* ————————————————————
     CUSTOM SWITCH – MODERN & OLDSCHOOL
     ———————————————————— */
  .custom-switch {
    -webkit-appearance: none;
    appearance: none;
    width: 3.2em;
    height: 1.8em;
    background: #cbd5e0;
    border-radius: 1.8em;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 0;
  }
  .custom-switch::before {
    content: '';
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: white;
    top: 0.2em;
    left: 0.2em;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .custom-switch:checked {
    background: var(--accent);
  }
  .custom-switch:checked::before {
    transform: translateX(1.4em);
  }
  .custom-switch:focus {
    box-shadow: 0 0 0 0.25rem rgba(37,99,235,.25);
  }

  /* SWITCH STRUCTURE */
  .form-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }
  .form-switch .form-check-input {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    cursor: pointer;
    opacity: 1;
    margin-left: 0;
  }
  .form-switch .form-check-label {
    cursor: default !important;
    user-select: none;
    margin: 0;
    font-size: .9rem;
  }
  .custom-switch:checked + .form-check-label {
    font-weight: 600;
  }

  /* -------------------------
     THEME: MODERN (DEFAULT)
  --------------------------*/
  body.theme-modern{
    background:#f3f4f6;
    color:var(--text-main);
  }
  body.theme-modern .app-shell{max-width:1120px;}
  body.theme-modern header.app-header{padding:0;margin-bottom:1.75rem;}
  body.theme-modern .brand-row{
    background:#ffffff;border-radius:18px;border:1px solid #e5e7eb;
    padding:.85rem 1.25rem;margin-bottom:1.25rem;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
  }
  body.theme-modern .brand-mark{
    display:flex;align-items:center;gap:.5rem;font-weight:700;
    font-size:1.05rem;color:#111827;
  }
  body.theme-modern .brand-mark i{font-size:1.1rem;color:#f97316;}
  body.theme-modern .brand-menu{font-size:1.1rem;color:#9ca3af;}
  body.theme-modern .hero-title{font-size:1.9rem;font-weight:700;color:#111827;}
  body.theme-modern .hero-subtitle{font-size:1rem;color:var(--text-muted);}
  body.theme-modern .card{
    background:#ffffff;border-radius:18px;border:1px solid #e5e7eb;
    box-shadow:0 22px 50px rgba(15,23,42,.08);
  }
  body.theme-modern .muted{color:var(--text-muted);}
  body.theme-modern .btn-electric{
    background:var(--accent);color:#ffffff;border:none;font-weight:600;
    box-shadow:0 8px 18px rgba(37,99,235,.35);
  }
  body.theme-modern .btn-electric:hover{background:#1d4ed8;}
  body.theme-modern .btn-outline-electric{
    border-radius:999px;border:1px solid var(--accent);color:var(--accent);
    font-weight:500;background:#ffffff;
  }
  body.theme-modern .btn-outline-electric:hover{
    background:var(--accent-soft);color:var(--accent);
  }
  body.theme-modern .step-title{
    font-size:.9rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.12em;color:var(--text-muted);
  }
  body.theme-modern .status{
    border-radius:999px;padding:.2rem .75rem;font-weight:600;font-size:.8rem;
  }
  body.theme-modern .status.active{
    background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.6);color:#166534;
  }
  body.theme-modern .status.pending{
    background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.6);color:#c2410c;
  }
  body.theme-modern .status.paused{
    background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.6);color:#b91c1c;
  }
  body.theme-modern .kpi{font-size:1.6rem;font-weight:700;color:#0f172a;}
  body.theme-modern .kpi-label{
    font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
    color:var(--text-muted);
  }
  body.theme-modern .table-dark{
    --bs-table-bg:#ffffff;--bs-table-striped-bg:#f9fafb;
    --bs-table-striped-color:#111827;--bs-table-hover-bg:#eef2ff;
    color:#111827;border-radius:12px;overflow:hidden;
  }
  body.theme-modern .table-dark thead tr{
    background:#f3f4f6;text-transform:uppercase;letter-spacing:.08em;
    font-size:.75rem;color:var(--text-muted);
  }
  body.theme-modern .table-dark td{font-size:.85rem;}
  body.theme-modern a.link{color:#2563eb;text-decoration:none;font-weight:500;}
  body.theme-modern a.link:hover{text-decoration:underline;}
  body.theme-modern .nav-pills .nav-link{
    border-radius:999px;padding:.35rem .9rem;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);
  }
  body.theme-modern .nav-pills .nav-link.active{
    background:#111827;color:#f9fafb;
  }
  body.theme-modern .pagination .page-link{border-radius:999px;font-size:.8rem;}
  body.theme-modern #inlineMsg .alert{border-radius:12px;border:none;}

  /* Ensure dark text */
  body.theme-modern .table-dark tbody tr td,
  body.theme-modern .table-dark tbody tr th {
    color: #111827 !important;
  }

  /* Add seller's extra for even rows */
  body.theme-modern .table-dark tbody tr:nth-child(even) td,
  body.theme-modern .table-dark tbody tr:nth-child(even) th {
    color: #111827 !important;
  }

  /* Auto-resize the "current / total" line so it always fits */
  .kpi-main-available{
    white-space: nowrap;
    font-size: clamp(1rem, 5.5vw, 2.1rem);
  }

  @media (max-width: 768px){
    .kpi-main-available{
      font-size: 1.1rem;
    }
  }

  @media (max-width: 400px){
    .kpi-main-available{
      font-size: 0.95rem;
    }
  }

  /* SHARED HEADER CONTROLS (same as seller) */
  .header-controls{
    align-items:flex-end;
  }

  /* PRIVACY TOGGLE */
  .privacy-toggle{font-size:.8rem;}
  .privacy-toggle-inner{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;}
  .privacy-toggle-input{position:absolute;opacity:0;pointer-events:none;}
  .privacy-toggle-slider{width:2.6em;height:1.4em;border-radius:1.4em;position:relative;flex-shrink:0;transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;}
  .privacy-toggle-slider::before{content:'';position:absolute;width:1.1em;height:1.1em;border-radius:50%;top:0.15em;left:0.2em;transition:transform .25s ease, background .25s ease, box-shadow .25s ease;}
  .privacy-toggle-label{user-select:none;}

  body.theme-modern .privacy-toggle-slider{background:#e5e7eb;box-shadow:0 1px 3px rgba(15,23,42,.12);}
  body.theme-modern .privacy-toggle-slider::before{background:#ffffff;box-shadow:0 2px 5px rgba(15,23,42,.25);}
  body.theme-modern .privacy-toggle-input:checked + .privacy-toggle-slider{background:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18);}
  body.theme-modern .privacy-toggle-input:checked + .privacy-toggle-slider::before{transform:translateX(1.1em);}

  .theme-toggle{display:flex;gap:.5rem;justify-content:flex-end;}
  .theme-toggle button{padding:.2rem .9rem;border-radius:999px;font-size:.8rem;}
  .app-shell{max-width:1160px;}

  /* INPUT + SELECT THEME STYLES (same as seller) */
  body.theme-modern .form-control,
  body.theme-modern .form-select {
    background-color:#f8fafc;
    color:#0f172a;
    border-radius:10px;
    border:1px solid #d1d5db;
    font-size:.9rem;
  }
  body.theme-modern .form-control:focus,
  body.theme-modern .form-select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 .15rem rgba(37,99,235,.25);
  }

  /* TABLE TEXT COLOR FIX */
  #ordersBody small.text-muted,
  .table-dark td small.text-muted{
    color:var(--neon-light) !important;opacity:0.85;font-weight:normal;
  }

  /* MOBILE */
  @media (max-width: 768px) {
    .app-shell{
      padding-left:1rem;
      padding-right:1rem;
      overflow-x:hidden;
    }
    header.app-header{
      margin-bottom:1.25rem;
    }
    .hero-title{font-size:1.4rem;}
    .hero-subtitle{font-size:.9rem;}
    .theme-toggle{justify-content:center;}
    .card{padding:1rem;}
    .table-responsive{font-size:.8rem;}
    .table-responsive table{width:100%;}
    .status{font-size:.7rem;padding:.15rem .6rem;}
  }

  /* --- tidy header on mobile --- */
  @media (max-width: 768px) {
    #pageNavButtons{
      flex-direction: column;
      align-items: stretch;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }

    #pageNavButtons .btn{
      width: 100%;
      justify-content: center;
    }

    .header-controls{
      align-items: center !important;
      width: 100%;
    }

    .header-controls .theme-toggle{
      justify-content: center;
      width: 100%;
    }

    .header-controls .privacy-toggle{
      align-self: center;
    }
  }

  /* Remove spinner arrows from number inputs */
#amount::-webkit-outer-spin-button,
#amount::-webkit-inner-spin-button,
#customPrice::-webkit-outer-spin-button,
#customPrice::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.theme-modern .card {
  background-color: #fff; /* White background for cards */
  border: 1px solid #ddd; /* Light border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.theme-modern .table {
  background-color: #fff; /* White table background */
}

.theme-modern .table thead th {
  background-color: #f8f9fa; /* Light gray header */
  color: #333; /* Dark text */
}

.theme-modern .table td, .theme-modern .table th {
  border-color: #ddd; /* Light borders */
}

.theme-modern .progress {
  background-color: #e9ecef; /* Light gray empty bar */
  border-radius: 4px; /* Rounded */
  height: 20px; /* Taller bar for better visibility */
}

.theme-modern .progress-bar-modern {
  background-color: #00bfff !important; /* Bright blue fill (adjust to match btn-electric if needed) */
  color: #fff; /* White text */
  font-weight: bold;
  text-align: center;
  line-height: 20px; /* Center text vertically */
}
body.theme-modern #logBox {
  background: #f8f9fa; /* Light gray, matches table headers */
  color: #0f172a; /* Dark text */
}

/* modern.css */
body.theme-modern .modal-content {
  background: #ffffff;
  color: #0f172a;
}
body.theme-modern .modal-header {
  border-bottom: 1px solid #e5e7eb;
}