/* =========================================================================
   re-dash Dashboard Cards — Visual Polish
   Spec: docs/superpowers/specs/2026-05-24-dashboard-card-visual-polish-design.md
   All rules are scoped under .rel-ajax-card to avoid leaking outside the
   three target cards (My Tasks, All Assigned Projects, My Issues).
   ========================================================================= */

:root {
  /* Foreground */
  --re-dash-fg:             #0f172a;
  --re-dash-fg-secondary:   #475569;
  --re-dash-fg-muted:       #64748b;
  --re-dash-fg-placeholder: #94a3b8;
  --re-dash-fg-inverse:     #ffffff;

  /* Surface */
  --re-dash-bg:             #ffffff;
  --re-dash-bg-header:      #f8fafc;
  --re-dash-bg-row-hover:   #fafbff;
  --re-dash-card-header:    #0d2440;

  /* Borders */
  --re-dash-border:         #e2e8f0;
  --re-dash-border-light:   #f1f5f9;

  /* Spacing scale */
  /* Brand + semantic colours. Migrated from the screen-scoped `--g/--amber/--blue/
     --red` set that used to live in style.css:439 (and was copy-pasted at :657 and
     :1569). One declaration, on :root, so every screen gets them — including
     my-account, which shares this stylesheet. */
  --re-dash-success:        #10c018;
  --re-dash-success-dark:   #0ea016;
  --re-dash-success-soft:   #eaf7e6;
  --re-dash-warning:        #b56b00;
  --re-dash-warning-dark:   #9f5e00;
  --re-dash-warning-soft:   #fff6e6;
  --re-dash-info:           #2f72d6;
  --re-dash-info-dark:      #2964bc;
  --re-dash-info-soft:      #eaf2fc;
  --re-dash-danger:         #e0413b;
  --re-dash-danger-dark:    #c53934;
  --re-dash-danger-soft:    #fdeceb;

  /* Neutral slate — shared by .btn-inverse AND .btn-dark (Bootstrap's own
     #343a40 was never a deliberate choice, just the unstyled default). One
     token family, two selectors, same button. */
  --re-dash-inverse:        #37474f;
  --re-dash-inverse-hover:  #4c626d;
  --re-dash-inverse-active: #1e272b;

  /* Brand green — the COLOR constant (#0cbd18) used for primary actions and
     accents. Distinct from --re-dash-success, which is the semantic "this went
     well" green; they were two different hexes doing overlapping jobs. */
  --re-dash-brand:          #0cbd18;
  --re-dash-brand-dark:     #10a01b;

  /* Control sizing for the filter strip. Values, not overrides: the rules that
     use these win on normal specificity (.pcoded-content .x is 0,2,0 against
     AdminDek's .form-control at 0,1,0) and our sheet loads later, so no
     !important is needed to hold them. */
  --re-dash-control-h:      42px;
  --re-dash-control-radius: 8px;

  /* Component tokens — a genuine component decision, POINTING AT the set above so
     they cannot drift from it. Only the outgoing-bubble green is chat-specific;
     everything else the chat needs already has a name. */
  --re-dash-chat-out:       #e7f7e8;
  --re-dash-chat-out-line:  #cdead0;

  /* Projects-view tab badges — "something here needs attention", not an
     error, so it points at warning rather than danger. */
  --re-dash-tab-badge:      var(--re-dash-warning);
  --re-dash-tab-badge-soft: var(--re-dash-warning-soft);

  /* Tooltips. A genuine component decision (dark chip on light UI), so it gets
     its own names — but the colours POINT AT the main set, they don't restate
     it. Sizing lives here too so every tooltip on the panel is one shape. */
  --re-dash-tooltip-bg:     var(--re-dash-fg);
  --re-dash-tooltip-fg:     var(--re-dash-fg-inverse);
  --re-dash-tooltip-radius: 6px;
  --re-dash-tooltip-max:    320px;

  --re-dash-cell-py:        10px;
  --re-dash-cell-px:        10px;
}

/* -------------------------------------------------------------------------
   Projects-view tabs (view-projects-view.php) — structure is AdminDek's own
   nav-tabs/tab-content; only the badge is bespoke.
   ------------------------------------------------------------------------- */
