html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Naitik AI - UI tweaks */
:root{
  --brand-color: #5B6CFF;
  --accent-color: #00D4FF;
  --bg-color: #f5f7fb;
  --muted: #6c757d;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Poppins", var(--font-sans);
}

html,body{
  height:100%;
  background: var(--bg-color);
  font-family: var(--font-sans);
  color: #0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { text-decoration: none; }

/* Brand */
.navbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.navbar .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-color);
  display:flex;
  align-items:center;
  gap: .5rem;
}
.brand-accent { color: var(--accent-color); }

/* Layout */
.container { max-width: 980px; }

/* Headings */
h1,h2,h3 {
  font-family: var(--font-heading);
  color: #0b1220;
  margin-bottom: .6rem;
}

/* Card styling */
.card {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
  padding: 1.25rem;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(90deg, var(--brand-color), #4059f3);
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(64,89,243,0.12);
}
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-1px);
  filter: brightness(.98);
}

/* File input & preview */
input[type="file"] {
  border-radius: 8px;
}

/* Centered, responsive media preview - smaller desktop max width */
#mediaPreview {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

/* Video: responsive but constrained to a smaller size for a neater layout */
#mediaPreview video {
  width: 100%;
  max-width: 560px; /* smaller preview on desktop */
  max-height: 320px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.04);
  background: #000;
}

/* Audio: keep matching width to the video preview */
#mediaPreview audio {
  width: 100%;
  max-width: 560px;
  border-radius: 8px;
}

/* Upload steps */
#uploadStepsWrap { padding: .6rem .75rem; border-radius: 8px; }
#uploadSteps li { display:flex; align-items:center; gap:.6rem; font-weight:600; padding:.25rem 0; }
#uploadSteps .tick { color:#18a558; font-weight:700; font-size:1.05rem; }

/* Spinner modal (slight polish) */
#spinnerModal {
  backdrop-filter: blur(3px);
}
#spinnerModal > div { border-radius:10px; }

/* Footer */
.footer { padding: 1.2rem 0; color: var(--muted); }

/* Small utilities */
.small.text-muted { color: var(--muted) !important; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .navbar .navbar-brand { font-size: 1rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* narrower preview on small screens */
  #mediaPreview video,
  #mediaPreview audio {
    max-width: 100%;
    max-height: 220px;
  }
}

/* Moderation Table */
.moderation-table {
    font-size: 0.95rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.moderation-table th, .moderation-table td {
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
}

.moderation-table tbody tr:hover {
    background-color: #f5f5fa;
    transition: background 0.2s;
}

/* ---- New: prevent Avg Conf from wrapping and align numbers ---- */
.moderation-table th.avg-conf,
.moderation-table td.avg-conf {
    white-space: nowrap;              /* prevents number and % from splitting */
    text-align: right;                /* align numeric column to right */
    min-width: 4.5rem;                /* ensure enough width for values like 100.0% */
    font-variant-numeric: tabular-nums; /* consistent digit widths for better alignment */
    padding-right: 1rem;
}