/*
 * DataNoble theme layer — one palette (navy is the only blue) with a subtle 135° gradient,
 * matching the side nav, and one set of corners / button shape. No page layout here. Selectors are prefixed with `html` so they beat Material
 * even when a view re-links material-dashboard.css after this file (survey_preview).
 * Standalone documents that load Material themselves link this file too: dashboard_charts
 * (iframed into the dashboard) and errors/layout.
 *
 * Each colour is a pair (light → deep) plus its RGB for tinted shadows; the light end sits
 * about halfway to the deep one, so the gradient reads as a gentle sheen rather than a sweep.
 * The deep end is roughly the old Material colour darkened ~20%.
 */

:root {
  /* ONE palette for the whole app: navy is the only blue (buttons, card tiles,
     pills, badges); the record chips (.dn-prio / .dn-status) use the same deep
     ends, as text on a light tint of the same colour. */
  --dn-primary-1: #1d4275; --dn-primary-2: #0B2545; --dn-primary-rgb: 11, 37, 69;
  --dn-info-1:    #0f94b8; --dn-info-2:    #0a7fa3; --dn-info-rgb:    10, 140, 180;
  --dn-success-1: #299550; --dn-success-2: #1e7d42; --dn-success-rgb: 30, 140, 70;
  --dn-warning-1: #e88e15; --dn-warning-2: #d9760a; --dn-warning-rgb: 230, 130, 10;
  --dn-danger-1:  #d93b3c; --dn-danger-2:  #c42a2d; --dn-danger-rgb:  210, 45, 45;
  --dn-rose-1:    #cc2768; --dn-rose-2:    #b51a55; --dn-rose-rgb:    200, 30, 95;
  --dn-default-1: #727f94; --dn-default-2: #5d6a80; --dn-default-rgb: 70, 85, 110;
  --dn-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --dn-radius: 10px;      /* buttons, inputs-as-buttons, alerts */
  --dn-radius-sm: 6px;    /* badges, chips */
  --dn-radius-card: 14px; /* cards and their icon tiles */
}

/* ── Per-colour tokens ───────────────────────────── */
html .btn-primary, html .card-header-primary, html .badge-primary, html .alert-primary { --g1: var(--dn-primary-1); --g2: var(--dn-primary-2); --rgb: var(--dn-primary-rgb); }
html .btn-info,    html .card-header-info,    html .badge-info,    html .alert-info { --g1: var(--dn-info-1);    --g2: var(--dn-info-2);    --rgb: var(--dn-info-rgb); }
html .btn-success, html .card-header-success, html .badge-success, html .alert-success { --g1: var(--dn-success-1); --g2: var(--dn-success-2); --rgb: var(--dn-success-rgb); }
html .btn-warning, html .card-header-warning, html .badge-warning, html .alert-warning { --g1: var(--dn-warning-1); --g2: var(--dn-warning-2); --rgb: var(--dn-warning-rgb); }
html .btn-danger,  html .card-header-danger,  html .badge-danger,  html .alert-danger { --g1: var(--dn-danger-1);  --g2: var(--dn-danger-2);  --rgb: var(--dn-danger-rgb); }
html .btn-rose,    html .card-header-rose,    html .badge-rose,    html .alert-rose { --g1: var(--dn-rose-1);    --g2: var(--dn-rose-2);    --rgb: var(--dn-rose-rgb); }
html .btn-default,                       html .badge-default { --g1: var(--dn-default-1); --g2: var(--dn-default-2); --rgb: var(--dn-default-rgb); }

/* ── Button shape: sentence case, rounded corners, a lighter shadow ──
   Material's uppercase, letter-spaced, pill-shadowed buttons gave way to the look
   the newer screens use (report composer, data uploads). Every button gets the
   same corners — pill-shaped .btn-round included; only the circular icon
   buttons (.btn-fab / .btn-just-icon) keep their circle. */
