/* ═══════════════════════════════════════════════════════════════
   DailyUploads — admin area theme.

   Scoped under html.du-admin, which a tiny head script in main.html
   adds only on /admin/ and /moderator/ URLs. That keeps every rule
   away from the public site and away from the user dashboard, and it
   means none of the 46 admin_*.html templates had to be edited — so
   no admin JS hook, id, Angular app root or tab handler is touched.

   The admin templates share one small set of legacy classes, and that
   is what gets recoloured here:
     table.tbl1 tr.hdr td   #444 bar, white text
     tr.hdr td              #666 bar
     table.tbl1 tr td       #c0c0c0 borders, #444 text
     .table_border          #c4c4c4 border
     .table_border-small    #c4c4c4 border
     .settings              #f7f7f7 panel, #c4c4c4 border
     .settings tr.hdr td    #444444 bar
     .tabs li.current       #ebebeb grey
     .sharetabs .box        #f7f7f7 / #e4e4e4
     h2                     #404040
     btn-primary            Bootstrap blue
   Colours, borders, gradients and shadows only. No layout.
═══════════════════════════════════════════════════════════════ */

html.du-admin {
  --dua-ink: #16181b;
  --dua-ink-2: #495057;
  --dua-ink-3: #6c757d;
  --dua-ink-4: #adb5bd;

  --dua-red: #e3000f;
  --dua-red-2: #ff4d57;
  --dua-red-dark: #b8000c;
  --dua-wash: #fff0f1;

  /* Table and panel outlines. #e9ecef read almost invisible on white, so
     these sit near the legacy #c0c0c0 weight while keeping the cooler tone. */
  --dua-line: #ced4da;
  --dua-line-2: #ced4da;
  --dua-soft: #f8f9fb;
  --dua-muted: #f1f3f5;
}

/* ── Headings ───────────────────────────────────────────────── */
html.du-admin h2,
html.du-admin h3,
html.du-admin h4 {
  color: var(--dua-ink);
}

html.du-admin h2 a,
html.du-admin h3 a {
  color: var(--dua-red);
}

/* ── Data tables: header rows ───────────────────────────────────
   Soft header with a red hairline underneath instead of the old
   dark grey bar, so long admin tables still scan easily. */
html.du-admin table.tbl1 tr.hdr td,
html.du-admin table.tbl1 tr.hdr th,
html.du-admin tr.hdr td,
html.du-admin table th {
  background: var(--dua-soft);
  color: var(--dua-ink);
  border-color: var(--dua-line);
  border-bottom: 2px solid var(--dua-red);
  font-weight: 700;
}

html.du-admin table.tbl1 tr.hdr td a,
html.du-admin tr.hdr td a,
html.du-admin table th a {
  color: var(--dua-ink-2);
}

html.du-admin table.tbl1 tr.hdr td a:hover,
html.du-admin tr.hdr td a:hover,
html.du-admin table th a:hover {
  color: var(--dua-red);
}

/* ── Data tables: body ──────────────────────────────────────── */
html.du-admin table.tbl1 tr td,
html.du-admin .table_border table.tbl1 tr td,
html.du-admin .table_border-small table.tbl1 tr td {
  border-color: var(--dua-line);
  color: var(--dua-ink-2);
}

html.du-admin table.tbl1 tr:not(.hdr):hover td {
  background: var(--dua-soft);
}

html.du-admin table.tbl1 tr td a {
  color: var(--dua-red);
}

html.du-admin table.tbl1 tr td a:hover {
  color: var(--dua-red-dark);
}

html.du-admin table.tbl1 tr td b {
  color: var(--dua-ink-2);
}

html.du-admin table.tbl1 tr td small {
  color: var(--dua-ink-3);
}

/* ── Table shells ───────────────────────────────────────────── */
html.du-admin .table_border,
html.du-admin .table_border-small,
html.du-admin .borders,
html.du-admin .wizard {
  border-color: var(--dua-line);
  background: #fff;
}