.odr-tab-badge {
  margin-left: 6px;
  color: var(--re-dash-tab-badge);
  background: var(--re-dash-tab-badge-soft);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Sitewide colour utilities — the token-backed replacements for Bootstrap's
   .text-danger / .text-success / .text-warning / .text-info / .text-muted /
   .text-secondary. Those are a second, slightly different palette (Bootstrap
   danger #dc3545 vs our --re-dash-danger #e0413b, success #28a745 vs
   #10c018, muted #6c757d vs #64748b) — confirmed drifting in the same card
   more than once during the 2026-08-07 design-system finalisation. Use
   these instead, everywhere in admin, going forward — see
   project_admin_design_system_final.md.
   ------------------------------------------------------------------------- */
.re-text-danger    { color: var(--re-dash-danger); }
.re-text-success   { color: var(--re-dash-success); }
.re-text-warning   { color: var(--re-dash-warning); }
.re-text-info      { color: var(--re-dash-info); }
.re-text-muted     { color: var(--re-dash-fg-muted); }
.re-text-secondary { color: var(--re-dash-fg-secondary); }
.re-text-fg        { color: var(--re-dash-fg); }

/* -------------------------------------------------------------------------
   Card header strip — dark navy with confident type weight.
   Overrides the existing .comp-card-2 .card-header styling on these cards.
   ------------------------------------------------------------------------- */
.rel-ajax-card .card-header {
  background: var(--re-dash-card-header);
  border-bottom: 0;
  padding: 8px 14px;
}

.rel-ajax-card .card-header h5 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .2px;
  font-size: 14px;
  margin: 0;
}

.rel-ajax-card .card-header .card-header-right,
.rel-ajax-card .card-header .card-header-right * {
  color: #cbd5e1;
}

/* -------------------------------------------------------------------------
   Table base — typography, spacing, header row, hover state.
   Scoped under .rel-ajax-card so it only affects these three cards' tables.
   ------------------------------------------------------------------------- */
.rel-ajax-card .card-block,
.rel-ajax-card .card-body {
  padding: 10px;
  background: var(--re-dash-bg);
}

.rel-ajax-card table.projects-like-datatable,
.rel-ajax-card table.re-dash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  color: var(--re-dash-fg-secondary);
  background: var(--re-dash-bg);
  border: 1px solid var(--re-dash-border);
  border-radius: 6px;
  overflow: hidden;
}

/* Header row */
.rel-ajax-card table.projects-like-datatable thead tr,
.rel-ajax-card table.re-dash-table thead tr {
  background: var(--re-dash-bg-header);
}

.rel-ajax-card table.projects-like-datatable thead th,
.rel-ajax-card table.re-dash-table thead th {
  padding: 11px var(--re-dash-cell-px);
  color: var(--re-dash-fg-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--re-dash-border);
  text-align: left;
}

/* Body cells */
.rel-ajax-card table.projects-like-datatable tbody td,
.rel-ajax-card table.re-dash-table tbody td {
  padding: var(--re-dash-cell-py) var(--re-dash-cell-px);
  border-bottom: 1px solid var(--re-dash-border-light);
  vertical-align: top;
  color: var(--re-dash-fg-secondary);
}

.rel-ajax-card table.projects-like-datatable tbody tr:last-child td,
.rel-ajax-card table.re-dash-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Remarks editable — cap the cell so long remarks WRAP inside a fixed width
   instead of stretching the table and squeezing the columns beside it. The
   remarks textarea lives in the "Remarks" column on one table and inside the
   "Assigned" column on the richer admin table — cover both. The value shows in
   a .rel-editable-value span (textarea is hidden until the cell is clicked).
   Capping the inner block is reliable in auto table-layout; word-break handles
   long unbroken strings/URLs. Mobile stacked view resets this below (@media). */
.rel-ajax-card table.projects-like-datatable td[data-label="Remarks"],
.rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] {
  max-width: 300px;
}
.rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] .rel-editable,
.rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] .rel-editable-value,
.rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] .rel-editable,
.rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] .rel-editable-value {
  display: block;
  max-width: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] textarea.rel-editable-input,
.rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] textarea.rel-editable-input {
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
}

/* DataTables wraps the table in a Bootstrap .row (margin:-15px) whose inner
   .col has no padding to offset it, so the table escaped ~15px to the left and
   .table-responsive clipped the first column (S.No). Zero the wrapper row
   margins so the table aligns to its container's left edge. */
.rel-ajax-card .dataTables_wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================================
   DataTables controls — the length menu, global search, per-column footer
   filters, info line and pagination ship UNSTYLED by default, which is what
   made these cards read as immature (cramped "Show 25 entries" / "Search:" +
   a raw row of footer inputs). Style all of them to the card's design system.
   Scoped under .rel-ajax-card so no other DataTable on the site is touched.
   ------------------------------------------------------------------------- */

/* The DataTables Bootstrap4 wrapper ships with `.form-inline` (display:flex),
   so its three child rows (length/search, the table, info/pagination) lay out
   as wrapping flex items and the table's row collapses to content width instead
   of filling the card. Force block flow so each row — and the table — is full
   width. */
.rel-ajax-card .dataTables_wrapper {
  display: block;
  width: 100%;
}

/* Top control bar — length on the left, search on the right, aligned + spaced. */
.rel-ajax-card .dataTables_wrapper .dataTables_length,
.rel-ajax-card .dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--re-dash-fg-muted);
}

.rel-ajax-card .dataTables_wrapper .dataTables_filter {
  text-align: right;
}

