/* =====================================================================
   Death Register - shared styles for all module pages
     admin/c_a_death_config.jsp   user/c_u_death_config.jsp
     admin/c_a_death_entry.jsp    user/c_u_death_entry.jsp
     admin/c_a_death_dashboard.jsp  user/c_u_death_dashboard.jsp
     admin/c_a_death_activity.jsp

   THE RULES (2026-09-14: the page used to be white-only; it is now allowed
   colour, and the type was lightened):
     1. White stays the page and card background, but headers, table heads and
        dialog heads sit on a soft tint so the eye finds them, and every icon
        carries a colour of its own.
     2. Each area has an accent: indigo leads (primary buttons, tabs, headings),
        blue = in progress, green = done / approved, amber = waiting, teal =
        information, rose / red = destructive and errors. Status chips are a soft
        tint plus a matching text colour.
     3. Type follows the application font - nothing here sets a font family, so
        the theme's stack is inherited. Weights stop at 600; there are no 700 or
        800 headings, and micro-labels are uppercase at 600 with light tracking.

   Every rule is namespaced .dr-* / #dr* so nothing leaks into the theme.
   Below 900px tables collapse into stacked cards.

   The palette lives in :root below; the accents are applied in the
   "colour pass" section at the end of this file.
   ===================================================================== */

:root {
	/* ---- primary ---- */
	--drx-brand:        #4f46e5;   /* indigo: primary buttons, active tab, links */
	--drx-brand-dark:   #4338ca;
	--drx-focus:        rgba(79,70,229,.18);

	/* ---- status ---- */
	--drx-success:      #16a34a;
	--drx-success-text: #15803d;
	--drx-progress:     #2563eb;
	--drx-progress-text:#1d4ed8;

	--drx-danger:       #dc2626;
	--drx-danger-dark:  #b91c1c;

	/* ---- accents, each with a soft tint for fills ---- */
	--drx-indigo:      #4f46e5;   --drx-indigo-soft: #eef2ff;
	--drx-blue:        #2563eb;   --drx-blue-soft:   #eff6ff;
	--drx-teal:        #0d9488;   --drx-teal-soft:   #f0fdfa;
	--drx-amber:       #b45309;   --drx-amber-soft:  #fffbeb;
	--drx-green:       #15803d;   --drx-green-soft:  #f0fdf4;
	--drx-rose:        #be123c;   --drx-rose-soft:   #fff1f2;
	--drx-violet:      #6d28d9;   --drx-violet-soft: #f5f3ff;

	/* ---- surfaces + text ---- */
	--drx-white:   #ffffff;
	--drx-surface: #f8fafc;   /* headers, table heads, dialog heads */
	--drx-ink:     #0f172a;
	--drx-body:    #334155;
	--drx-muted:   #64748b;
	--drx-faint:   #94a3b8;
	--drx-line:    #e2e8f0;
	--drx-line2:   #eef2f6;
	--drx-hover:   #f1f5f9;

	--drx-r:   12px;
	--drx-r-s: 9px;

	--drx-overlay:    rgba(15,23,42,.40);
	--drx-shadow-pop: 0 16px 44px rgba(15,23,42,.16);
}

#main-container .content { background: var(--drx-white); }
.dr-wrap { max-width: 1560px; margin: 0 auto; padding-bottom: 20px; }
.dr-wrap *, .dr-modal-shell *, .dr-savebar * { box-sizing: border-box; }
.dr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------- page heading */
.dr-hero {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--drx-line);
}
.dr-hero-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dr-hero-ico {
	width: 44px; height: 44px; border-radius: var(--drx-r-s); flex: 0 0 44px;
	border: 1px solid var(--drx-line); color: var(--drx-ink);
	display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.dr-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted); }