html.du-admin .table_border table.tbl1 tr.hdr td,
html.du-admin .table_border-small table.tbl1 tr.hdr td {
  background: var(--dua-soft);
  border-color: var(--dua-line);
  color: var(--dua-ink);
}

/* ── Settings panel ─────────────────────────────────────────── */
html.du-admin .settings {
  background: var(--dua-soft);
  border-color: var(--dua-line);
}

html.du-admin .settings table tr td {
  border-color: var(--dua-line);
  background: #fff;
  color: var(--dua-ink-2);
}

html.du-admin .settings table tr:hover td {
  background: var(--dua-soft);
}

html.du-admin .settings table tr.hdr td,
html.du-admin .settings table tr.hdr td:hover,
html.du-admin .settings table.tbl1 tr.hdr td {
  background: var(--dua-soft);
  color: var(--dua-ink);
  border-bottom: 2px solid var(--dua-red);
}

html.du-admin .settings table tr td b {
  color: var(--dua-ink);
}

html.du-admin .settings table tr td small,
html.du-admin .settings table tr td .btext {
  color: var(--dua-ink-3);
}

/* ── Settings / share tabs ──────────────────────────────────── */
html.du-admin .tabs {
  border-bottom-color: var(--dua-line);
}

html.du-admin .tabs li {
  color: var(--dua-ink-3);
  border-color: var(--dua-line);
}

html.du-admin .tabs li:hover {
  background: var(--dua-muted);
  color: var(--dua-ink);
}

html.du-admin .tabs li.current,
html.du-admin .sharetabs .tabs li.current {
  background: #fff;
  color: var(--dua-red);
  box-shadow: inset 0 2px 0 var(--dua-red);
}

html.du-admin .tabs li:first-child {
  border-left-color: var(--dua-line);
}

html.du-admin .sharetabs,
html.du-admin .sharetabs ul.tabs {
  border-color: var(--dua-line);
  background: #fff;
}

html.du-admin .sharetabs .box {
  background: #fff;
  border-color: var(--dua-line);
}

/* ── Paging ─────────────────────────────────────────────────── */
html.du-admin .paging a {
  color: var(--dua-ink-2);
}

html.du-admin .paging a:hover {
  color: var(--dua-red);
}

html.du-admin .paging span {
  color: var(--dua-red);
  font-weight: 700;
}

html.du-admin .paging span.dotted {
  color: var(--dua-ink-4);
  font-weight: 400;
}

/* ── Buttons ────────────────────────────────────────────────────
   Admin screens are dense, so these stay flat brand red rather than
   the gradient-and-glow treatment used on the marketing pages. */
html.du-admin input[type="submit"],
html.du-admin button[type="submit"],
html.du-admin .btn-primary,
html.du-admin .submit-btn {
  background: var(--dua-red);
  background-image: none;
  border-color: var(--dua-red);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 20, .08);
}

html.du-admin input[type="submit"]:hover,
html.du-admin button[type="submit"]:hover,
html.du-admin .btn-primary:hover,
html.du-admin .btn-primary:focus,
html.du-admin .submit-btn:hover {
  background: var(--dua-red-dark);
  border-color: var(--dua-red-dark);
  color: #fff;
}

html.du-admin input[type="button"],
html.du-admin .btn-default,
html.du-admin .btn-secondary {
  background: #fff;
  background-image: none;
  border: 1px solid var(--dua-line-2);
  color: var(--dua-ink-2);
}

html.du-admin input[type="button"]:hover,
html.du-admin .btn-default:hover,
html.du-admin .btn-secondary:hover {
  border-color: var(--dua-red-2);
  color: var(--dua-red);
}

html.du-admin input[type="submit"]:disabled,
html.du-admin input[type="button"]:disabled,
html.du-admin button:disabled {
  background: var(--dua-muted);
  border-color: var(--dua-line);
  color: var(--dua-ink-4);
}