.rel-ajax-card .dataTables_wrapper .dataTables_length label,
.rel-ajax-card .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  letter-spacing: .1px;
}

/* Length select + search input — unified control styling. */
.rel-ajax-card .dataTables_wrapper .dataTables_length select,
.rel-ajax-card .dataTables_wrapper .dataTables_filter input {
  height: 34px;
  border: 1px solid var(--re-dash-border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--re-dash-fg);
  background: var(--re-dash-bg);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rel-ajax-card .dataTables_wrapper .dataTables_filter input {
  min-width: 220px;
  margin-left: 0;
}

.rel-ajax-card .dataTables_wrapper .dataTables_length select:focus,
.rel-ajax-card .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #075985;
  box-shadow: 0 0 0 3px rgba(7, 89, 133, .12);
  outline: 0;
}

/* Per-column footer filters — a tidy, low-contrast filter strip under the
   table (inputs/selects injected into tfoot th by ajaxactions.js initComplete). */
.rel-ajax-card table.projects-like-datatable tfoot th {
  padding: 8px var(--re-dash-cell-px);
  background: var(--re-dash-bg-header);
  border-top: 1px solid var(--re-dash-border);
  border-bottom: 0;
}

.rel-ajax-card table.projects-like-datatable tfoot input,
.rel-ajax-card table.projects-like-datatable tfoot select {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--re-dash-fg);
  background: var(--re-dash-bg);
  border: 1px solid var(--re-dash-border);
  border-radius: 5px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rel-ajax-card table.projects-like-datatable tfoot input::placeholder {
  color: var(--re-dash-fg-placeholder);
}

.rel-ajax-card table.projects-like-datatable tfoot input:focus,
.rel-ajax-card table.projects-like-datatable tfoot select:focus {
  border-color: #075985;
  box-shadow: 0 0 0 3px rgba(7, 89, 133, .12);
  outline: 0;
}

/* Info line + pagination — quiet, aligned footer controls. */
.rel-ajax-card .dataTables_wrapper .dataTables_info {
  padding-top: 14px;
  font-size: 11.5px;
  color: var(--re-dash-fg-muted);
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate {
  padding-top: 12px;
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  justify-content: flex-end;
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate .page-link {
  color: var(--re-dash-fg-secondary);
  border-color: var(--re-dash-border);
  font-size: 12px;
  padding: 5px 11px;
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: #075985;
  border-color: #075985;
  color: #fff;
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  color: var(--re-dash-fg-placeholder);
  background: var(--re-dash-bg);
}

/* Fallback for non-Bootstrap pagination markup (a.paginate_button). */
.rel-ajax-card .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 11px;
  margin-left: 3px;
  border: 1px solid var(--re-dash-border);
  border-radius: 5px;
  font-size: 12px;
  color: var(--re-dash-fg-secondary) !important;
}

.rel-ajax-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #075985;
  border-color: #075985;
  color: #fff !important;
}

/* Row hover */
.rel-ajax-card table.projects-like-datatable tbody tr:hover td,
.rel-ajax-card table.re-dash-table tbody tr:hover td {
  background: var(--re-dash-bg-row-hover);
}

/* Primary identifiers (project ID, project name) - bigger, darker */
.rel-ajax-card table.projects-like-datatable .font-weight-bold,
.rel-ajax-card table.projects-like-datatable .re-dash-primary,
.rel-ajax-card table.re-dash-table .re-dash-primary {
  color: var(--re-dash-fg);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .1px;
}

/* Secondary descriptors (customer name, service, meta) - muted */
.rel-ajax-card table.projects-like-datatable .small,
.rel-ajax-card table.projects-like-datatable .re-dash-meta,
.rel-ajax-card table.re-dash-table .re-dash-meta {
  color: var(--re-dash-fg-muted);
  font-size: 11.5px;
  font-weight: 400;
}

/* "Received" / timestamps row */
.rel-ajax-card table.projects-like-datatable .re-dash-timestamp,
.rel-ajax-card table.re-dash-table .re-dash-timestamp {
  color: var(--re-dash-fg-placeholder);
  font-size: 10.5px;
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Status pills — colored badges keyed by status slug.
   The pill wraps the X-editable trigger element; X-editable still fires
   when the pill is clicked.
   ------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.4;
  background: #f1f5f9;
  color: #475569;
}