.dr-hero h2 { margin: 1px 0 0; font-size: 21px; font-weight: 600; color: var(--drx-ink);  }
.dr-hero p  { margin: 3px 0 0; font-size: 12.5px; color: var(--drx-muted); line-height: 1.5; }
.dr-hero-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* save state: green when saved, blue while there are unsaved changes */
.dr-savestate {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
	border: 1px solid var(--drx-line); font-size: 12px; font-weight: 600; color: var(--drx-muted); white-space: nowrap;
}
.dr-savestate .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dr-savestate.is-saved { border-color: var(--drx-success); color: var(--drx-success-text); }
.dr-savestate.is-dirty { border-color: var(--drx-progress); color: var(--drx-progress-text); }
.dr-savestate.is-dirty .dot { animation: drpulse 1.4s ease-in-out infinite; }
@keyframes drpulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------- buttons */
.dr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 10px 16px; border-radius: var(--drx-r-s); border: 1px solid transparent;
	font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s; white-space: nowrap; font-family: inherit;
}
.dr-btn i { font-size: 12px; }
.dr-btn:focus { outline: 2px solid var(--drx-focus); outline-offset: 1px; }
.dr-btn[disabled] { opacity: .5; cursor: not-allowed; }
.dr-btn-primary { background: var(--drx-brand); color: #fff; }
.dr-btn-primary:hover:not([disabled]) { background: var(--drx-brand-dark); color: #fff; }
.dr-btn-ghost { background: var(--drx-white); color: var(--drx-body); border-color: var(--drx-line); }
.dr-btn-ghost:hover:not([disabled]) { background: var(--drx-hover); color: var(--drx-ink); border-color: #cbd5e1; }
.dr-btn-outline { background: var(--drx-white); color: var(--drx-brand); border-color: var(--drx-brand); }
.dr-btn-outline:hover:not([disabled]) { background: var(--drx-brand); color: #fff; }
.dr-btn-danger { background: var(--drx-danger); color: #fff; }
.dr-btn-danger:hover:not([disabled]) { background: var(--drx-danger-dark); color: #fff; }
.dr-btn-sm { padding: 7px 12px; font-size: 12px; }

.dr-ibtn {
	width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--drx-line);
	background: var(--drx-white); color: var(--drx-body); cursor: pointer; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
	transition: color .15s, border-color .15s;
}
.dr-ibtn:hover:not([disabled]) { color: var(--drx-brand); border-color: var(--drx-brand); }
.dr-ibtn:focus { outline: 2px solid var(--drx-focus); outline-offset: 1px; }
.dr-ibtn[disabled] { color: #cbd5e1; cursor: not-allowed; }
.dr-ibtn.is-del:hover:not([disabled]) { color: var(--drx-danger); border-color: var(--drx-danger); }

/* ---------------------------------------------------------- switch
   A switch is a control, so it carries colour: green when on (success). */
.dr-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; vertical-align: middle; margin: 0; }
.dr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dr-switch-ui {
	position: relative; width: 44px; height: 24px; border-radius: 999px; flex: 0 0 44px;
	border: 1px solid #cbd5e1; background: var(--drx-white); transition: background .18s, border-color .18s;
}
.dr-switch-ui:after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
	background: #cbd5e1; transition: transform .18s, background .18s;
}
.dr-switch input:checked + .dr-switch-ui { background: var(--drx-success); border-color: var(--drx-success); }
.dr-switch input:checked + .dr-switch-ui:after { transform: translateX(20px); background: #fff; }
.dr-switch input:focus-visible + .dr-switch-ui { box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-switch input:disabled + .dr-switch-ui { opacity: .45; cursor: not-allowed; }
.dr-switch-text { margin-left: 8px; font-size: 12px; color: var(--drx-muted); display: none; }

/* ---------------------------------------------------------- stat tiles */
.dr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dr-stat {
	background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: var(--drx-r);
	padding: 14px 16px; display: flex; align-items: center; gap: 13px; min-width: 0;
}
.dr-stat-ico {
	width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--drx-r-s);
	border: 1px solid var(--drx-line); color: var(--drx-muted);
	display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.dr-stat > div { min-width: 0; }
.dr-stat-k { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted); }
.dr-stat-v { font-size: 24px; font-weight: 600; color: var(--drx-ink); line-height: 1.15; margin: 2px 0 1px; }
.dr-stat-v.is-text { font-size: 14px; font-weight: 600; margin: 5px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-stat-s { font-size: 11.5px; color: var(--drx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-stat-s span.ok { color: var(--drx-success-text); font-weight: 600; }

/* ---------------------------------------------------------- toolbar */
.dr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dr-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.dr-search i {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--drx-faint); font-size: 12.5px; pointer-events: none;
}
.dr-search input {
	width: 100%; padding: 9px 12px 9px 33px; border: 1px solid var(--drx-line);
	border-radius: var(--drx-r-s); font-size: 13px; color: var(--drx-body); background: var(--drx-white); font-family: inherit;
}
.dr-search input:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-toolbar-sp { flex: 1 1 auto; }

/* ---------------------------------------------------------- section cards */
.dr-sections { display: flex; flex-direction: column; gap: 14px; }
.dr-sec { background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.dr-sec.has-err { border-color: var(--drx-danger); }

.dr-sec-head {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px;
	border-bottom: 1px solid var(--drx-line);
}
.dr-sec.is-collapsed .dr-sec-head { border-bottom-color: transparent; }
.dr-move { display: inline-flex; gap: 4px; flex: 0 0 auto; }

.dr-sec-title { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.dr-sec-name {
	font-size: 15px; font-weight: 600; color: var(--drx-ink); font-family: inherit;
	border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; margin-left: -8px;
	background: transparent; min-width: 120px; max-width: 100%; width: 22ch;
}
.dr-sec-name:hover { border-color: var(--drx-line); }
.dr-sec-name:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-sec-name.err { border-color: var(--drx-danger); }
.dr-sec.is-off .dr-sec-name { color: var(--drx-muted); }

.dr-count { font-size: 12px; color: var(--drx-muted); white-space: nowrap; }
.dr-count.is-all { color: var(--drx-success-text); font-weight: 600; }

.dr-chip {
	display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
	padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap;
	border: 1px solid var(--drx-line); color: var(--drx-muted); background: transparent;
}
.dr-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dr-chip.is-new { border-color: var(--drx-progress); color: var(--drx-progress-text); }

.dr-sec-tools { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dr-collapse i { transition: transform .18s; }
.dr-sec.is-collapsed .dr-collapse i { transform: rotate(-90deg); }
.dr-sec.is-collapsed .dr-sec-body { display: none; }
.dr-sec-err { margin: 0; padding: 8px 16px 0; font-size: 11.5px; color: var(--drx-danger); font-weight: 600; }

.dr-sec-body { padding: 0 14px 6px; }
.dr-sec.is-off .dr-sec-body { opacity: .62; }
.dr-sec-off-note {
	display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 12px; color: var(--drx-muted);
}
.dr-sec-foot { padding: 10px 2px 8px; display: flex; gap: 8px; }
.dr-sec-empty { padding: 20px 4px 6px; font-size: 12.5px; color: var(--drx-muted); }

/* ---------------------------------------------------------- field table */
.dr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dr-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
.dr-table thead th {
	text-align: left; padding: 12px 10px 10px; font-size: 10.5px; font-weight: 600;
	letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted);
	background: var(--drx-white); border-bottom: 1px solid var(--drx-line); white-space: nowrap;
}
.dr-table tbody td {
	padding: 9px 10px; border-bottom: 1px solid var(--drx-line2); color: var(--drx-body); vertical-align: middle;
}
.dr-table tbody tr:last-child td { border-bottom: 0; }
.dr-table th.c-move, .dr-table td.c-move { width: 72px; }
.dr-table th.c-type, .dr-table td.c-type { width: 190px; }
.dr-table th.c-on,   .dr-table td.c-on   { width: 92px; }
.dr-table th.c-req,  .dr-table td.c-req  { width: 104px; }
.dr-table th.c-ord,  .dr-table td.c-ord  { width: 64px; }
.dr-table th.c-vals, .dr-table td.c-vals { width: 34%; }
.dr-table th.c-act,  .dr-table td.c-act  { width: 44px; text-align: center; }

.dr-row.is-off .dr-name-input { color: var(--drx-muted); }
.dr-row.is-off td.c-ord { color: #cbd5e1; }

.dr-name-input {
	width: 100%; font-size: 13.5px; font-weight: 600; color: var(--drx-ink); font-family: inherit;
	border: 1px solid transparent; border-radius: 7px; padding: 7px 8px; margin-left: -8px; background: transparent;
}
.dr-name-input:hover { border-color: var(--drx-line); }
.dr-name-input:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-name-input.err { border-color: var(--drx-danger); }
.dr-name-line { display: flex; align-items: center; gap: 8px; }
.dr-note { display: block; font-size: 11.5px; color: var(--drx-muted); margin-top: 1px; line-height: 1.45; }
.dr-note i { margin-right: 3px; }
.dr-order { font-size: 12px; color: var(--drx-faint); font-variant-numeric: tabular-nums; }
.dr-lock { color: #cbd5e1; font-size: 13px; cursor: help; }

.dr-input, .dr-select, .dr-textarea {
	width: 100%; padding: 8px 11px; border: 1px solid var(--drx-line);
	border-radius: 8px; font-size: 13px; color: var(--drx-ink);
	background: var(--drx-white); font-family: inherit; transition: border-color .15s, box-shadow .15s;
	height: auto; min-height: 36px;
}
.dr-select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 30px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center;
}
.dr-textarea { min-height: 78px; resize: vertical; line-height: 1.55; }
.dr-input:focus, .dr-select:focus, .dr-textarea:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-input.err, .dr-select.err, .dr-textarea.err { border-color: var(--drx-danger); }
.dr-input::placeholder, .dr-textarea::placeholder { color: var(--drx-faint); }
.dr-err { margin: 5px 0 0; font-size: 11.5px; color: var(--drx-danger); font-weight: 600; }

/* Department / Building: type fixed to select - shown as a read-only value, dashed not filled */
.dr-type-locked {
	display: inline-flex; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 8px 11px;
	border: 1px dashed var(--drx-line); border-radius: 8px; font-size: 13px; color: var(--drx-muted); cursor: default;
}
.dr-type-locked i { font-size: 11px; color: #cbd5e1; }

/* dropdown values sourced from elsewhere in the application */
.dr-source { font-size: 12px; line-height: 1.5; color: var(--drx-muted); display: block; }
.dr-source b { color: var(--drx-body); font-weight: 600; }
.dr-source.is-loading { color: var(--drx-progress-text); }
.dr-source.is-empty { color: var(--drx-muted); font-style: italic; }
.dr-opt-count { display: block; font-size: 11px; color: var(--drx-faint); margin-top: 4px; }

/* ---------------------------------------------------------- empty + loading */
.dr-empty { padding: 50px 22px; text-align: center; border: 1px dashed var(--drx-line); border-radius: var(--drx-r); }
.dr-empty-ico {
	width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; border: 1px solid var(--drx-line);
	color: var(--drx-faint); display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.dr-empty h4 { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: var(--drx-ink); }
.dr-empty p { margin: 0 auto 16px; font-size: 12.5px; color: var(--drx-muted); max-width: 400px; line-height: 1.6; }
.dr-empty.is-error h4 { color: var(--drx-danger); }

.dr-loading { padding: 54px 20px; text-align: center; color: var(--drx-muted); font-size: 13px; }
.dr-spin {
	width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%;
	border: 3px solid var(--drx-line); border-top-color: var(--drx-progress); animation: drspin .7s linear infinite;
}
@keyframes drspin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- floating save bar
   Appears only while there are unsaved changes AND the heading's Save button
   has scrolled out of view. White bar, blue status text, coloured buttons. */
.dr-savebar {
	position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 1400;
	display: flex; align-items: center; gap: 14px; background: var(--drx-white);
	border: 1px solid var(--drx-line); border-radius: 14px; padding: 10px 10px 10px 18px;
	box-shadow: var(--drx-shadow-pop); transition: transform .22s ease; max-width: calc(100% - 28px);
}
.dr-savebar.show { transform: translate(-50%, 0); }
.dr-savebar-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--drx-progress-text); white-space: nowrap; }
.dr-savebar-text .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--drx-progress); }
.dr-savebar-btns { display: flex; gap: 8px; }

/* ---------------------------------------------------------- modals */
.dr-modal-shell {
	display: none; position: fixed; inset: 0; z-index: 1500; background: var(--drx-overlay);
	padding: 22px; align-items: flex-start; justify-content: center; overflow-y: auto;
}
.dr-modal-shell.open { display: flex; }
#drConfirmModal { z-index: 1600; }
.dr-modal {
	background: var(--drx-white); border-radius: 14px; width: 100%; max-width: 560px;
	box-shadow: var(--drx-shadow-pop); margin: auto; animation: drpop .18s ease-out;
	display: flex; flex-direction: column; max-height: calc(100vh - 44px);
}
.dr-modal.sm { max-width: 430px; }
.dr-modal.lg { max-width: 980px; }
@keyframes drpop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.dr-modal-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
	padding: 18px 22px 15px; border-bottom: 1px solid var(--drx-line); flex: 0 0 auto;
}
.dr-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--drx-ink); }
.dr-modal-head p  { margin: 4px 0 0; font-size: 12.5px; color: var(--drx-muted); line-height: 1.55; }
.dr-x {
	width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 1px solid var(--drx-line);
	background: var(--drx-white); color: var(--drx-muted); cursor: pointer; font-size: 13px;
	display: inline-flex; align-items: center; justify-content: center;
}
.dr-x:hover { color: var(--drx-ink); border-color: #cbd5e1; }
.dr-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1 1 auto; }
.dr-modal-foot {
	display: flex; justify-content: flex-end; align-items: center; gap: 9px; padding: 14px 22px;
	border-top: 1px solid var(--drx-line); background: var(--drx-white); border-radius: 0 0 14px 14px; flex: 0 0 auto;
}
.dr-modal-foot .dr-foot-note { margin-right: auto; font-size: 12px; color: var(--drx-muted); }
.dr-confirm-body { margin: 0; font-size: 13px; line-height: 1.65; color: var(--drx-body); }

/* ---------------------------------------------------------- form preview */
.dr-pv-sec { border: 1px solid var(--drx-line); border-radius: var(--drx-r); padding: 0; margin: 0 0 14px; min-width: 0; }
.dr-pv-sec:last-child { margin-bottom: 0; }
.dr-pv-sec > legend {
	float: left; width: 100%; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--drx-line);
	font-size: 13.5px; font-weight: 600; color: var(--drx-ink);
}
.dr-pv-sec > legend + * { clear: both; }
.dr-pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px; }
.dr-pv-field { min-width: 0; }
.dr-pv-field.is-wide { grid-column: 1 / -1; }
.dr-label {
	display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
	text-transform: uppercase; color: var(--drx-body); margin-bottom: 6px;
}
.dr-label .req { color: var(--drx-danger); }
.dr-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--drx-faint); font-size: 11px; }
.dr-pv-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-pv-check {
	display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; margin: 0;
	border: 1px solid var(--drx-line); border-radius: 999px; font-size: 12.5px; color: var(--drx-body);
	cursor: pointer; font-weight: 500;
}
.dr-pv-check input { margin: 0; accent-color: var(--drx-brand); }
.dr-pv-check.on { border-color: var(--drx-brand); color: var(--drx-brand-dark); }
.dr-pv-check.err { border-color: var(--drx-danger); }
.dr-pv-hint { font-size: 11.5px; color: var(--drx-muted); margin: 5px 0 0; }
.dr-pv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: var(--drx-muted); }

