/* ═══════════════════════════════════════════════════════════════
   DARK-PURPLE THEME  (Bootstrap-5 override)
   put this BEFORE any other custom rules
════════════════════════════════════════════════════════════════ */

:root {
  /* main colours */
  --dark-bg-900:   #111118;     /* page background      */
  --dark-bg-800:   #181824;     /* cards / modals       */
  --dark-border:   #2a2a3c;
  --purple-500:    #8b5cf6;     /* accent               */
  --purple-600:    #7c3aed;     /* accent-hover         */

  /* bootstrap variable overrides */
  --bs-body-bg:        var(--dark-bg-900);
  --bs-body-color:     #e4e4e7;                /* light text      */
  --bs-border-color:   var(--dark-border);

  --bs-primary:        var(--purple-500);
  --bs-primary-rgb:    139, 92, 246;

  --bs-link-color:      var(--purple-500);
  --bs-link-hover-color:var(--purple-600);

  --bs-success:        #22c55e;
  --bs-success-rgb:    34, 197, 94;

  --bs-danger:         #ef4444;
  --bs-danger-rgb:     239, 68, 68;
}

/* page background ------------------------------------------------*/
html, body{background:var(--dark-bg-900)!important; color:var(--bs-body-color);}

/* CARD / MODAL / DROPDOWN surfaces -------------------------------*/
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item,
.table, .alert, .accordion-body, .progress,
.popover, .tooltip-inner {
  background-color: var(--dark-bg-800);
  color: var(--bs-body-color);
  border-color: var(--dark-border)!important;
}