.status-pill a,
.status-pill .editable {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

/* In-progress family — calm blue */
.status-pill--started,
.status-pill--in_progress,
.status-pill--in-progress {
  background: #e0f2fe;
  color: #075985;
}

/* Paused / on-hold family — warm amber */
.status-pill--paused,
.status-pill--on_hold,
.status-pill--on-hold {
  background: #fef3c7;
  color: #92400e;
}

/* Awaiting / not-started family — neutral gray */
.status-pill--not_started,
.status-pill--awaiting,
.status-pill--new {
  background: #f1f5f9;
  color: #475569;
}

/* Delivered / completed family — green */
.status-pill--delivered,
.status-pill--completed,
.status-pill--finished {
  background: #dcfce7;
  color: #15803d;
}

/* Urgent / negative family — red */
.status-pill--under_review,
.status-pill--under-review,
.status-pill--rejected,
.status-pill--refunded,
.status-pill--suspended,
.status-pill--urgent {
  background: #fee2e2;
  color: #991b1b;
}

/* -------------------------------------------------------------------------
   PV severity chip — colored by how far PV exceeds the required value.
   ok      = current <= required          (green)
   warning = required < current < 2×req   (amber)
   danger  = current >= 2×required        (red)
   ------------------------------------------------------------------------- */
.pv-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.5;
}

.pv-chip--ok {
  background: #dcfce7;
  color: #15803d;
}

.pv-chip--warning {
  background: #fef3c7;
  color: #92400e;
}

.pv-chip--danger {
  background: #fee2e2;
  color: #991b1b;
}

.pv-chip + .pv-chip-meta {
  margin-left: 6px;
  color: var(--re-dash-fg-muted);
  font-size: 11px;
}

/* -------------------------------------------------------------------------
   Action icons — row of small clickable icons inside a cell.
   Replaces the existing crammed cluster with consistent spacing + hover.
   ------------------------------------------------------------------------- */
.action-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  color: var(--re-dash-fg-muted);
  font-size: 13px;
}

.action-icons > * {
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
  line-height: 1;
}

.action-icons > *:hover {
  color: var(--re-dash-fg);
}

.action-icons .fa-whatsapp:hover {
  color: #25D366; /* WhatsApp brand green */
}

.action-icons .fa-eye:hover {
  color: var(--re-dash-fg); /* dark navy, matches base hover */
}

.action-icons .fa-file:hover {
  color: #d97706;
}

/* -------------------------------------------------------------------------
   Square bordered action icon — the icon-style decision from the WhatsApp
   datatable preview ("Variant C"). A bordered square with a per-type tint on
   hover; reads as a clear button in a dense cluster without the heaviness of
   a filled, shadowed square. Used by odr_contact_actions_html() and
   odr_project_panel_triggers_html() when called with variant=sq (the
   projects-view datatable row) — matches the preview's own 30px box / 8px
   gap / 16px glyph, sized down from an earlier pass that used mr-3 (16px)
   between icons and a 15px glyph — too much air, too heavy, next to the
   preview.
   ------------------------------------------------------------------------- */
.re-dash-icon-sq {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--re-dash-border);
  background: var(--re-dash-bg);
  color: var(--re-dash-fg-secondary);
  font-size: 13px;
  font-size: .9375rem; /* Ankit: 22-08-2026 - Test for enlarged icon size */
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* Text-content variant — the box IS the counter, no icon + overlaid badge.
   Wider than the base 28px to hold 2-4 digits without crowding; the caller
   still caps the text itself (999+) past that, this is the box only. */
.re-dash-icon-sq.re-dash-icon-sq-counter {
  width: 42px;
}

.re-dash-icon-sq:hover {
  border-color: var(--re-dash-fg-muted);
  background: var(--re-dash-bg-row-hover);
  color: var(--re-dash-fg);
}

.re-dash-icon-sq--success:hover {
  border-color: var(--re-dash-success);
  background: var(--re-dash-success-soft);
  color: var(--re-dash-success-dark);
}

.re-dash-icon-sq--info:hover {
  border-color: var(--re-dash-info);
  background: var(--re-dash-info-soft);
  color: var(--re-dash-info);
}

.re-dash-icon-sq--danger:hover {
  border-color: var(--re-dash-danger);
  background: var(--re-dash-danger-soft);
  color: var(--re-dash-danger);
}

/* -------------------------------------------------------------------------
   WhatsApp-invalid icon (odr_whatsapp_invalid_icon_html()) — a fixed 16px box
   regardless of the surrounding context's font-size, so it reads at the same
   size next to a 12-13px indicator icon or a 15px action icon. FontAwesome's
   own .fa-stack sizing is relative to font-size, which is what made the first
   pass illegibly small inside this row's smaller type.
   ------------------------------------------------------------------------- */
