/* ═══════════════════════════════════════════════════════════════
   DailyUploads — logged-in dashboard (Account / My Files / Reports).

   Scoped under .du-dash so nothing else on the site is affected.
   Colours, borders, gradients and shadows only: no markup, no JS
   hooks, no layout. Every id and class the page scripts rely on
   (#files_list, #folders_list, #key, .paging, #chart_div, #occupied,
   #files_total, #publish_link, .date, #myTab …) is left untouched.

   What was off-brand here:
     table.tbl1 tr.hdr td   #444 grey header, white text
     .files table th        #666 grey header
     account table rows     #ededed / #f9f9f9 in Calibri
     .indicator .occupied   #4692c3 — a blue storage bar
     .card-header           Bootstrap bg-secondary grey
     .btn-danger            Bootstrap #dc3545
     button[type=submit]    hard-coded #da2017
   All of it now uses the home page palette.
═══════════════════════════════════════════════════════════════ */

.du-dash {
  --dud-ink: #16181b;
  --dud-ink-2: #495057;
  --dud-ink-3: #6c757d;
  --dud-ink-4: #adb5bd;

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

  /* Matches the admin area: #e9ecef was too faint to read on white. */
  --dud-line: #ced4da;
  --dud-soft: #f8f9fb;
  --dud-muted: #f1f3f5;

  --dud-grad: linear-gradient(150deg, #ff4d57, #e3000f 52%, #b8000c);
  --dud-grad-hover: linear-gradient(150deg, #ff5f68, #d1000e 52%, #a30009);
}

/* ── Headings and intro copy ────────────────────────────────── */
.du-dash h2,
.du-dash h3,
.du-dash h4 {
  color: var(--dud-ink);
}

.du-dash > p.small,
.du-dash .text-muted {
  color: var(--dud-ink-3) !important;
}

/* ── Cards ──────────────────────────────────────────────────── */
.du-dash .card {
  background: #fff;
  border-color: var(--dud-line);
  box-shadow: 0 1px 2px rgba(16, 18, 20, .05);
}

.du-dash .card.bg-light {
  background: var(--dud-soft) !important;
}

.du-dash .card.shadow-sm {
  box-shadow: 0 8px 24px rgba(16, 18, 20, .07) !important;
}

/* ── Stat tiles ─────────────────────────────────────────────── */
.du-dash .trust-pill {
  background: #fff;
  border-color: var(--dud-line);
  color: var(--dud-ink-2);
}

.du-dash .stat-icon {
  background: var(--dud-wash);
}

.du-dash .stat-icon svg {
  stroke: var(--dud-red);
}

.du-dash .trust-pill i {
  color: var(--dud-red);
}

.du-dash .stat-value-static {
  color: var(--dud-ink);
}

.du-dash .stat-label {
  color: var(--dud-ink-3);
}

/* the small circular arrow links were filled green */
.du-dash .stat-label svg path {
  fill: var(--dud-red);
}

/* ── Account tabs ───────────────────────────────────────────── */
.du-dash .nav-tabs {
  border-bottom-color: var(--dud-line);
}

.du-dash #myTab a.nav-link {
  color: var(--dud-ink-3) !important;
  background: var(--dud-soft);
  border-color: var(--dud-line);
}

.du-dash #myTab a.nav-link:hover {
  color: var(--dud-ink) !important;
  background: var(--dud-muted);
}

.du-dash #myTab a.nav-link.active {
  color: var(--dud-red) !important;
  background: #fff;
  border-color: var(--dud-line);
  border-bottom-color: #fff;
  box-shadow: inset 0 2px 0 var(--dud-red);
}

/* ── Section header rows (tbl1) ─────────────────────────────────
   These were dark grey #444 with white text. */
.du-dash table.tbl1 tr.hdr td,
.du-dash tr.hdr td {
  background: var(--dud-soft);
  border-color: var(--dud-line);
  color: var(--dud-ink);
  font-weight: 700;
}

.du-dash table.tbl1 tr.hdr td a,
.du-dash tr.hdr td a {
  color: var(--dud-red);
}

.du-dash table.tbl1 tr td {
  border-color: var(--dud-line);
  color: var(--dud-ink-2);
}

/* ── Account settings tables ────────────────────────────────────
   Were #ededed / #f9f9f9 stripes set in Calibri. */
.du-dash.accounts table > tbody > tr > td {
  background: var(--dud-soft);
  border-top-color: var(--dud-line);
  color: var(--dud-ink-2);
  font-family: 'Inter', system-ui, sans-serif;
}

.du-dash.accounts table > tbody > tr:nth-child(2n+1) > td {
  background: #fff;
  border-top-color: var(--dud-line);
}

.du-dash.accounts table.tbl1 tr.hdr td {
  background: var(--dud-soft);
  color: var(--dud-ink);
}