/* TABLE header shading */
.table thead { background-color: #20202d; }

/* INPUTS ----------------------------------------------------------*/
.form-control, .form-select, textarea {
  background-color:#1e1e2e;
  color:#e4e4e7;
  border-color:var(--dark-border);
}
.form-control::placeholder { color:#888; }

/* focus ring */
.form-control:focus, .form-select:focus {
  background-color:#222232;
  border-color:var(--purple-500);
  box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* BUTTONS ---------------------------------------------------------*/
.btn-primary,
.progress-bar.bg-primary,
.badge.bg-primary {
  background-color:var(--purple-500)!important;
  border-color:var(--purple-500)!important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color:var(--purple-600)!important;
  border-color:var(--purple-600)!important;
}

.btn-outline-primary {
  color:var(--purple-500); border-color:var(--purple-500);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color:#fff;
  background-color:var(--purple-500);
  border-color:var(--purple-500);
}

.btn { border-radius:.375rem; }

/* LINK hover ------------------------------------------------------*/
a { color:var(--purple-500); }
a:hover { color:var(--purple-600); }

/* MISC  -----------------------------------------------------------*/
.progress-bar { color:#fff; }
.alert-success { background:#16332a; color:#b4f0c7; border-color:#1e4d3c; }
.alert-danger  { background:#3d1616; color:#f8b4b4; border-color:#642020; }

/* keep YouTube/Facebook brand buttons readable on dark bg --------*/
.platform-youtube   { background:#ff0000; color:#fff; }
.platform-facebook  { background:#1877f2; color:#fff; }
.platform-instagram { background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af); color:#fff; }
.platform-tiktok    { background:#000; color:#fff; }

/* ────────────────────────────────────────────────────────────────
   YOUR ORIGINAL RULES  –  keep as-is
   ──────────────────────────────────────────────────────────────── */
body{font-family:Arial;background:#faf2e7;margin:1em 5%}
.flash.success{color:green}

/* Upload Modal Styles */
#uploadModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#uploadProgressModal .progress {
    height: 25px;
}

#uploadProgressModal .progress-bar {
    font-size: 14px;
    line-height: 25px;
}

.video-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.video-controls button,
.video-controls a {
    min-width: 150px;
}

/* Platform-specific styling */
.platform-youtube {
    background-color: #ff0000;
    color: white;
}

.platform-facebook {
    background-color: #1877f2;
    color: white;
}

.platform-instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
    color: white;
}

.platform-tiktok {
    background-color: #000000;
    color: white;
}

#clipTable
.preview video.clip-thumb {
  width:110px;
  height:70px;
}

/* ─── nav-tabs in dark mode ───────────────────────────────────── */

.nav-tabs {
  border-bottom: 1px solid var(--dark-border);
}

.nav-tabs .nav-link {
  color: #b3b3c6;                       /* inactive text */
  border: 1px solid transparent;
  margin-bottom: -1px;                  /* keep baseline */
}

.nav-tabs .nav-link:hover {
  color: #fff;
}

/* active tab (and dropdown) in dark theme ---------------------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff;                               /* text colour           */
  background-color: var(--purple-500);       /* pill background       */
  border-color: var(--purple-500)            /* top   border          */
               var(--purple-500)             /* right border          */
               var(--dark-bg-900)            /* bottom border blends  */
               var(--purple-500);            /* left  border          */
}
/* ─── Dark-mode table fix (clips list) ───────────────────────── */

.table {
  color: #e4e4e7;                     /* light foreground */
  background-color: transparent;      /* keep dark bg */
  border-color: var(--dark-border);
}

.table th,
.table td {
  border-color: var(--dark-border);   /* thin grid lines */
}

/* header cells a bit brighter */
.table thead th {
  color: #fff;
  background-color: #20202d;          /* already set earlier, keep */
}

/* zebra rows – subtle violet tint so selection is visible       */
.table tbody tr:nth-child(even) td {
  background-color: rgba(139, 92, 246, .04);   /* purple-500 @ 4% */
}

/* ─── force light text inside every table cell ───────────────── */

.table td,
.table th,
.table thead th,
.table tbody td,
.table tbody th {
  color: #e4e4e7 !important;       /* overrides Bootstrap's #212529 */
}

/* keep header a bit brighter */
.table thead th {
  color: #ffffff !important;
}

/* optional: row hover highlights */
.table-hover tbody tr:hover > td {
  background-color: rgba(139, 92, 246, .08);
}

/* ─── dark-theme helper text (form-text, muted, small) ─────────── */

.form-text,
.text-muted,
.small,
small {
  color: #b0b0c5 !important;      /* soft light-grey, tweak as you like */
}

/* counter under the description box uses #888 in previous rule;
   optional: make it even dimmer or brighter                          */
#descriptionCount {
  color: #b0b0c5;
}

/* ═══════════════════════════════════════════════════════════════
   DARK-PURPLE THEME  (Bootstrap-5 override)
   put this BEFORE any other custom rules
════════════════════════════════════════════════════════════════ */

/*  …  (all your existing rules stay exactly the same)  …  */

/* ─── dark-theme helper text (form-text, muted, small) ─────────── */

.form-text,
.text-muted,
.small,
small {
  color: #b0b0c5 !important;
}

/* counter under the description box uses #888 in previous rule;
   optional: make it even dimmer or brighter                          */
#descriptionCount {
  color: #b0b0c5;
}

/* ────────────────────────────────────────────────────────────────
   NEW: File-upload “Browse…” button dark-mode fix
   ──────────────────────────────────────────────────────────────── */

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {   /* Chrome / Safari alias */
  padding: .375rem .75rem;          /* match Bootstrap .btn        */
  border-radius: .375rem;           /* same rounded corners        */
  border: 1px solid #6c757d;        /* same grey as .btn-secondary */
  background-color: #6c757d;        /* grey background             */
  color: #fff;                      /* white text for contrast     */
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:focus,
input[type="file"]::-webkit-file-upload-button:focus {
  background-color: #5a6268;        /* slightly darker on hover    */
  border-color: #5a6268;
  outline: none;
}

/* ─── Progress banner (Save & Regenerate) colour fix ───────────── */
#regen-banner{
  background-color: var(--purple-500) !important;  /* violet bar   */
  color:#fff !important;                           /* white text   */
}

/* unified status banner */
.status-banner{
  background-color: var(--purple-500);
  color:#fff;
  border:none;
}

/* ═══  Purple alert used by bypass/status banners  ═══ */
.alert-purple{
  background-color: var(--purple-500);
  color:#fff;
  border:none;
}

/* ===========================================================
   Bootstrap-Select: keep the *original* <select> hidden,
   overriding Bootstrap-5’s .form-select {display:block}
   =========================================================== */
select.bs-select-hidden {
    display: none !important;      /* never show */
    visibility: hidden !important; /* belt-and-braces */
}

/* style.css – add at the end */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    background-color:#2d2d3d !important;   /* darker bg */
    color:#c0c0d0 !important;              /* lighter text */
    opacity:1 !important;                  /* override Bootstrap default */
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.table td, .table th {
  white-space: nowrap;        /* keeps compact cells like dates on one line */
  overflow: hidden;
  text-overflow: ellipsis;    /* works with table-layout: fixed */
}

.table td.text-truncate,
.table th.text-truncate {
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  /* on screens below xl, reduce font a tad for better fit */
  .table td, .table th { font-size: 0.95rem; }
}

html { -webkit-text-size-adjust: 100%; }