.re-wa-invalid {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.re-wa-invalid i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.re-wa-invalid .fa-slash {
  font-size: 16px;
}

/* -------------------------------------------------------------------------
   Quiet state tag — a small bordered label for a state worth naming but not
   worth an alert colour (e.g. "App user"). Same pill shape as the New User /
   Hindi File badges, but built from the muted/border tokens instead of a
   semantic colour, so it reads as informational rather than an exception.
   Reusable wherever a plain fact needs a label instead of an icon.
   ------------------------------------------------------------------------- */
.re-dt-tag {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0px 154px 100px;
  background: var(--re-dash-bg-header);
  color: var(--re-dash-fg-muted);
  border: 1px solid var(--re-dash-border);
}

/* -------------------------------------------------------------------------
   Editable affordance — quiet dashed underline for "click to add" cells.
   Used inside X-editable wrappers when value is empty.
   ------------------------------------------------------------------------- */
.editable-empty,
.editable-affordance {
  color: var(--re-dash-fg-placeholder) !important;
  font-style: normal !important;
  border-bottom: 1px dashed #cbd5e1 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.editable-empty:hover,
.editable-affordance:hover {
  color: var(--re-dash-fg-secondary) !important;
  border-bottom-color: var(--re-dash-fg-muted) !important;
}

/* -------------------------------------------------------------------------
   Empty-state row — when the table has zero rows to display.
   ------------------------------------------------------------------------- */
.re-dash-empty-row td {
  padding: 32px var(--re-dash-cell-px) !important;
  text-align: center;
  color: var(--re-dash-fg-muted);
  font-size: 13px;
  font-weight: 500;
  background: var(--re-dash-bg);
}

.re-dash-empty-row td::before {
  content: "✨ ";
  font-size: 14px;
  margin-right: 6px;
}

/* -------------------------------------------------------------------------
   PV row utility — small horizontal flex row used for pages cell content.
   Replaces inline style attributes in the project-table renderers.
   ------------------------------------------------------------------------- */
.re-dash-pv-row {
  gap: 6px;
}

/* -------------------------------------------------------------------------
   table-responsive — Bootstrap wrapper adjustments inside our cards so
   horizontal scroll feels intentional (subtle border, no extra margin).
   ------------------------------------------------------------------------- */
/* No border here — the card frames the panel and the table carries its own
   rounded border, so a border on .table-responsive too produced a doubled
   box-in-box line. Keep this wrapper frame-less; it's only for x-scroll. */
.rel-ajax-card .table-responsive {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.rel-ajax-card .table-responsive > table {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

/* =========================================================================
   Mobile-stacked layout — at <=767px each row becomes a card with column
   labels (via td[data-label]). Only applies to tables inside .rel-ajax-card
   so it doesn't affect tables elsewhere on the site.
   ========================================================================= */
@media (max-width: 991.98px) {
  .rel-ajax-card .table-responsive {
    border: 0;
  }

  /* Stack the top controls full-width; the per-column footer filters are
     meaningless once rows become stacked cards, so hide that row entirely. */
  .rel-ajax-card .dataTables_wrapper .dataTables_length,
  .rel-ajax-card .dataTables_wrapper .dataTables_filter {
    text-align: left;
    width: 100%;
  }

  .rel-ajax-card .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .rel-ajax-card .dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center;
  }

  .rel-ajax-card table.projects-like-datatable tfoot {
    display: none;
  }

  .rel-ajax-card table.projects-like-datatable,
  .rel-ajax-card table.re-dash-table {
    display: block;
    border: 0;
  }

  .rel-ajax-card table.projects-like-datatable thead,
  .rel-ajax-card table.re-dash-table thead {
    /* Visually hide but keep accessible for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .rel-ajax-card table.projects-like-datatable tbody,
  .rel-ajax-card table.re-dash-table tbody {
    display: block;
    width: 100%;
  }

  .rel-ajax-card table.projects-like-datatable tbody tr,
  .rel-ajax-card table.re-dash-table tbody tr {
    display: block;
    background: var(--re-dash-bg);
    border: 1px solid var(--re-dash-border);
    border-radius: 6px;
    padding: 4px 0;
    margin-bottom: 8px;
  }

  .rel-ajax-card table.projects-like-datatable tbody tr:hover td,
  .rel-ajax-card table.re-dash-table tbody tr:hover td {
    background: transparent;
  }

  .rel-ajax-card table.projects-like-datatable tbody td,
  .rel-ajax-card table.re-dash-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--re-dash-border-light);
    text-align: right;
  }

  .rel-ajax-card table.projects-like-datatable tbody td:last-child,
  .rel-ajax-card table.re-dash-table tbody td:last-child {
    border-bottom: 0;
  }

  .rel-ajax-card table.projects-like-datatable tbody td::before,
  .rel-ajax-card table.re-dash-table tbody td::before {
    content: attr(data-label);
    color: var(--re-dash-fg-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex: 0 0 auto;
    text-align: left;
    margin-right: 12px;
    padding-top: 2px;
  }

  /* When data-label is empty (e.g. S.No column), hide the label slot */
  .rel-ajax-card table.projects-like-datatable tbody td[data-label=""]::before,
  .rel-ajax-card table.re-dash-table tbody td[data-label=""]::before {
    display: none;
  }

  /* Remarks/Assigned: drop the desktop width cap when cells are stacked full-width. */
  .rel-ajax-card table.projects-like-datatable td[data-label="Remarks"],
  .rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] .rel-editable,
  .rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] .rel-editable-value,
  .rel-ajax-card table.projects-like-datatable td[data-label="Remarks"] textarea.rel-editable-input,
  .rel-ajax-card table.projects-like-datatable td[data-label="Assigned"],
  .rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] .rel-editable,
  .rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] .rel-editable-value,
  .rel-ajax-card table.projects-like-datatable td[data-label="Assigned"] textarea.rel-editable-input {
    max-width: 100%;
  }

  /* Empty-state row stays single-column */
  .rel-ajax-card table.projects-like-datatable tbody tr.re-dash-empty-row,
  .rel-ajax-card table.re-dash-table tbody tr.re-dash-empty-row {
    padding: 0;
  }

  .rel-ajax-card table.projects-like-datatable tbody tr.re-dash-empty-row td,
  .rel-ajax-card table.re-dash-table tbody tr.re-dash-empty-row td {
    display: block;
    text-align: center;
    border: 0;
  }

  .rel-ajax-card table.projects-like-datatable tbody tr.re-dash-empty-row td::before,
  .rel-ajax-card table.re-dash-table tbody tr.re-dash-empty-row td::before {
    display: none;
  }
}