/* ── Form controls ──────────────────────────────────────────── */
html.du-admin input[type="text"],
html.du-admin input[type="email"],
html.du-admin input[type="password"],
html.du-admin input[type="number"],
html.du-admin select,
html.du-admin textarea,
html.du-admin .form-control {
  border-color: var(--dua-line-2);
  color: var(--dua-ink);
  background: #fff;
}

html.du-admin input[type="text"]:focus,
html.du-admin input[type="email"]:focus,
html.du-admin input[type="password"]:focus,
html.du-admin input[type="number"]:focus,
html.du-admin select:focus,
html.du-admin textarea:focus,
html.du-admin .form-control:focus {
  border-color: var(--dua-red-2);
  box-shadow: 0 0 0 3px rgba(227, 0, 15, .12);
  outline: none;
}

html.du-admin input::placeholder,
html.du-admin textarea::placeholder {
  color: var(--dua-ink-4);
}

html.du-admin input[type="checkbox"],
html.du-admin input[type="radio"] {
  accent-color: var(--dua-red);
}

/* ── Links in body copy ─────────────────────────────────────── */
html.du-admin .table_border a,
html.du-admin .table_border-small a,
html.du-admin .settings a:not(.btn) {
  color: var(--dua-red);
}

html.du-admin .table_border a:hover,
html.du-admin .table_border-small a:hover,
html.du-admin .settings a:not(.btn):hover {
  color: var(--dua-red-dark);
}

/* ── Flash / highlight states ───────────────────────────────────
   The settings flash and the search hit rows were both bright #ff9. */
html.du-admin #messages,
html.du-admin #messages[style] {
  background: var(--dua-wash) !important;
  color: var(--dua-red-dark);
}

html.du-admin .tbl1 .search-results td,
html.du-admin .tbl1 .search-results:hover td {
  background: var(--dua-wash);
}

html.du-admin #search-dialog,
html.du-admin #search-results {
  border-color: var(--dua-line);
  background: #fff;
}

/* ── Statistics screenshots had a mid-grey frame ────────────── */
html.du-admin #container img,
html.du-admin #charts img {
  border-color: var(--dua-line-2);
}

/* ── Payments: the paid rows were lime #bef574 ──────────────── */
html.du-admin .tbl1 .payment_green td {
  background: #e9f7ef;
  color: #14683f;
}

/* ── Servers: load bar frame ────────────────────────────────── */
html.du-admin .loadbar {
  background: #fff;
  border-color: var(--dua-line-2);
}

/* ── Install Center: status strip was #222 on a #eee panel ──── */
html.du-admin .status {
  background: var(--dua-ink);
  color: #fff;
}

html.du-admin .errors {
  background: var(--dua-soft) !important;
  border: 1px solid var(--dua-line);
  color: var(--dua-ink-2);
}

html.du-admin .progressbar-outer {
  background: var(--dua-muted);
  border-color: var(--dua-line);
}

html.du-admin .highlight {
  background: var(--dua-wash);
  color: var(--dua-red-dark);
}

html.du-admin .important {
  color: var(--dua-red);
}

/* ── Rows the admin has edited but not yet saved ────────────── */
html.du-admin .changed {
  border-color: var(--dua-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Sidebar — not scoped to du-admin on purpose. The admin pane lives
   in main.html and therefore renders on every logged-in page, so
   these selectors are tied to the sidebar's own ids instead.
═══════════════════════════════════════════════════════════════ */

/* pending-item counts (abuse reports, payments, updates, approvals) */
.sideNav .folder-item a.has-new {
  color: #e3000f;
  font-weight: 600;
}

.sideNav .folder-item a.has-new:hover {
  color: #b8000c;
}

/* admin pane is a long list — give the scrollbar a brand tint */
#step2 {
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 transparent;
}

#step2::-webkit-scrollbar-thumb {
  background: #dee2e6;
}

#step2::-webkit-scrollbar-thumb:hover {
  background: #ff4d57;
}

#step2::-webkit-scrollbar-track {
  background: transparent;
}