/* ---------------------------------------------------------- toasts */
.dr-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1700; display: flex; flex-direction: column; gap: 9px; }
.dr-toast {
	display: flex; align-items: center; gap: 10px; background: var(--drx-white); color: var(--drx-ink);
	border: 1px solid var(--drx-line); padding: 12px 16px; border-radius: var(--drx-r-s); font-size: 13px;
	box-shadow: var(--drx-shadow-pop); max-width: 400px; animation: drslide .2s ease-out;
}
.dr-toast i { font-size: 15px; color: var(--drx-success); }
.dr-toast.err i  { color: var(--drx-danger); }
.dr-toast.info i { color: var(--drx-progress); }
@keyframes drslide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1200px) {
	.dr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.dr-sec-head { flex-wrap: wrap; row-gap: 8px; }
	.dr-sec-title { order: 3; flex: 1 1 100%; }
	.dr-sec-name { width: 100%; }
	.dr-sec-tools { margin-left: auto; }
	.dr-sec-body { padding: 0 12px 6px; }

	/* each field becomes a card; header cells re-appear as labels through data-label.
	   tr/td widths stay auto - a 100%-wide block tr plus margins would push the page sideways. */
	.dr-table-wrap { overflow-x: visible; }
	table.dr-table { display: block; min-width: 0; width: 100%; }
	.dr-table thead { display: none; }
	.dr-table tbody { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
	.dr-table tbody tr {
		display: flex; flex-wrap: wrap; border: 1px solid var(--drx-line); border-radius: var(--drx-r);
		background: var(--drx-white);
	}
	.dr-table tbody td {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: auto !important; border-bottom: 1px solid var(--drx-line2); padding: 9px 12px;
	}
	.dr-table tbody tr:last-child td { border-bottom: 1px solid var(--drx-line2); }
	.dr-table tbody td:before {
		content: attr(data-label); flex: 0 0 auto; font-size: 10.5px; font-weight: 600;
		letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted);
	}
	.dr-table td.c-name { order: 1; flex: 1 1 100%; display: block; padding: 10px 12px; border-bottom-color: var(--drx-line); }
	.dr-table td.c-name:before { content: none; }
	.dr-table td.c-name .dr-name-input { margin-left: -8px; }
	.dr-table td.c-type { order: 2; flex: 1 1 100%; }
	.dr-table td.c-type .dr-select { max-width: 60%; }
	.dr-table td.c-type .dr-type-locked { width: auto; }
	.dr-table td.c-on   { order: 3; flex: 1 1 50%; }
	.dr-table td.c-req  { order: 4; flex: 1 1 50%; }
	.dr-table td.c-vals { order: 5; flex: 1 1 100%; display: block; }
	.dr-table td.c-vals:before { display: block; margin-bottom: 6px; }
	.dr-table td.c-move { order: 6; flex: 1 1 auto; border-bottom: 0 !important; }
	.dr-table td.c-ord  { display: none; }
	.dr-table td.c-act  { order: 7; flex: 0 0 auto; border-bottom: 0 !important; justify-content: flex-end; }
	.dr-table td.c-act:before { content: none; }
	.dr-table td.c-move:before { content: "Order " attr(data-pos); }
}

@media (max-width: 620px) {
	.dr-hero-r { width: 100%; }
	.dr-hero-r .dr-btn { flex: 1 1 auto; }
	.dr-savestate { flex: 1 1 100%; justify-content: center; }
	.dr-stats { gap: 8px; }
	.dr-stat { padding: 11px 12px; gap: 10px; }
	.dr-stat-ico { display: none; }
	.dr-stat-v { font-size: 20px; }
	.dr-search { flex: 1 1 100%; max-width: none; }
	.dr-toolbar .dr-btn { flex: 1 1 auto; }
	.dr-toolbar-sp { display: none; }
	.dr-table td.c-type .dr-select { max-width: none; flex: 1 1 auto; }
	.dr-table td.c-on, .dr-table td.c-req { flex: 1 1 100%; }
	.dr-pv-grid { grid-template-columns: 1fr; padding: 14px; }
	.dr-modal-shell { padding: 0; }
	.dr-modal, .dr-modal.lg, .dr-modal.sm { max-width: none; border-radius: 14px 14px 0 0; margin: auto 0 0; max-height: 94vh; }
	.dr-modal-foot { border-radius: 0; flex-wrap: wrap; }
	.dr-modal-foot .dr-foot-note { flex: 1 1 100%; }
	.dr-modal-foot .dr-btn { flex: 1 1 0; }
	.dr-savebar { left: 12px; right: 12px; transform: translateY(140%); max-width: none; padding: 10px 12px; flex-wrap: wrap; justify-content: center; }
	.dr-savebar.show { transform: translateY(0); }
	.dr-savebar-btns { flex: 1 1 100%; }
	.dr-savebar-btns .dr-btn { flex: 1 1 0; }
	.dr-toasts { left: 14px; right: 14px; bottom: 14px; }
	.dr-toast { max-width: none; }
}

/* =====================================================================
   Register entries page
     admin/c_a_death_entry.jsp
     user/c_u_death_entry.jsp
   Same white-theme rules as above. Handover status is the one status here:
   Handed Over = green (success), Pending = blue (in progress), anything else
   neutral.
   ===================================================================== */

/* ---------------------------------------------------------- module nav
   The active link is a button, so it is the one filled element. */