/* =========================================================================
   List of Services — service cards grid.
   All rules scoped under #list-of-services.re-svc-grid so they only affect
   the 13 service cards on the user dashboard, never the data-table cards
   (.rel-ajax-card) or any other card on the dashboard.
   Goals: equal-height cards, clean icon→title→KnowMore→desc→CTA rhythm,
   bottom-aligned CTAs, tidy desktop grid, clean mobile stack.
   ========================================================================= */
#list-of-services.re-svc-grid .re-svc-card {
  border: 1px solid var(--re-dash-border);
  border-radius: 8px;
  background: var(--re-dash-bg);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

#list-of-services.re-svc-grid .re-svc-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

#list-of-services.re-svc-grid .re-svc-card .card-body {
  padding: 20px 18px;
}

/* Heading block — title with a left accent rule, clean divider below */
#list-of-services.re-svc-grid .re-svc-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--re-dash-border-light);
}

/* Service heading — bold, legible, with a small colour accent bar */
#list-of-services.re-svc-grid .re-svc-title {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1px;
  color: var(--re-dash-fg);
}

#list-of-services.re-svc-grid .re-svc-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: #075985;
}

/* Description — single paragraph, readable, grows to fill card height */
#list-of-services.re-svc-grid .re-svc-desc {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--re-dash-fg-secondary);
}

/* CTA — pinned to the bottom so the single button aligns across the grid */
#list-of-services.re-svc-grid .re-svc-cta {
  border-top: 1px solid var(--re-dash-border-light);
}

/* Small Bootstrap button: outline Know More */
#list-of-services.re-svc-grid .re-svc-cta .btn {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

#list-of-services.re-svc-grid .re-svc-cta .btn .fa-arrow-right {
  font-size: 11px;
  margin-left: 4px;
}

/* Mobile — comfortable single-column stack */
@media (max-width: 575.98px) {
  #list-of-services.re-svc-grid .re-svc-card .card-body {
    padding: 16px 14px;
  }
  #list-of-services.re-svc-grid .re-svc-title {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------------------
   Workload stat tiles — "My Workload" (editor, self-scoped) and
   "Editor Current Workload" (admin, whole team) cards. Same tile language
   as the re-dash KPI strip, scoped to .rel-ajax-card like the rest of this
   file.
   ------------------------------------------------------------------------- */
.rel-ajax-card .workload-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.rel-ajax-card .workload-stat-tile {
  flex: 1 1 110px;
  min-width: 110px;
  background: var(--re-dash-bg-header);
  border: 1px solid var(--re-dash-border);
  border-top: 3px solid #2196F3;
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}

.rel-ajax-card .workload-stat-tile.workload-tile-warn   { border-top-color: #f39c12; }
.rel-ajax-card .workload-stat-tile.workload-tile-danger { border-top-color: #e74c3c; }

.rel-ajax-card .workload-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--re-dash-fg);
  line-height: 1.2;
}

.rel-ajax-card .workload-stat-label {
  font-size: 0.72rem;
  color: var(--re-dash-fg-muted);
  margin-top: 3px;
}

.rel-ajax-card .workload-badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}