/* ── Files and folders tables ───────────────────────────────── */
.du-dash .files table th,
.du-dash .files tr.hdr td,
.du-dash .folders table th,
.du-dash .folders tr.hdr td {
  background: var(--dud-soft);
  border-bottom: 1px solid var(--dud-line);
  color: var(--dud-ink);
}

.du-dash .files table th a,
.du-dash .files tr.hdr td a,
.du-dash .folders table th a {
  color: var(--dud-ink-2);
}

.du-dash .files table th a:hover,
.du-dash .folders table th a:hover {
  color: var(--dud-red);
}

/* ── Reports table ──────────────────────────────────────────── */
.du-dash .table > :not(caption) > * > * {
  border-color: var(--dud-line);
}

.du-dash .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: var(--dud-soft);
  color: var(--dud-ink-2);
}

.du-dash .table td {
  color: var(--dud-ink-2);
}

.du-dash .table a {
  color: var(--dud-red);
}

.du-dash .table a:hover {
  color: var(--dud-red-dark);
}

/* ── Card headers (My Files) — were Bootstrap grey ──────────── */
.du-dash .card-header.bg-secondary {
  background: var(--dud-grad) !important;
  border-bottom-color: transparent;
}

.du-dash .card-header .btn-outline-light {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.du-dash .card-header .btn-outline-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--dud-red-dark);
}

/* ── Buttons ────────────────────────────────────────────────── */
.du-dash .btn-danger,
.du-dash .submit-btn,
.du-dash button[type="submit"],
.du-dash input[type="submit"] {
  background: var(--dud-grad);
  background-color: var(--dud-red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(227, 0, 15, .24);
}

.du-dash .btn-danger:hover,
.du-dash .btn-danger:focus,
.du-dash .submit-btn:hover,
.du-dash .submit-btn:focus,
.du-dash button[type="submit"]:hover,
.du-dash input[type="submit"]:hover {
  background: var(--dud-grad-hover);
  background-color: var(--dud-red-dark);
  color: #fff;
  box-shadow: 0 12px 26px rgba(227, 0, 15, .32);
}

/* small inline submits inside settings tables get a restrained shadow,
   otherwise the glow bleeds across the table cell */
.du-dash table input[type="submit"] {
  box-shadow: 0 2px 6px rgba(227, 0, 15, .18);
}

/* plain push buttons stay quiet so they do not compete with submits */
.du-dash input[type="button"] {
  background: #fff;
  border: 1px solid var(--dud-line);
  color: var(--dud-ink-2);
}

.du-dash input[type="button"]:hover {
  border-color: var(--dud-red-2);
  color: var(--dud-red);
}

/* ── Badges ─────────────────────────────────────────────────── */
.du-dash .badge.bg-secondary {
  background: var(--dud-wash) !important;
  color: var(--dud-red-dark);
}

/* ── Storage indicator — the bar was blue and had no height ─── */
.du-dash .indicator {
  background: var(--dud-muted);
}

.du-dash .indicator .occupied {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dud-red-2), var(--dud-red));
}

/* ── Status pills ───────────────────────────────────────────── */
.du-dash .disbl,
.du-dash .disbl:hover {
  background: #1a9e6b;
  color: #fff;
}

.du-dash .enbl,
.du-dash .enbl:hover {
  background: var(--dud-red);
  color: #fff;
}

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

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

.du-dash input::placeholder,
.du-dash textarea::placeholder,
.du-dash .form-control::placeholder {
  color: var(--dud-ink-4);
}

.du-dash input[type="checkbox"] {
  accent-color: var(--dud-red);
}

/* ── Utility borders used across these pages ────────────────── */
.du-dash .borders,
.du-dash .filesInner {
  border-color: var(--dud-line);
}

/* ── Links inside account panels ─────────────────────────────────
   Kept to .accounts on purpose: on My Files the folder and file names
   also sit inside .card, and turning every one of them red would be
   far too loud. */
.du-dash.accounts .card a:not(.btn):not(.nav-link) {
  color: var(--dud-red);
}

.du-dash.accounts .card a:not(.btn):not(.nav-link):hover {
  color: var(--dud-red-dark);
}

/* ── Paging ─────────────────────────────────────────────────── */
.du-dash .paging a,
.du-dash .paging2 a {
  color: var(--dud-ink-2);
}

.du-dash .paging a:hover,
.du-dash .paging2 a:hover {
  color: var(--dud-red);
}

.du-dash .paging span,
.du-dash .paging2 span {
  color: var(--dud-red);
  font-weight: 700;
}

/* ── Empty chart message ────────────────────────────────────── */
.du-dash #chart_div {
  color: var(--dud-ink-3);
}

/* Wide file tables keep their columns; the page scrolls sideways
   on a phone instead of blowing the layout. */
.du-dash {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}