.dr-modnav {
	display: flex; gap: 4px; flex-wrap: wrap; background: var(--drx-white);
	border: 1px solid var(--drx-line); border-radius: 999px; padding: 4px;
	margin-bottom: 18px; max-width: max-content;
}
.dr-modnav a {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 999px;
	font-size: 13px; font-weight: 600; color: var(--drx-muted); text-decoration: none;
}
.dr-modnav a:hover { color: var(--drx-brand); text-decoration: none; }
.dr-modnav a.active { background: var(--drx-brand); color: #fff; }
.dr-modnav a.active:hover { color: #fff; }

/* ---------------------------------------------------------- list panel */
.dr-panel { background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.dr-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--drx-line); }
.dr-filterbar .dr-search { max-width: 340px; }
.dr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--drx-line); }
.dr-filters .dr-fsel { min-width: 170px; }
.dr-list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#drActionModal { z-index: 1600; }

/* ---------------------------------------------------------- date range picker
   Presets on the left, two months, the chosen range + Clear / Apply underneath.
   The trigger, the active preset and the two end dates are buttons, so they are
   blue; days inside the range are day buttons with a pale blue tint. */
.dr-rp { position: relative; }
.dr-rp-trigger { gap: 9px; }
.dr-rp-pop {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 1300; width: 790px; max-width: calc(100vw - 32px);
	background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: 14px;
	box-shadow: var(--drx-shadow-pop); animation: drpop .16s ease-out;
}
.dr-rp-pop[hidden] { display: none; }
.dr-rp-main { display: flex; }
.dr-rp-presets { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-right: 1px solid var(--drx-line); }
.dr-rp-preset {
	appearance: none; text-align: left; border: 1px solid var(--drx-line); background: var(--drx-white); border-radius: 9px;
	padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--drx-body); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.dr-rp-preset:hover { border-color: #cbd5e1; color: var(--drx-ink); }
.dr-rp-preset.active { background: var(--drx-brand); border-color: var(--drx-brand); color: #fff; }
.dr-rp-cals { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 16px 20px 12px; min-width: 0; }
.dr-rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dr-rp-head b { font-size: 14.5px; font-weight: 600; color: var(--drx-ink); }
.dr-rp-nav {
	width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--drx-line); background: var(--drx-white);
	color: var(--drx-body); cursor: pointer; font-size: 15px; padding: 0;
}
.dr-rp-nav:hover { color: var(--drx-brand); border-color: var(--drx-brand); }
.dr-rp-cal.first .next, .dr-rp-cal.second .prev { visibility: hidden; }
table.dr-rp-grid { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.dr-rp-grid th { font-size: 11px; font-weight: 600; color: var(--drx-faint); text-align: center; padding: 4px 0 6px; letter-spacing: .5px; }
.dr-rp-grid td { padding: 0; text-align: center; }
.dr-rp-day {
	appearance: none; position: relative; width: 100%; height: 40px; border: 0; background: transparent;
	font-size: 13.5px; color: var(--drx-ink); cursor: pointer; font-family: inherit; padding: 0;
}
.dr-rp-day:hover { color: var(--drx-brand); }
.dr-rp-day.in-range { background: #eff6ff; color: var(--drx-brand-dark); }
.dr-rp-day.is-end { background: var(--drx-brand); color: #fff; border-radius: 999px; font-weight: 600; }
.dr-rp-day.is-today:not(.is-end):after {
	content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px;
	border-radius: 50%; background: var(--drx-brand);
}
.dr-rp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--drx-line); }
.dr-rp-foot > span { margin-right: auto; font-size: 13.5px; font-weight: 600; color: var(--drx-ink); }

/* ---------------------------------------------------------- row actions (text buttons) */
.dr-acts { display: inline-flex; gap: 6px; }
.dr-act {
	appearance: none; border: 0; border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600;
	line-height: 1.2; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s;
}
.dr-act:focus-visible { outline: 2px solid var(--drx-focus); outline-offset: 1px; }
.dr-act.is-view, .dr-act.is-edit, .dr-act.is-go { background: #eff6ff; color: var(--drx-brand-dark); }
.dr-act.is-view:hover, .dr-act.is-edit:hover, .dr-act.is-go:hover { background: #dbeafe; }
.dr-act.is-cancel { background: #fef2f2; color: var(--drx-danger-dark); }
.dr-act.is-cancel:hover { background: #fee2e2; }
.dr-act.is-pdf { background: #f1f5f9; color: var(--drx-body); }
.dr-act.is-pdf:hover { background: #e2e8f0; }

.dr-sort {
	appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit;
	text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.dr-sort:hover { color: var(--drx-ink); }
.dr-chip.is-closed { border-color: var(--drx-ink); color: var(--drx-ink); }

.dr-view-trail { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.dr-view-trail li { padding: 10px 14px; border-bottom: 1px solid var(--drx-line2); font-size: 13px; color: var(--drx-body); }
.dr-view-trail li:last-child { border-bottom: 0; }
.dr-view-trail li b { color: var(--drx-ink); }
.dr-view-trail li small { display: block; margin-top: 2px; color: var(--drx-muted); font-size: 12px; white-space: pre-wrap; }
.dr-foot-sp { flex: 1 1 auto; }
.dr-action-field { margin-top: 14px; }
.dr-fsel { width: auto; max-width: 230px; }
/* a filter that is narrowing something: blue border and text, no fill */
.dr-fsel.on { border-color: var(--drx-brand); color: var(--drx-brand-dark); font-weight: 600; }

table.dr-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.dr-list thead th {
	text-align: left; padding: 11px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
	text-transform: uppercase; color: var(--drx-muted); border-bottom: 1px solid var(--drx-line); white-space: nowrap;
}
.dr-list tbody td { padding: 12px 14px; border-bottom: 1px solid var(--drx-line2); color: var(--drx-body); vertical-align: middle; }
.dr-list tbody tr { cursor: pointer; }
.dr-list tbody tr:last-child td { border-bottom: 0; }
/* no row fill on hover (white theme) - the patient name picks up the link colour instead */
.dr-list tbody tr:hover .dr-cell > b { color: var(--drx-brand); }
.dr-cell b { display: block; color: var(--drx-ink); font-weight: 600; font-size: 13.5px; }
.dr-cell small { display: block; color: var(--drx-muted); font-size: 11.5px; margin-top: 2px; }
.dr-recno { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.dr-dash { color: #cbd5e1; }
.dr-list th, .dr-list td { white-space: nowrap; }
/* the actions stay in reach while the wide table scrolls sideways */
.dr-list th.c-actions, .dr-list td.c-actions {
	position: sticky; right: 0; z-index: 1; background: var(--drx-white); box-shadow: inset 1px 0 0 var(--drx-line);
}
.dr-row-actions { display: inline-flex; gap: 6px; }
.dr-list .dr-ibtn { width: 32px; height: 32px; }

.dr-chip.is-success  { border-color: var(--drx-success);  color: var(--drx-success-text); }
.dr-chip.is-progress { border-color: var(--drx-progress); color: var(--drx-progress-text); }
.dr-stat-s span.prog { color: var(--drx-progress-text); font-weight: 600; }

/* ---------------------------------------------------------- entry form (full-screen sheet) */
.dr-sheet-shell {
	display: none; position: fixed; inset: 0; z-index: 1500; background: var(--drx-overlay);
	padding: 18px; align-items: stretch; justify-content: center;
}
.dr-sheet-shell.open { display: flex; }
.dr-sheet {
	background: var(--drx-white); border-radius: 14px; width: 100%; max-width: 1100px;
	display: flex; flex-direction: column; max-height: calc(100vh - 36px); margin: auto;
	box-shadow: var(--drx-shadow-pop); animation: drpop .18s ease-out;
}
.dr-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 22px 12px; }
.dr-sheet-head h3 { margin: 1px 0 0; font-size: 18px; font-weight: 600; color: var(--drx-ink); }
.dr-sheet-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--drx-muted); }
.dr-sheet-nav {
	display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: 0 22px 12px; border-bottom: 1px solid var(--drx-line); flex: 0 0 auto;
}
.dr-sheet-nav button {
	appearance: none; background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: 999px;
	padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--drx-muted); white-space: nowrap;
	cursor: pointer; font-family: inherit;
}
.dr-sheet-nav button:hover { color: var(--drx-ink); border-color: #cbd5e1; }
.dr-sheet-nav button.active { border-color: var(--drx-brand); color: var(--drx-brand-dark); }
.dr-sheet-nav button.has-err { border-color: var(--drx-danger); color: var(--drx-danger); }
.dr-sheet-body { position: relative; overflow-y: auto; padding: 18px 22px; flex: 1 1 auto; }
.dr-sheet-foot {
	display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 22px;
	border-top: 1px solid var(--drx-line); flex: 0 0 auto;
}
.dr-sheet-foot .dr-foot-note { margin-right: auto; font-size: 12px; color: var(--drx-muted); }
.dr-sheet-foot .dr-foot-note .req, .dr-label .req { color: var(--drx-danger); }
.dr-fld.has-err .dr-label { color: var(--drx-danger); }

/* ---------------------------------------------------------- entry view */
.dr-view-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dr-view-sec { border: 1px solid var(--drx-line); border-radius: var(--drx-r); margin-bottom: 14px; }
.dr-view-sec:last-child { margin-bottom: 0; }
.dr-view-h { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--drx-line); font-size: 13.5px; font-weight: 600; color: var(--drx-ink); }
.dr-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 14px 16px; margin: 0; }
.dr-view-item { min-width: 0; }
.dr-view-item.is-wide { grid-column: 1 / -1; }
.dr-view-item dt { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted); }
.dr-view-item dd { margin: 3px 0 0; font-size: 13.5px; color: var(--drx-ink); white-space: pre-wrap; word-break: break-word; }
#drViewModal .dr-modal-foot { flex-wrap: wrap; }

@media (max-width: 900px) {
	.dr-list, .dr-list tbody, .dr-list tr, .dr-list td { display: block; width: auto; }
	.dr-list thead { display: none; }
	.dr-list tbody tr { display: flex; flex-direction: column; border: 1px solid var(--drx-line); border-radius: var(--drx-r); margin: 12px 14px; }
	.dr-list-wrap { overflow-x: visible; }
	.dr-list th, .dr-list td { white-space: normal; }
	.dr-list td.c-patient { order: -1; }
	/* a card leaves out what was never filled in */
	.dr-list td.is-empty { display: none !important; }
	.dr-list td.c-actions { position: static; box-shadow: none; }
	.dr-acts { flex-wrap: wrap; justify-content: flex-end; }
	.dr-rp-pop { position: fixed; left: 10px; right: 10px; top: 64px; width: auto; max-width: none; max-height: calc(100vh - 80px); overflow-y: auto; }
	.dr-rp-main { flex-direction: column; }
	.dr-rp-presets { flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--drx-line); padding: 12px; }
	.dr-rp-preset { padding: 8px 12px; font-size: 12.5px; }
	.dr-rp-cals { grid-template-columns: 1fr; padding: 12px 14px 8px; }
	.dr-rp-cal.second { display: none; }
	.dr-rp-cal.first .next { visibility: visible; }
	.dr-list tbody td {
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		padding: 10px 14px; border-bottom: 1px solid var(--drx-line2); text-align: right;
	}
	.dr-list tbody td:before {
		content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 10.5px; font-weight: 600;
		letter-spacing: .4px; text-transform: uppercase; color: var(--drx-muted);
	}
	.dr-list tbody tr:last-child td { border-bottom: 1px solid var(--drx-line2); }
	.dr-list td.c-main { display: block; text-align: left; padding: 13px 14px; border-bottom-color: var(--drx-line); }
	.dr-list td.c-main:before { content: none; }
	.dr-list td.c-actions, .dr-list tbody tr:last-child td.c-actions { width: auto; border-bottom: 0; justify-content: flex-end; }
	.dr-list td.c-actions:before { content: none; }
	.dr-view-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.dr-modnav { max-width: none; }
	.dr-modnav a { flex: 1 1 0; justify-content: center; padding: 9px 10px; }
	.dr-filterbar { padding: 12px; }
	.dr-filterbar .dr-search { flex: 1 1 100%; max-width: none; }
	.dr-filterbar > .dr-btn, .dr-filterbar > .dr-rp { flex: 1 1 100%; }
	.dr-rp-trigger { width: 100%; }
	.dr-filters { padding: 12px; gap: 8px; }
	.dr-filters .dr-fsel { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; }
	.dr-filters > .dr-btn { flex: 1 1 100%; }
	.dr-rp-foot { flex-wrap: wrap; }
	.dr-rp-foot > span { flex: 1 1 100%; }
	.dr-rp-foot .dr-btn { flex: 1 1 0; }
	.dr-foot-sp { display: none; }
	.dr-sheet-shell { padding: 0; }
	.dr-sheet { border-radius: 0; max-height: none; height: 100%; }
	.dr-sheet-head, .dr-sheet-body { padding-left: 14px; padding-right: 14px; }
	.dr-sheet-nav { padding-left: 14px; padding-right: 14px; }
	.dr-sheet-foot { padding: 12px 14px; flex-wrap: wrap; }
	.dr-sheet-foot .dr-foot-note { flex: 1 1 100%; }
	.dr-sheet-foot .dr-btn { flex: 1 1 0; }
}

/* =====================================================================
   Configuration page tabs + the approval hierarchy pane
   (dr_config_body.jsp / dr_hierarchy_body.jsp)
   Same white-theme rules: colour only on buttons and status indications.
   ===================================================================== */

.dr-wrap [hidden] { display: none !important; }
.dr-hidden { display: none !important; }

.dr-modtabs {
	display: flex; gap: 6px; border-bottom: 1px solid var(--drx-line); margin-bottom: 18px;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dr-modtab {
	appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
	padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--drx-muted); cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; font-family: inherit; white-space: nowrap;
	transition: color .15s, border-color .15s;
}
.dr-modtab:hover { color: var(--drx-ink); }
.dr-modtab.active { color: var(--drx-ink); border-bottom-color: var(--drx-brand); }

/* ---------------------------------------------------------- which building */
.dr-hier-scope {
	display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
	padding: 14px 16px; border: 1px solid var(--drx-line); border-radius: var(--drx-r); margin-bottom: 14px;
}
.dr-hier-scope-l { min-width: 280px; }
.dr-hier-scope-l .dr-select { min-width: 280px; }
.dr-hier-scope-note { margin: 0 0 9px; font-size: 12.5px; color: var(--drx-muted); flex: 1 1 240px; line-height: 1.55; }
.dr-hier-rules { margin: 0 0 14px; font-size: 12.5px; color: var(--drx-muted); line-height: 1.65; }
.dr-hier-rules b { color: var(--drx-body); }

/* the chain as one line: L1 Review > L2 Approve */
.dr-hier-chain {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 14px; border: 1px dashed var(--drx-line); border-radius: var(--drx-r); margin-bottom: 14px;
}
.dr-hier-chain > i { color: var(--drx-faint); font-size: 13px; }
.dr-hier-step b { display: block; font-size: 13px; font-weight: 600; color: var(--drx-ink); }
.dr-hier-step small { display: block; font-size: 11.5px; color: var(--drx-muted); }

/* ---------------------------------------------------------- level cards */
.dr-hier { display: flex; flex-direction: column; gap: 12px; }
.dr-lvl { background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.dr-lvl.is-locked { opacity: .62; }
.dr-lvl-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--drx-line); }
.dr-lvl-no {
	width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; border: 1px solid var(--drx-line);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 600; color: var(--drx-muted);
}
.dr-lvl.is-set .dr-lvl-no { border-color: var(--drx-brand); color: var(--drx-brand-dark); }
.dr-lvl-title { flex: 1 1 auto; min-width: 0; }
.dr-lvl-title b { display: block; font-size: 14px; font-weight: 600; color: var(--drx-ink); }
.dr-lvl-title small { display: block; font-size: 11.5px; color: var(--drx-muted); margin-top: 1px; }
.dr-lvl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px; }
.dr-lvl-grid .dr-field { min-width: 0; }

/* ---------------------------------------------------------- people picker */
.dr-ms { position: relative; }
.dr-ms-field {
	width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 7px 11px;
	border: 1px solid var(--drx-line); border-radius: 8px; background: var(--drx-white);
	cursor: pointer; font-family: inherit; text-align: left;
}
.dr-ms-field:hover:not([disabled]) { border-color: #cbd5e1; }
.dr-ms-field[disabled] { cursor: not-allowed; border-style: dashed; }
.dr-ms.is-open .dr-ms-field { border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-ms-chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dr-ms-ph { color: var(--drx-faint); font-size: 13px; }
.dr-ms-chip {
	display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--drx-line);
	border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; color: var(--drx-body); white-space: nowrap;
}
.dr-ms-chip.is-stale { border-style: dashed; color: var(--drx-muted); }
.dr-ms-chip button { appearance: none; border: 0; background: none; color: var(--drx-faint); cursor: pointer; padding: 0 2px; font-size: 11px; }
.dr-ms-chip button:hover { color: var(--drx-danger); }

.dr-ms-pop {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1200;
	background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: 10px;
	box-shadow: var(--drx-shadow-pop); overflow: hidden;
}
.dr-ms-search { position: relative; padding: 10px; border-bottom: 1px solid var(--drx-line); }
.dr-ms-search i { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); color: var(--drx-faint); font-size: 12.5px; }
.dr-ms-search input {
	width: 100%; padding: 8px 11px 8px 32px; border: 1px solid var(--drx-line); border-radius: 8px;
	font-size: 13px; font-family: inherit; color: var(--drx-ink); background: var(--drx-white);
}
.dr-ms-search input:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-ms-list { max-height: 262px; overflow-y: auto; }
.dr-ms-opt {
	width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
	border: 0; border-bottom: 1px solid var(--drx-line2); background: none; cursor: pointer;
	font-family: inherit; text-align: left;
}
.dr-ms-opt:last-child { border-bottom: 0; }
.dr-ms-opt:hover { background: var(--drx-hover); }
.dr-ms-check {
	width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #cbd5e1; border-radius: 5px;
	display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent;
}
.dr-ms-opt.on .dr-ms-check { background: var(--drx-brand); border-color: var(--drx-brand); color: #fff; }
.dr-ms-who { min-width: 0; }
.dr-ms-who b { display: block; font-size: 13px; font-weight: 600; color: var(--drx-ink); }
.dr-ms-who small { display: block; font-size: 11.5px; color: var(--drx-muted); }
.dr-ms-empty { margin: 0; padding: 18px 12px; font-size: 12.5px; color: var(--drx-muted); text-align: center; }
.dr-ms-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px; border-top: 1px solid var(--drx-line); font-size: 12px; color: var(--drx-muted);
}

@media (max-width: 900px) {
	.dr-lvl-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.dr-modtab { flex: 1 1 0; justify-content: center; padding: 11px 8px; }
	.dr-hier-scope { padding: 12px; }
	.dr-hier-scope-l, .dr-hier-scope-l .dr-select { min-width: 0; width: 100%; flex: 1 1 100%; }
	.dr-hier-scope-note { margin-bottom: 0; }
}

/* ---------------------------------------------------------- where an entry sits in its chain */
.dr-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dr-lvl-note { font-size: 11.5px; color: var(--drx-muted); }
.dr-view-chain { margin-bottom: 14px; }
/* the level being waited on is in progress (blue); levels already passed are done (green) */
.dr-hier-step.is-waiting b, .dr-hier-step.is-waiting small { color: var(--drx-progress-text); }
.dr-hier-step.is-waiting small { font-weight: 600; }
.dr-hier-step.is-done small { color: var(--drx-success-text); }
.dr-hier-step.is-todo b, .dr-hier-step.is-todo small { color: var(--drx-faint); }
.dr-hier-step.is-stopped b, .dr-hier-step.is-stopped small { color: var(--drx-muted); text-decoration: line-through; }

@media (max-width: 900px) {
	.dr-list td .dr-cell-stack { align-items: flex-end; }
}

/* =====================================================================
   COLOUR PASS (2026-09-14)

   Everything above builds the layout; this section gives the module its
   colour. It comes last on purpose, so these accents win over the plain
   white-and-border styling the page started with.

     indigo  leading accent - primary buttons, active tab, entry numbers
     blue    in progress    - pending review, the level being waited on
     green   done           - approved, enabled, saved
     amber   waiting        - pending handover, today in the date picker
     teal    information    - buildings, dynamic sources
     rose    destructive    - cancel, delete, errors

   Soft tints (--drx-*-soft) fill chips, icon tiles and headers; the strong
   colour is used for the text or glyph on top of them.
   ===================================================================== */

/* ---------------------------------------------------------- icon tiles */
.dr-hero-ico {
	background: var(--drx-indigo-soft); border-color: transparent; color: var(--drx-indigo);
}
.dr-stat-ico { border-color: transparent; }
/* each tile keeps its own accent, in the order the pages lay them out */
.dr-stats .dr-stat:nth-child(1) .dr-stat-ico { background: var(--drx-indigo-soft); color: var(--drx-indigo); }
.dr-stats .dr-stat:nth-child(2) .dr-stat-ico { background: var(--drx-amber-soft);  color: var(--drx-amber); }
.dr-stats .dr-stat:nth-child(3) .dr-stat-ico { background: var(--drx-blue-soft);   color: var(--drx-blue); }
.dr-stats .dr-stat:nth-child(4) .dr-stat-ico { background: var(--drx-green-soft);  color: var(--drx-green); }
.dr-stat-v { color: var(--drx-ink); }
.dr-stat-s span.prog { color: var(--drx-progress-text); }
.dr-stat-s span.ok { color: var(--drx-success-text); }

.dr-empty-ico { background: var(--drx-indigo-soft); border-color: transparent; color: var(--drx-indigo); }
.dr-empty.is-error .dr-empty-ico { background: var(--drx-rose-soft); color: var(--drx-rose); }
.dr-spin { border-top-color: var(--drx-brand); }
.dr-search i { color: var(--drx-indigo); opacity: .65; }

/* nav + tabs carry their icons in colour */
.dr-modnav a i { color: var(--drx-indigo); }
.dr-modnav a.active, .dr-modnav a.active i { color: #fff; }
.dr-modtab i { color: var(--drx-faint); }
.dr-modtab:hover i { color: var(--drx-indigo); }
.dr-modtab.active i { color: var(--drx-indigo); }
.dr-modtab.active { border-bottom-color: var(--drx-indigo); }

/* ---------------------------------------------------------- soft headers */
.dr-list thead th, .dr-table thead th { background: var(--drx-surface); color: var(--drx-muted); }
.dr-list thead th.c-actions { background: var(--drx-surface); }
.dr-filters { background: var(--drx-surface); }
.dr-modal-head, .dr-sheet-head { background: var(--drx-surface); border-bottom: 1px solid var(--drx-line); }
.dr-sheet-nav { background: var(--drx-surface); }
.dr-modal-foot, .dr-sheet-foot { background: var(--drx-surface); }
.dr-sec-head { background: var(--drx-surface); }
.dr-lvl-head { background: var(--drx-surface); }
.dr-view-h { background: var(--drx-surface); }
.dr-pv-sec > legend { background: var(--drx-surface); border-radius: var(--drx-r) var(--drx-r) 0 0; color: var(--drx-ink); }
.dr-hier-scope { background: var(--drx-surface); }

/* a row lifts on hover; the sticky actions cell follows so no white gap shows */
.dr-list tbody tr:hover td { background: #f7f8ff; }
.dr-list tbody tr:hover td.c-actions { background: #f7f8ff; }
.dr-list tbody tr:hover .dr-cell > b { color: var(--drx-brand-dark); }
.dr-recno { color: var(--drx-indigo); }

/* ---------------------------------------------------------- chips as soft tints */
.dr-chip { background: var(--drx-surface); border-color: var(--drx-line); color: var(--drx-body); }
.dr-chip.is-success  { background: var(--drx-green-soft);  border-color: #bbf7d0; color: var(--drx-success-text); }
.dr-chip.is-progress { background: var(--drx-blue-soft);   border-color: #bfdbfe; color: var(--drx-progress-text); }
.dr-chip.is-closed   { background: var(--drx-indigo-soft); border-color: #c7d2fe; color: var(--drx-indigo); }
.dr-chip.is-new      { background: var(--drx-violet-soft); border-color: #ddd6fe; color: var(--drx-violet); }
.dr-chip i { opacity: .75; }

.dr-savestate.is-saved { background: var(--drx-green-soft); }
.dr-savestate.is-dirty { background: var(--drx-blue-soft); }

/* ---------------------------------------------------------- row actions */
.dr-act.is-view, .dr-act.is-edit { background: var(--drx-indigo-soft); color: var(--drx-indigo); }
.dr-act.is-view:hover, .dr-act.is-edit:hover { background: #e0e7ff; }
.dr-act[data-act="review"] { background: var(--drx-blue-soft); color: var(--drx-progress-text); }
.dr-act[data-act="review"]:hover { background: #dbeafe; }
.dr-act[data-act="approve"] { background: var(--drx-green-soft); color: var(--drx-success-text); }
.dr-act[data-act="approve"]:hover { background: #dcfce7; }
.dr-act.is-cancel { background: var(--drx-rose-soft); color: var(--drx-rose); }
.dr-act.is-cancel:hover { background: #ffe4e6; }
.dr-act.is-pdf { background: var(--drx-teal-soft); color: var(--drx-teal); }
.dr-act.is-pdf:hover { background: #ccfbf1; }

/* ---------------------------------------------------------- form configuration */
.dr-count.is-all { color: var(--drx-success-text); }
.dr-note i { color: var(--drx-teal); }
.dr-source b { color: var(--drx-teal); }
.dr-source.is-loading { color: var(--drx-progress-text); }
.dr-type-locked { background: var(--drx-teal-soft); border-color: #99f6e4; color: var(--drx-teal); }
.dr-type-locked i { color: var(--drx-teal); opacity: .7; }
.dr-lock { color: var(--drx-faint); }
.dr-label .req, .dr-foot-note .req { color: var(--drx-rose); }

/* ---------------------------------------------------------- approval hierarchy */
/* level badges run through the accents so the chain reads at a glance */
.dr-hier .dr-lvl:nth-child(1) .dr-lvl-no { background: var(--drx-indigo-soft); border-color: transparent; color: var(--drx-indigo); }
.dr-hier .dr-lvl:nth-child(2) .dr-lvl-no { background: var(--drx-blue-soft);   border-color: transparent; color: var(--drx-blue); }
.dr-hier .dr-lvl:nth-child(3) .dr-lvl-no { background: var(--drx-teal-soft);   border-color: transparent; color: var(--drx-teal); }
.dr-hier .dr-lvl:nth-child(4) .dr-lvl-no { background: var(--drx-violet-soft); border-color: transparent; color: var(--drx-violet); }
.dr-hier .dr-lvl:nth-child(5) .dr-lvl-no { background: var(--drx-amber-soft);  border-color: transparent; color: var(--drx-amber); }
.dr-hier .dr-lvl.is-locked .dr-lvl-no { background: var(--drx-surface); color: var(--drx-faint); }
.dr-hier-chain { background: var(--drx-surface); border-color: var(--drx-line); }
.dr-hier-chain > i { color: var(--drx-faint); }
.dr-hier-step.is-waiting b, .dr-hier-step.is-waiting small { color: var(--drx-progress-text); }
.dr-hier-step.is-done small { color: var(--drx-success-text); }
.dr-ms-chip { background: var(--drx-indigo-soft); border-color: #c7d2fe; color: var(--drx-indigo); }
.dr-ms-chip.is-stale { background: var(--drx-surface); border-color: var(--drx-line); color: var(--drx-muted); }
.dr-ms-chip button:hover { color: var(--drx-rose); }
.dr-ms-opt.on .dr-ms-check { background: var(--drx-brand); border-color: var(--drx-brand); }
.dr-ms-search i { color: var(--drx-indigo); opacity: .65; }
.dr-ms-foot { background: var(--drx-surface); }

/* ---------------------------------------------------------- entry view */
.dr-view-trail { border-color: var(--drx-line); }
.dr-view-trail li b { color: var(--drx-indigo); }
.dr-lvl-note { color: var(--drx-muted); }

/* ---------------------------------------------------------- date picker */
.dr-rp-preset.active { background: var(--drx-brand); border-color: var(--drx-brand); }
.dr-rp-day.in-range { background: var(--drx-indigo-soft); color: var(--drx-brand-dark); }
.dr-rp-day.is-end { background: var(--drx-brand); }
.dr-rp-day.is-today:not(.is-end):after { background: var(--drx-amber); }
.dr-rp-foot { background: var(--drx-surface); }
.dr-rp-nav:hover { color: var(--drx-brand); border-color: var(--drx-brand); }

/* ---------------------------------------------------------- toasts */
.dr-toast { border-left: 3px solid var(--drx-success); }
.dr-toast i { color: var(--drx-success); }
.dr-toast.err { border-left-color: var(--drx-danger); }
.dr-toast.info { border-left-color: var(--drx-progress); }

/* ---------------------------------------------------------- section markers
   A small accent dot in front of every section heading - on the entry form, in
   the form preview and in the entry view - so long forms read in blocks rather
   than as one grey wall. */
.dr-pv-sec > legend:before,
.dr-view-h:before {
	content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 9px; vertical-align: middle; background: var(--drx-indigo);
}
.dr-pv-sec:nth-of-type(2) > legend:before, .dr-view-sec:nth-of-type(2) .dr-view-h:before { background: var(--drx-blue); }
.dr-pv-sec:nth-of-type(3) > legend:before, .dr-view-sec:nth-of-type(3) .dr-view-h:before { background: var(--drx-teal); }
.dr-pv-sec:nth-of-type(4) > legend:before, .dr-view-sec:nth-of-type(4) .dr-view-h:before { background: var(--drx-violet); }
.dr-pv-sec:nth-of-type(5) > legend:before, .dr-view-sec:nth-of-type(5) .dr-view-h:before { background: var(--drx-amber); }
.dr-pv-sec:nth-of-type(6) > legend:before, .dr-view-sec:nth-of-type(6) .dr-view-h:before { background: var(--drx-green); }
.dr-pv-sec:nth-of-type(7) > legend:before, .dr-view-sec:nth-of-type(7) .dr-view-h:before { background: var(--drx-rose); }

/* the configuration page names its sections the same way */
.dr-sec-head .dr-sec-name { color: var(--drx-ink); }
.dr-sec.is-set .dr-lvl-no { border-color: transparent; }

/* ---------------------------------------------------------- activity log (admin only)
   admin/c_a_death_activity.jsp - the shared audit trail for this module. The date
   range uses the module picker (dr_daterange.jsp), so it needs no styles of its own. */

.dr-abadge {
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
	font-size: 12px; font-weight: 600; white-space: nowrap;
	background: var(--drx-surface); color: var(--drx-body);
}
.dr-abadge i { font-size: 11px; opacity: .85; }
.dr-abadge.is-add     { background: var(--drx-green-soft);  color: var(--drx-success-text); }
.dr-abadge.is-edit    { background: var(--drx-blue-soft);   color: var(--drx-blue); }
.dr-abadge.is-review  { background: var(--drx-blue-soft);   color: var(--drx-progress-text); }
.dr-abadge.is-approve { background: var(--drx-green-soft);  color: var(--drx-green); }
.dr-abadge.is-cancel  { background: var(--drx-rose-soft);   color: var(--drx-rose); }
.dr-abadge.is-config  { background: var(--drx-indigo-soft); color: var(--drx-indigo); }
.dr-abadge.is-hier    { background: var(--drx-violet-soft); color: var(--drx-violet); }
.dr-abadge.is-pdf     { background: var(--drx-teal-soft);   color: var(--drx-teal); }

/* the log is read, not clicked: no pointer, and details wrap instead of scrolling away */
.dr-act-table tbody tr { cursor: default; }
.dr-act-table th.c-details, .dr-act-table td.c-details { white-space: normal; min-width: 280px; }
.dr-act-table th.c-device, .dr-act-table td.c-device { white-space: normal; max-width: 230px; }
.dr-act-remarks { font-size: 12.5px; color: var(--drx-body); line-height: 1.55; }
.dr-act-device { font-size: 11.5px; color: var(--drx-muted); line-height: 1.5; }

@media (max-width: 620px) {
}

/* =====================================================================
   DASHBOARD  (admin/c_a_death_dashboard.jsp, user/c_u_death_dashboard.jsp)

   The summary panel, the chart cards and the Zone > Cluster > Building
   picker. Charts are drawn by ECharts into .dr-db-chart, which must have a
   height of its own - the library measures the box, it does not create one.

   Kept after the colour pass on purpose, so the tile accents below win.
   ===================================================================== */

/* ---------------------------------------------------------- summary panel */
.dr-db-panel { padding: 0 0 4px; margin-bottom: 16px; }
.dr-db-head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 14px 16px; border-bottom: 1px solid var(--drx-line); background: var(--drx-surface);
	border-radius: var(--drx-r) var(--drx-r) 0 0;
}
.dr-db-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.dr-db-title h3 {
	margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .4px;
	text-transform: uppercase; color: var(--drx-ink);
}
.dr-db-sub { font-size: 12px; color: var(--drx-muted); min-width: 0; }
.dr-db-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* the marker before a heading carries the card's accent */
.dr-db-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; background: var(--drx-indigo); }
.dr-db-dot.is-indigo { background: var(--drx-indigo); }
.dr-db-dot.is-blue   { background: var(--drx-blue); }
.dr-db-dot.is-teal   { background: var(--drx-teal); }
.dr-db-dot.is-amber  { background: var(--drx-amber); }
.dr-db-dot.is-green  { background: var(--drx-green); }
.dr-db-dot.is-violet { background: var(--drx-violet); }

.dr-db-stats { margin: 14px 16px 12px; }
.dr-stat-v.is-amber { color: var(--drx-amber); }
.dr-stat-v.is-green { color: var(--drx-green); }
.dr-stat-v.is-blue  { color: var(--drx-blue); }
.dr-stat-v.is-teal  { color: var(--drx-teal); }
.dr-stat-v.is-rose  { color: var(--drx-rose); }

/* eight tiles, so the accents run past the four the other pages use */
.dr-db-stats .dr-stat:nth-child(1) .dr-stat-ico { background: var(--drx-indigo-soft); color: var(--drx-indigo); }
.dr-db-stats .dr-stat:nth-child(2) .dr-stat-ico { background: var(--drx-violet-soft); color: var(--drx-violet); }
.dr-db-stats .dr-stat:nth-child(3) .dr-stat-ico { background: var(--drx-amber-soft);  color: var(--drx-amber); }
.dr-db-stats .dr-stat:nth-child(4) .dr-stat-ico { background: var(--drx-green-soft);  color: var(--drx-green); }
.dr-db-stats .dr-stat:nth-child(5) .dr-stat-ico { background: var(--drx-blue-soft);   color: var(--drx-blue); }
.dr-db-stats .dr-stat:nth-child(6) .dr-stat-ico { background: var(--drx-teal-soft);   color: var(--drx-teal); }
.dr-db-stats .dr-stat:nth-child(7) .dr-stat-ico { background: var(--drx-green-soft);  color: var(--drx-green); }
.dr-db-stats .dr-stat:nth-child(8) .dr-stat-ico { background: var(--drx-rose-soft);   color: var(--drx-rose); }

/* ---------------------------------------------------------- chart cards */
.dr-db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dr-db-grid.is-busy { opacity: .55; transition: opacity .15s; }
.dr-db-card {
	background: var(--drx-white); border: 1px solid var(--drx-line); border-radius: var(--drx-r);
	min-width: 0; display: flex; flex-direction: column;
}
.dr-db-card.is-wide { grid-column: 1 / -1; }
.dr-db-card-head {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 13px 16px; border-bottom: 1px solid var(--drx-line); background: var(--drx-surface);
	border-radius: var(--drx-r) var(--drx-r) 0 0;
}
.dr-db-card-head h3 {
	margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .4px;
	text-transform: uppercase; color: var(--drx-ink);
}
.dr-db-chart { height: 306px; padding: 10px 8px 6px; min-width: 0; }
.dr-db-chart.is-tall { height: 340px; }
.dr-db-empty {
	height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 9px; color: var(--drx-muted); font-size: 12.5px; text-align: center; padding: 10px 18px;
}
.dr-db-empty i { font-size: 22px; color: var(--drx-faint); }
.dr-db-empty.is-error i { color: var(--drx-danger); }

/* ---------------------------------------------------------- building picker */
.dr-bt { display: inline-flex; }
.dr-bt-trigger.is-on { border-color: var(--drx-teal); color: var(--drx-teal); background: var(--drx-teal-soft); }
.dr-bt-trigger .fa-angle-down { color: var(--drx-faint); }

.dr-bt-title { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.dr-bt-ico {
	width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--drx-r-s);
	background: var(--drx-teal-soft); color: var(--drx-teal);
	display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.dr-bt-tools {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 12px 22px 0; flex: 0 0 auto;
}
.dr-bt-search { position: relative; padding: 12px 22px 0; flex: 0 0 auto; }
.dr-bt-search i {
	position: absolute; left: 34px; top: calc(50% + 6px); transform: translateY(-50%);
	color: var(--drx-faint); font-size: 12.5px;
}
.dr-bt-search input {
	width: 100%; padding: 10px 12px 10px 34px; border: 1px solid var(--drx-line);
	border-radius: var(--drx-r-s); font-size: 13px; color: var(--drx-ink); font-family: inherit;
}
.dr-bt-search input:focus { outline: none; border-color: var(--drx-brand); box-shadow: 0 0 0 3px var(--drx-focus); }
.dr-bt-body { padding-top: 14px; }
.dr-bt-tree { display: flex; flex-direction: column; gap: 8px; }

.dr-bt-node.is-zone > .dr-bt-row { background: var(--drx-white); border: 1px solid var(--drx-line); }
.dr-bt-row {
	display: flex; align-items: center; gap: 11px; padding: 11px 13px;
	border-radius: var(--drx-r-s); cursor: pointer; min-width: 0;
}
.dr-bt-row:hover { background: var(--drx-hover); }
.dr-bt-node.is-zone > .dr-bt-row:hover { background: var(--drx-indigo-soft); border-color: #c7d2fe; }
.dr-bt-row.is-leaf { padding: 8px 12px; }
.dr-bt-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--drx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-bt-row.is-leaf .dr-bt-name { font-size: 12.5px; color: var(--drx-body); }
.dr-bt-badge {
	flex: 0 0 auto; min-width: 26px; text-align: center; padding: 3px 8px; border-radius: 999px;
	background: var(--drx-indigo-soft); color: var(--drx-indigo); font-size: 11.5px; font-weight: 600;
}
.dr-bt-node.is-cluster > .dr-bt-row .dr-bt-badge { background: var(--drx-teal-soft); color: var(--drx-teal); }
.dr-bt-toggle {
	flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--drx-line);
	background: var(--drx-white); color: var(--drx-muted); cursor: pointer; font-size: 12px;
	display: inline-flex; align-items: center; justify-content: center;
}
.dr-bt-toggle .fa { transition: transform .15s; transform: rotate(180deg); }
.dr-bt-toggle.is-open .fa { transform: none; }
.dr-bt-toggle:hover { color: var(--drx-ink); border-color: #cbd5e1; }
.dr-bt-kids { padding: 4px 0 4px 22px; display: flex; flex-direction: column; gap: 2px; }
.dr-bt-node.is-cluster { border-left: 2px solid var(--drx-line2); padding-left: 6px; }

.dr-bt-box {
	flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cbd5e1;
	background: var(--drx-white); color: #fff; font-size: 10px;
	display: inline-flex; align-items: center; justify-content: center;
}
.dr-bt-box.on   { background: var(--drx-brand); border-color: var(--drx-brand); }
.dr-bt-box.part { background: var(--drx-blue); border-color: var(--drx-blue); }
.dr-bt-none { padding: 26px 10px; text-align: center; font-size: 12.5px; color: var(--drx-muted); }

/* ---------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
	.dr-db-grid { grid-template-columns: minmax(0, 1fr); }
	.dr-db-card.is-wide { grid-column: auto; }
}

@media (max-width: 640px) {
	.dr-db-head { padding: 12px; }
	.dr-db-filters { width: 100%; }
	.dr-db-filters > .dr-bt, .dr-db-filters > .dr-rp { flex: 1 1 100%; }
	.dr-db-filters .dr-bt-trigger, .dr-db-filters .dr-rp-trigger { width: 100%; }
	.dr-db-stats { margin: 12px; }
	.dr-db-chart { height: 270px; padding: 8px 2px 4px; }
	.dr-db-chart.is-tall { height: 300px; }
	.dr-bt-tools, .dr-bt-search { padding-left: 14px; padding-right: 14px; }
	.dr-bt-tools .dr-btn { flex: 1 1 calc(50% - 4px); }
	.dr-bt-search i { left: 26px; }
	.dr-bt-kids { padding-left: 12px; }
}