.rel-ajax-card .workload-badge-warn   { background: #f39c12; }
.rel-ajax-card .workload-badge-danger { background: #e74c3c; }

@media (max-width: 575.98px) {
  .rel-ajax-card .workload-stat-tile { flex: 1 1 45%; }
}

/* Sequential magnitude bars — same visual language as the re-dashboard
   conversion funnel (view-re-dashboard.php), reused here (not reinvented)
   for the turnaround-time histogram on the "My Workload" card. */
.rel-ajax-card .re-funnel { display: flex; flex-direction: column; gap: 7px; padding: 4px 0; }
.rel-ajax-card .re-funnel-row { display: flex; align-items: center; gap: 10px; }
.rel-ajax-card .re-funnel-label { flex: 0 0 90px; font-size: .78rem; color: var(--re-dash-fg-muted); }
.rel-ajax-card .re-funnel-track { flex: 1; background: var(--re-dash-bg-header); border-radius: 4px; height: 22px; }
.rel-ajax-card .re-funnel-fill { height: 100%; border-radius: 4px; background: #2f6fed; min-width: 3px; transition: width .4s ease; }
.rel-ajax-card .re-funnel-num { flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--re-dash-fg); min-width: 28px; text-align: right; }

/* =========================================================================
   Email preview card — renders inside .modal-result wherever the Mail Type /
   Mail For form appears (WA panel Email tab, Publications modal, Project
   Details page). Not scoped to .rel-ajax-card: those three render sites are
   outside the dashboard cards, so this uses the same :root tokens directly.
   ========================================================================= */
.odr-mail-preview-loading { padding: 10px 2px; color: var(--re-dash-fg-muted); font-size: .85rem; }

.odr-mail-preview {
  border: 1px solid var(--re-dash-border);
  border-radius: 6px;
  background: var(--re-dash-bg);
  overflow: hidden;
}

.odr-mail-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--re-dash-bg-header);
  border-bottom: 1px solid var(--re-dash-border);
  font-size: .92rem;
  color: var(--re-dash-fg);
}

.odr-mail-preview-head-meta {
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 500;
  color: var(--re-dash-fg-muted);
  white-space: nowrap;
}

.odr-mail-preview-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 14px 0;
  padding: 8px 10px;
  background: #fff7e6;
  border: 1px solid #f5d999;
  border-radius: 4px;
  font-size: .8rem;
  color: #7a5b00;
}
.odr-mail-preview-warn .fa { margin-top: 2px; color: #d9932b; }

.odr-mail-preview-section { padding: 12px 14px 0; }
.odr-mail-preview-section:last-of-type { padding-bottom: 12px; }

.odr-mail-preview-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--re-dash-fg-muted);
  margin-bottom: 4px;
}

.odr-mail-preview-body {
  font-size: .85rem;
  color: var(--re-dash-fg-secondary);
  line-height: 1.5;
  word-break: break-word;
}
.odr-mail-preview-body.odr-mail-preview-html { max-height: 340px; overflow-y: auto; }

/* rel_preg_replace_placeholders() (omak-dash functions-emailers.php) marks a
   missing/empty field with this exact inline style — keep the selector
   matched to that, not to a class this HTML never carries. */
.odr-mail-preview-body strong[style*="color:red"] {
  background: #fdecea;
  padding: 0 3px;
  border-radius: 3px;
}

.odr-mail-preview-meta {
  padding: 8px 14px;
  border-top: 1px solid var(--re-dash-border-light);
  background: var(--re-dash-bg-header);
  font-size: .74rem;
  color: var(--re-dash-fg-muted);
}

.odr-mail-wa-preview { margin-top: 10px; }
.odr-mail-wa-preview .odr-mail-preview-label { margin: 0 0 6px; }

/* Use Credits box on /pay/ — real "How Credits Work" slide-in + guest login
   popup. Rendered from omak-dash class.moneyram.php::create_pay_now_buttons()
   / render_credits_info_widgets(); ids are suffixed per-project so multiple
   boxes on one page never collide. */