html .btn:not(.btn-fab):not(.btn-just-icon) {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: var(--dn-radius);
}
html .btn:not(.btn-sm):not(.btn-lg):not(.btn-just-icon) { font-size: 0.8125rem; }
html .btn.btn-sm:not(.btn-just-icon) { font-size: 0.75rem; }
html .btn .material-icons, html .btn .fa { vertical-align: -2px; }

/* ── Buttons (link-style buttons keep their transparent look) ── */
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
  border-color: var(--g2);
  box-shadow: 0 2px 6px rgba(var(--rgb), 0.18), var(--dn-sheen);
  transition: box-shadow 0.2s, filter 0.15s, transform 0.15s;
}
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link):is(:hover, :focus, .focus) {
  color: #fff;
  background-color: var(--g2);
  border-color: var(--g2);
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(var(--rgb), 0.24), var(--dn-sheen);
}
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link):is(:active, .active) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g2), var(--g2));
  filter: none;
  box-shadow: 0 2px 6px rgba(var(--rgb), 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* Disabled keeps its own colour and simply fades — desaturating turned navy into a
   slate grey that read as a different kind of button. */
html .btn:is(.disabled, :disabled):not(.btn-link) {
  filter: none;
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
html .btn.btn-link:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose) { color: var(--g2); }

/* Secondary buttons (default / secondary / white / light): white with a hairline
   border, not a grey slab. */
html .btn:is(.btn-default, .btn-secondary, .btn-white, .btn-light):not(.btn-link),
html .btn:is(.btn-default, .btn-secondary, .btn-white, .btn-light):not(.btn-link):is(:hover, :focus, .focus, :active, .active) {
  color: #13315C;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dfe6ee;
  box-shadow: 0 1px 2px rgba(11, 37, 69, 0.06);
  filter: none;
}
html .btn:is(.btn-default, .btn-secondary, .btn-white, .btn-light):not(.btn-link):is(:hover, :focus, .focus) { background-color: #f4f7fb; border-color: #cdd7e3; }
html .btn:is(.btn-default, .btn-secondary, .btn-white, .btn-light):not(.btn-link):is(:active, .active) { background-color: #eef3fa; }

/* Outline buttons: the palette colour as text + border, its light tint when on. */
html .btn-outline-primary { --g2: var(--dn-primary-2); --tint: #e8edf5; }
html .btn-outline-info    { --g2: var(--dn-info-2);    --tint: #e3f3fa; }
html .btn-outline-success { --g2: var(--dn-success-2); --tint: #e6f4eb; }
html .btn-outline-warning { --g2: var(--dn-warning-2); --tint: #fff1de; }
html .btn-outline-danger  { --g2: var(--dn-danger-2);  --tint: #fdecec; }
html .btn-outline-secondary { --g2: #13315C; --tint: #f4f7fb; }
html .btn:is(.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-secondary) {
  color: var(--g2); background: #fff; border: 1px solid currentColor; box-shadow: none;
}
html .btn:is(.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-secondary):is(:hover, :focus, .active, :active) {
  color: var(--g2); background: var(--tint); border-color: currentColor; box-shadow: none;
}

/* ── Corners everywhere else: cards, their icon tiles, alerts, badges ── */
html .card { border-radius: var(--dn-radius-card); }
html .card .card-header :is(.card-icon, .card-text) { border-radius: 12px; }
html .alert { border-radius: var(--dn-radius); }
html .badge {
  border-radius: var(--dn-radius-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
html .badge:is(.badge-secondary, .badge-white) { color: #13315C; background: #eef2f7; }

/* ── Card icon tiles and coloured card headers ───── */
html .card :is(.card-header-primary, .card-header-info, .card-header-success, .card-header-warning, .card-header-danger, .card-header-rose) :is(.card-icon, .card-text),
html .card :is(.card-header-primary, .card-header-info, .card-header-success, .card-header-warning, .card-header-danger, .card-header-rose):not(.card-header-icon):not(.card-header-text) {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 8px 18px -6px rgba(var(--rgb), 0.42), var(--dn-sheen);
}

/* ── Pills / tabs ────────────────────────────────── */
/* doubled class outranks Material's .nav-pills.nav-pills-{colour} variants: every active pill uses the brand blue */
html .nav-pills.nav-pills .nav-item .nav-link.active,
html .nav-pills.nav-pills .nav-item .nav-link.active:is(:hover, :focus) {
  color: #fff;
  background-color: var(--dn-primary-2);
  background-image: linear-gradient(135deg, var(--dn-primary-1), var(--dn-primary-2));
  box-shadow: 0 5px 14px rgba(var(--dn-primary-rgb), 0.28), var(--dn-sheen);
}

/* ── Badges and alerts ───────────────────────────── */
html .badge:is(.badge-primary, .badge-info, .badge-success, .badge-warning, .badge-danger, .badge-rose, .badge-default) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
}
html .alert:is(.alert-primary, .alert-info, .alert-success, .alert-warning, .alert-danger, .alert-rose) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 6px 18px -6px rgba(var(--rgb), 0.5);
}

/* ── Text accents (deep end, for contrast on white) ── */
html .text-primary { color: var(--dn-primary-2) !important; }
html .text-info { color: var(--dn-info-2) !important; }
html .text-success { color: var(--dn-success-2) !important; }
html .text-warning { color: var(--dn-warning-2) !important; }
html .text-danger { color: var(--dn-danger-2) !important; }

/* ── Full-screen navy pages (login, password reset…) ──
   On the navy artwork the standard primary header glows too brightly; use a deeper
   take on the same blue so the card sits in the scene rather than on top of it. */
html .page-header.dn-guest-bg .card .card-header-primary:not(.card-header-icon):not(.card-header-text) {
  background: linear-gradient(135deg, #1e5ad0, #143e9a);
  box-shadow: 0 10px 24px -8px rgba(0, 10, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Record cells: View button, incident priority, resolution status ──
   One look for every records table — the Responses list and the report's
   drill-down — with the markup built in App\Support\RecordBadges. */
.dn-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--dn-primary-2); color: #fff !important;
  font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.18);
  transition: background-color 0.12s;
}
.dn-view-btn:hover, .dn-view-btn:focus { background: var(--dn-primary-1); color: #fff; }
.dn-view-btn .material-icons { font-size: 16px; }

.dn-prio {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.dn-prio .material-icons { font-size: 16px; }
.dn-prio--high      { background: #fdecec; color: var(--dn-danger-2); }
.dn-prio--medium    { background: #fff1de; color: #b05f05; }
.dn-prio--low       { background: #e3f3fa; color: var(--dn-info-2); }
.dn-prio--satisfied { background: #e6f4eb; color: var(--dn-success-2); }
.dn-prio--uncategorized, .dn-prio--unknown { background: #eff2f6; color: #5d6a80; }

.dn-statuscell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dn-status {
  display: inline-block; padding: 2px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.dn-status--pending  { background: #fdecec; color: var(--dn-danger-2); }
.dn-status--progress { background: #fff1de; color: #b05f05; }
.dn-status--resolved { background: #e6f4eb; color: var(--dn-success-2); }
.dn-status--other    { background: #eff2f6; color: #5d6a80; }
.dn-timeleft { font-size: 11.5px; font-weight: 600; color: #6b7a8d; white-space: nowrap; }
.dn-timeleft.is-urgent { color: var(--dn-danger-2); }

/* ── Tables: a notch softer, to sit with the record labels ──
   Column headings small, muted and spaced (like the report's records list);
   body text a touch lighter; hairline rows; a barely-there stripe. Only the
   THEAD headings change — row headings in key/value tables keep their weight. */
html .table > thead > tr > th,
html table.dataTable > thead > tr > th,
html .dataTables_scrollHead table > thead > tr > th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a8d;
  border-bottom: 1px solid #e7ecf2;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
/* TID / Calls / Answer cells — marked by the layout script (layouts/app.blade.php). */
html td.dn-centre, html th.dn-centre { text-align: center; }
html .table > tbody > tr > td,
html table.dataTable > tbody > tr > td {
  font-size: 13.5px;
  color: #2d3a4a;
  border-top-color: #eef2f6;
}
html .table-striped > tbody > tr:nth-of-type(odd),
html table.dataTable.stripe > tbody > tr.odd,
html table.dataTable.display > tbody > tr.odd { background-color: #fafbfd; }
html .table-hover > tbody > tr:hover,
html table.dataTable.hover > tbody > tr:hover { background-color: #f4f7fb; }
/* Column search boxes and the table's own search / length controls */
html table.dataTable tfoot input,
html .dataTables_scrollFoot input,
html .dataTables_filter input {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e7ecf2;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: #2d3a4a;
  box-shadow: none;
}
html table.dataTable tfoot input:focus,
html .dataTables_scrollFoot input:focus,
html .dataTables_filter input:focus { outline: none; border-color: #13315C; box-shadow: 0 0 0 3px rgba(19, 49, 92, 0.12); }
html .dataTables_info, html .dataTables_length { color: #6b7a8d; font-size: 12.5px; }
/* The table's own search box: room for a real query. (Some pages cap every input,
   e.g. the Responses page's `input { max-width: 110px }` for its column searches.) */
html .dataTables_filter input { width: 260px; max-width: 100%; }
html .dataTables_filter label { width: auto; }
/* Pagination: the current page in the palette's navy, not Material's blue. */
html .pagination > .page-item.active > .page-link,
html .pagination > .page-item.active > .page-link:is(:hover, :focus) {
  background-color: var(--dn-primary-2);
  border-color: var(--dn-primary-2);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--dn-primary-rgb), 0.24);
}
html .pagination > .page-item > .page-link { color: #5d6a80; }

/* ── Headings: a notch softer ──────────────────────
   Material's large, thin grey headings ("Response Details", "Teams Recordings",
   card titles) become navy, semibold and a little smaller, like the newer
   screens' titles. Wrapped in :where() so they carry almost no weight: any
   screen with its own heading classes (report composer .rb-*, live report)
   keeps its own look. Headings on a coloured card header stay white. */
:where(.main-panel .content, .modal) :is(h1, .h1) { font-size: 1.75rem; }
:where(.main-panel .content, .modal) :is(h2, .h2) { font-size: 1.375rem; }
:where(.main-panel .content, .modal) :is(h3, .h3) { font-size: 1.25rem; }
:where(.main-panel .content, .modal) :is(h4, .h4) { font-size: 1.0625rem; }
:where(.main-panel .content, .modal) :is(h1, h2, h3, h4, .card-title, .modal-title) {
  font-weight: 600;
  color: #0B2545;
  letter-spacing: -0.005em;
}
html .card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text) :is(.card-title, h1, h2, h3, h4) { color: #fff; }
:where(.main-panel .content) .card-category { color: #6b7a8d; }
/* Material styles a card title beside an icon tile more specifically (#3C4858, 300),
   so it needs saying here too. The dashboard stat tiles keep theirs — that
   "title" is the big number. */
html .card:not(.card-stats) .card-header:is(.card-header-icon, .card-header-text) :is(.card-title, h4) {
  color: #0B2545;
  font-weight: 600;
}

/* ── Stat tiles (Total / Pending / In progress / Resolved…) ──
   One line for the label, so a longer one ("Total Incidents") can't wrap and
   make its tile taller than its neighbours; and tiles in a row stretch to the
   same height whatever their content. */
html .card-stats .card-header .card-category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .row > [class*="col-"]:has(> .card.card-stats) { display: flex; flex-direction: column; }
html .row > [class*="col-"] > .card.card-stats { flex: 1 1 auto; }

/* ── Dropdown menus (bootstrap-select pickers, nav menus) ──
   Material highlights the hovered / focused / chosen item in its old blue
   (#1c8adb) with a blue glow. The palette's navy instead, softly rounded. */
html .dropdown-menu :is(.dropdown-item, a):is(:hover, :focus, :active, .active),
html .dropdown-menu li.selected > a,
html .dropdown-menu li.active > a {
  background-color: var(--dn-primary-2);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--dn-primary-rgb), 0.2);
}
html .dropdown-menu :is(.dropdown-item, li > a) { border-radius: 8px; }