@media (max-width: 767.98px) {
	/* .rel-pay-button-credits is a Bootstrap d-flex row (balance/checkbox column
	   + pay-button column) with no wrap, so on narrow screens the balance/
	   checkbox column gets squeezed to a sliver and its text wraps mid-word.
	   Let it wrap to its own full-width line instead. */
	.rel-pay-button-credits {
		flex-wrap: wrap;
	}
	.rel-pay-button-credits > .odr-credits-box {
		flex: 1 1 100%;
	}
}
.odr-credits-box__row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.odr-credits-box__info-btn {
	border: none;
	background: none;
	color: var(--re-dash-info);
	font-size: 0.85rem;
	padding: 0;
	cursor: pointer;
}
.odr-credits-box__checkbox-wrap {
	position: relative;
}
.odr-credits-box__click-catcher {
	display: block;
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.odr-credits-slidein {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 320px;
	max-width: 90vw;
	background: var(--re-dash-bg);
	border-left: 1px solid var(--re-dash-border);
	box-shadow: -4px 0 16px rgba(15, 23, 42, 0.12);
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 1060;
	display: flex;
	flex-direction: column;
}
.odr-credits-slidein.is-open {
	transform: translateX(0);
}
.odr-credits-slidein__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: var(--re-dash-bg-header);
	border-bottom: 1px solid var(--re-dash-border);
	color: var(--re-dash-fg);
	font-weight: 600;
}
.odr-credits-slidein__close {
	border: none;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--re-dash-fg-muted);
	cursor: pointer;
}
.odr-credits-slidein__body {
	padding: 20px;
	color: var(--re-dash-fg-secondary);
	font-size: 0.9rem;
}
.odr-credits-slidein__balance {
	color: var(--re-dash-brand-dark);
}
.odr-credits-slidein__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 1055;
}
.odr-credits-slidein__backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.odr-login-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%);
	width: 320px;
	max-width: 90vw;
	background: var(--re-dash-bg);
	border-radius: var(--re-dash-control-radius);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1070;
	text-align: center;
	padding: 28px 24px 20px;
}
.odr-login-popup.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%);
}
.odr-login-popup__close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: none;
	background: none;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--re-dash-fg-muted);
	cursor: pointer;
}
.odr-login-popup__icon {
	color: var(--re-dash-success);
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.odr-login-popup__title {
	color: var(--re-dash-fg);
	font-weight: 600;
	margin-bottom: 18px;
}
.odr-login-popup__cta {
	background: var(--re-dash-brand);
	color: var(--re-dash-fg-inverse);
	border: none;
	border-radius: var(--re-dash-control-radius);
	padding: 8px 28px;
	font-weight: 600;
	text-decoration: none;
}
.odr-login-popup__cta:hover,
.odr-login-popup__cta:focus {
	color: var(--re-dash-fg-inverse);
	text-decoration: none;
}
.odr-login-popup__dismiss {
	display: block;
	margin: 12px auto 0;
	border: none;
	background: none;
	color: var(--re-dash-fg-muted);
	font-size: 0.8rem;
	cursor: pointer;
}
.odr-login-popup__reassure {
	margin: 10px 0 0;
	color: var(--re-dash-fg-muted);
	font-size: 0.76rem;
}
.odr-login-popup__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 1065;
}
.odr-login-popup__backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
   Tooltips — the skin for the one delegated Bootstrap 4 tooltip instance
   started in theme/admin/ajaxactions.js.

   Why this styles bare `.tooltip` and not a bespoke class: the whole point of
   the Bootstrap route is that it reads the `title` attributes already in the
   markup (36 of them in view-projects-details.php alone), so the element it
   renders is Bootstrap's own. AdminDek never styles `.tooltip` and our sheet
   loads after Bootstrap's, so plain specificity holds these — no !important.

   Bootstrap emits the placement class two ways depending on whether the
   placement was fixed (`.bs-tooltip-top`) or auto-resolved by Popper
   (`.bs-tooltip-auto[x-placement^="top"]`). Both are listed, because we pass
   no `placement` and therefore get the auto form in practice.
   ------------------------------------------------------------------------- */
.tooltip {
	font-family: inherit;
	font-size: 12px;
	line-height: 1.45;
}
.tooltip.show {
	/* Bootstrap ships .9 — a hair of the page bleeding through small white
	   text is exactly where it gets hard to read. */
	opacity: 1;
}
.tooltip .tooltip-inner {
	max-width: var(--re-dash-tooltip-max);
	padding: 6px 10px;
	color: var(--re-dash-tooltip-fg);
	background-color: var(--re-dash-tooltip-bg);
	border-radius: var(--re-dash-tooltip-radius);
	text-align: left;
	font-weight: 500;
	letter-spacing: 0.1px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: var(--re-dash-tooltip-bg);
}
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: var(--re-dash-tooltip-bg);
}
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: var(--re-dash-tooltip-bg);
}
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: var(--re-dash-tooltip-bg);
}

/* Ongoing-issues banner (odr_render_open_issues_banner_for_project) — shared
   across the editor screen and the admin details page. Border accent + soft
   tint instead of a solid bg-warning fill; same -soft pairing every other
   warning surface in this system already uses, not a new treatment. */
.odr-issue-card { border-color: var(--re-dash-warning); }
.odr-issue-card__header {
	background: var(--re-dash-warning-soft);
	color: var(--re-dash-fg);
	border-bottom: 1px solid var(--re-dash-warning);
}
.odr-issue-card__header i { color: var(--re-dash-warning); }
.odr-issue-row {
	border: 1px solid var(--re-dash-border);
	border-radius: 6px;
	background: var(--re-dash-bg-header);
	padding: 8px;
	margin-bottom: 8px;
}

/* Project-details EDITOR screen now builds on .odr-ppv2-* directly (see
   theme/admin/css/style.css ~2104) — the same system as view-projects-
   details.php. No screen-local class family here. 2 additions were made to
   that shared system for what it didn't have yet: .odr-ppv2-actions
   (workflow start/pause/finish buttons) and .odr-ppv2-upload (upload-form
   wrapper) — see style.css. */
.odr-ppv2-badge-preview { background: var(--re-dash-info); color: var(--re-dash-fg-inverse); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; vertical-align: middle; }