/* Dark mode + small layout helpers (CSP-safe, local)
   IDE-inspired theme with red accents (#d20007)
*/

/* -------------------------
   Theme variables
-------------------------- */
:root{
  /* Base surfaces (light) */
  --app-bg: #f4f5f7;
  --app-text: #1f2328;
  --app-card-bg: #ffffff;
  --app-card-border: #d0d7de;
  --app-pre-bg: transparent;
  --text-size-base: 0.85rem;
  --text-size-sidebar: 0.92rem;
  --text-line-height: 1.6;
  --filterbar-bg: #eef1f6;

  /* IDE accent (red) */
  --ide-accent: #752a2c;
  --ide-accent-soft: rgba(117, 42, 44, 0.35);

  /* Icon color (light mode) */
  --theme-icon-color: #495057; /* gray-700 */
}



/* Dark theme: neutral dark greys (no blue cast) */
[data-theme="dark"]{
  --app-bg: #111315;
  --app-text: #e6e6e6;
  --app-card-bg: #181a1d;
  --app-card-border: #2a2d32;
  --app-pre-bg: transparent;
  --filterbar-bg: #15181c;

  /* Slightly lifted red for dark backgrounds */
  --ide-accent: #ff3b3f;
  --ide-accent-soft: rgba(255, 59, 63, 0.40);

  /* Bootstrap-ish vars used by our local bootstrap subset */
  --bs-border-color: #2a2d32;
  --bs-body-color: #e6e6e6;
  --bs-gray-100: #111315;
  --bs-gray-600: #a1a6ad;

  /* Keep any accidental references neutral */
  --bs-blue: #9aa0a6;

  /* Icon color (dark mode) */
  --theme-icon-color: #c2c7cf;
}

/* -------------------------
   Base elements
-------------------------- */
body{
  background: var(--app-bg);
  color: var(--app-text);
  font-family: "InterVariable", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "slnt" 0;
  font-size: var(--text-size-base);
  line-height: var(--text-line-height);
  font-weight: 400;
  padding-top: 65px; /* offset fixed top bar */
}

table,
.table{
  background: transparent;
}
.table > :not(caption) > * > *{
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .75rem;
}
h1{ font-size: 2.25em; }
h2{ font-size: 1.9em; }
h3{ font-size: 1.55em; }
h4{ font-size: 1.3em; }
h5{ font-size: 1.1em; }
h6{ font-size: 0.95em; }

.card{
  background-color: var(--app-card-bg);
  border-color: var(--app-card-border);
}

.card-header{
  background-color: var(--app-card-bg);
  border-color: var(--app-card-border);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--app-text);
}

pre{
  color: var(--app-text);
}

/* IDE console panel look for logs */
pre{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.04)
  );
  border: 1px solid var(--app-card-border);
  border-radius: .45rem;
  padding: .75rem;
}

[data-theme="dark"] pre{
  background: #0e0f12;
  border-color: var(--app-card-border);
}

.form-control{
  background-color: transparent;
  color: var(--app-text);
  border-color: var(--app-card-border);
}

.form-control::placeholder{
  color: rgba(154,164,175,.9);
}

/* Focus uses IDE red accent (subtle ring) */
.form-control:focus{
  border-color: var(--ide-accent);
  box-shadow: 0 0 0 1px var(--ide-accent-soft);
  outline: none;
  background-color: transparent;
}

/* Ensure input text is readable in dark mode and does not flip backgrounds */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea{
  color: #fff;
  background-color: transparent;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus{
  background-color: transparent;
}

/* Avoid data URI background arrow to satisfy CSP */
.form-select{
  background-image: none !important;
  padding-right: .75rem;
}

.btn-outline-secondary{
  color: var(--bs-gray-600);
  border-color: var(--bs-gray-600);
}
.btn-outline-secondary:hover{
  color:#fff;
}

a, code{ color: inherit; }

code{
  padding: .1rem .25rem;
  border: 1px solid var(--app-card-border);
  border-radius: .35rem;
}

/* Monospace accents for IDE feel */
code, pre, .small, .mono, .ws-log{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* -------------------------
   Full-width top bar
-------------------------- */
.topbar{
  width: 100%;
  border-bottom: 1px solid var(--app-card-border);
  background: var(--app-card-bg);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: .75rem 1.5rem;
}

/* Range filters bar (sticky under topbar) */
.range-filterbar{
  position: sticky;
  top: 62px;
  z-index: 1015;
  background: var(--filterbar-bg);
  border-bottom: 1px solid var(--app-card-border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  width: 100%;
}

.range-filterbar .container-fluid{
  padding: .5rem 1.5rem;
}

.range-filterbar-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.range-filterbar-title{
  margin-bottom: .25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.range-filterbar-controls{
  justify-content: center;
}

.range-filterbar .form-select{
  background-color: var(--app-card-bg);
  color: var(--app-text);
  border-color: var(--app-card-border);
  min-width: 180px;
}

[data-theme="dark"] .range-filterbar .form-select{
  background-color: var(--app-card-bg) !important;
  color: var(--app-text) !important;
  border-color: var(--app-card-border);
}

.range-filterbar .form-select option{
  background-color: var(--app-card-bg);
  color: var(--app-text);
}

/* Add breathing room on both sides of page content */
[data-partial-root]{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.admin-fullwidth[data-partial-root]{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1200px){
  [data-partial-root]{
    padding-left: 0;
    padding-right: 0;
  }
}

.brand{
  display:flex;
  align-items:baseline;
  gap: .5rem;
}

/* Nav links in header */
[data-partial-nav] .nav-link{
  color: inherit;
  opacity: .8;
}
[data-partial-nav] .nav-link:hover{
  color: #752a2c !important;
  opacity: 1;
}
[data-partial-nav] .nav-link.active{
  color: #752a2c !important;
  opacity: 1;
}

/* -------------------------
   Theme toggle (slider)
-------------------------- */
.theme-switch{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Bootstrap Icons SVG sprite coloring via currentColor */
.theme-icon{
  width: 14px;
  height: 14px;

  color: var(--theme-icon-color);
  fill: currentColor;
  stroke: currentColor;

  opacity: .85;
  transition: color .2s ease, opacity .2s ease;
}
.theme-icon use{
  fill: currentColor;
  stroke: currentColor;
}

/* Switch container */
.switch{
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

/* Small switch variant */
.switch.switch-sm{
  width: 36px;
  height: 18px;
}

/* Hide native checkbox (still accessible) */
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

/* Track */
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background-color: rgba(108,117,125,.35);
  border: 1px solid var(--app-card-border);
  transition: .2s;
  border-radius: 999px;
}

/* Thumb (default size for non-sm) */
.slider:before{
  content:"";
  position:absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  transition: .2s;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Small thumb */
.switch.switch-sm .slider:before{
  height: 14px;
  width: 14px;
  left: 2px;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

/* Checked state (use IDE red, but subtle) */
.switch input:checked + .slider{
  background-color: var(--ide-accent-soft);
  border-color: rgba(0,0,0,0); /* keep it clean */
}

/* Thumb travel */
.switch input:checked + .slider:before{
  transform: translate(20px, -50%);
}

/* Checked thumb travel for small switch (36px wide) */
.switch.switch-sm input:checked + .slider:before{
  transform: translate(18px, -50%);
}

/* Better contrast in dark mode */
[data-theme="dark"] .slider:before{
  background-color: #e6e6e6;
}

/* Optional: emphasize active icon */
:root .theme-switch .theme-icon:first-child{ opacity: 1; }
:root .theme-switch .theme-icon:last-child{ opacity: .45; }

[data-theme="dark"] .theme-switch .theme-icon:first-child{ opacity: .45; }
[data-theme="dark"] .theme-switch .theme-icon:last-child{ opacity: 1; }

/* Optional: add a subtle red hint to the active side icon (kept restrained) */
:root .switch input:not(:checked) ~ .theme-icon:first-child{
  color: var(--ide-accent);
}
:root .switch input:not(:checked) ~ .theme-icon:last-child{
  color: var(--theme-icon-color);
}

[data-theme="dark"] .switch input:checked ~ .theme-icon:last-child{
  color: var(--ide-accent);
}
[data-theme="dark"] .switch input:checked ~ .theme-icon:first-child{
  color: var(--theme-icon-color);
}

.ws-log{
  height: 220px;
  overflow: auto;
}
.admin-shell{
  display: block;
  background: #edf0f6;
  padding: 0 1.25rem 0 270px; /* leave space for fixed sidebar on the left */
  margin: 0;
  border-radius: 1rem;
  box-shadow: none;
  min-height: calc(100vh - 140px);
  width: 100%;
}
[data-theme="dark"] .admin-shell{
  background: transparent;
  box-shadow: none;
  margin: 0;
}

.admin-sidebar{
  background: #fff;
  color: #000;
  border-right: 1px solid rgba(231, 234, 243, .9);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 250px;
  flex-shrink: 0;
  position: fixed;
  top: 65px; /* directly under fixed topbar */
  left: 0;
  height: calc(100vh - 65px);
}

.admin-brand{
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.admin-brand .brand-title{
  font-size: 1rem;
}
.admin-brand .brand-subtitle{
  font-size: .82rem;
}
.admin-sidebar .text-muted{
  color: #333 !important;
}

[data-theme="dark"] .admin-sidebar .text-muted{
  color: rgba(255,255,255,0.72) !important;
}

[data-theme="dark"] .admin-sidebar{
  background: #16181c;
  border-right: 1px solid #242831;
  color: #FFF;
}
[data-theme="dark"] .admin-topbar,
[data-theme="dark"] .admin-main-body{
  background: #16181c;
  border-color: #242831;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.admin-main{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 1.25rem;
}

.admin-topbar{
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(231, 234, 243, .9);
  border-radius: .85rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.admin-main-body{
  min-height: 60vh;
  background: #fff;
  border-radius: .85rem;
  padding: 1.25rem;
  border: 1px solid rgba(231, 234, 243, .9);
}

/* Admin menu */
.admin-sidemenu .list-group-item{
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
  padding: .85rem 1.1rem;
  color: #000;
  font-weight: 400;
  font-size: var(--text-size-sidebar);
}

.admin-sidemenu .list-group-item:last-child{
  border-bottom: none;
}

.admin-sidemenu .list-group-item:hover{
  background: rgba(255,255,255,0.08);
  color: #000;
}

.admin-sidemenu .list-group-item.active{
  background: rgba(255,255,255,0.18);
  color: #000;
  font-weight: 700;
}

.admin-sidemenu .list-group-item.disabled,
.admin-sidemenu .list-group-item:disabled{
  color: #a6aab3 !important;
}

.admin-sidemenu-parent{
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-caret{
  font-size: 0.8em;
  opacity: 0.7;
  display: inline-block;
  transition: transform .15s ease;
}

.admin-submenu{
  display: none;
  padding-left: 0;
}

.admin-submenu .list-group-item{
  padding-left: 2rem;
  border-bottom: none;
}

.admin-sidemenu-parent.open + .admin-submenu{
  display: block;
}
.admin-submenu.open{
  display: block;
}
.admin-sidemenu-parent.open .admin-caret{
  transform: rotate(90deg);
}

[data-theme="dark"] .admin-sidemenu .list-group-item, [data-theme="dark"] .admin-sidemenu .list-group-item:hover, [data-theme="dark"] .admin-sidemenu .list-group-item.active {
  color: #FFF;
}

[data-theme="dark"] .admin-sidemenu .list-group-item.disabled,
[data-theme="dark"] .admin-sidemenu .list-group-item:disabled{
  color: #cfd3dd !important;
}

@media (max-width: 991.98px){
  .admin-shell{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-left: 1rem;
  }
  .admin-sidebar{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .admin-topbar{
    border-radius: .75rem;
  }
}

.card .small, .small.text-muted, .card-header .small{
  color: #6c757d;
}
[data-theme="dark"] .card .small,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] .card-header .small,
[data-theme="dark"] .text-muted{
  color: #cfd3dd !important;
}

.w-220{
  max-width: 220px;
}
.max-h-60vh{
  max-height: 60vh;
}
.max-h-30vh{
  max-height: 30vh;
}
.overflow-auto{
  overflow: auto;
}

/* Datatables */
.datatable-controls .form-control,
.datatable-controls .form-select{
  max-width: 220px;
}
.datatable-sortable{
  cursor: pointer;
  user-select: none;
}
.datatable-sortable[data-dt-sort-dir="asc"]::after{
  content: " ^";
  font-size: 0.75em;
  color: #6c757d;
}
.datatable-sortable[data-dt-sort-dir="desc"]::after{
  content: " v";
  font-size: 0.75em;
  color: #6c757d;
}
[data-theme="dark"] .dt-container{
  color: #f8fafc;
  background: var(--app-card-bg);
}
[data-theme="dark"] .dt-container .dataTable{
  color: #f8fafc;
  background: transparent;
}
[data-theme="dark"] .dt-container .dt-layout-row,
[data-theme="dark"] .dt-container .dt-layout-table{
  background: transparent;
}
[data-theme="dark"] .dt-container .dataTable thead th{
  color: #f8fafc;
  border-bottom-color: var(--app-card-border);
}
[data-theme="dark"] .dt-container .dataTable tbody td{
  color: #e6e6e6;
  border-top-color: var(--app-card-border);
}
[data-theme="dark"] .dt-container .dataTable tbody tr{
  background: transparent;
}
[data-theme="dark"] .dt-container .dt-search input,
[data-theme="dark"] .dt-container .dt-length select,
[data-theme="dark"] .dt-container .dt-input{
  background: #121417;
  border-color: var(--app-card-border);
  color: #f8fafc;
}
[data-theme="dark"] .dt-container .dt-search input::placeholder{
  color: #9aa0a6;
}
[data-theme="dark"] .dt-container .dt-search label,
[data-theme="dark"] .dt-container .dt-length label,
[data-theme="dark"] .dt-container .dt-info{
  color: #cfd3dd;
}
[data-theme="dark"] .dt-container .dt-paging-button{
  background: #1f2328;
  border: 1px solid var(--app-card-border);
  color: #f8fafc;
}
[data-theme="dark"] .dt-container .dt-paging-button.current,
[data-theme="dark"] .dt-container .dt-paging-button:focus,
[data-theme="dark"] .dt-container .dt-paging-button:hover{
  background: #2a2d32;
  color: #fff;
}
[data-theme="dark"] .dt-container .dt-paging-button.disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mongo JSON editor */
[data-json-wrapper] .json-editor-stack{
  position: relative;
  background: #fff;
  border-radius: 0.375rem;
}
[data-theme="dark"] [data-json-wrapper] .json-editor-stack{
  background: #111827;
}
[data-json-wrapper] .json-editor-highlight{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0.375rem 0.75rem;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow: auto;
  color: #111;
  scrollbar-width: none;
}
.json-editor-highlight::-webkit-scrollbar{
  display: none;
}
[data-theme="dark"] [data-json-wrapper] .json-editor-highlight{
  color: #f8fafc;
}
[data-json-wrapper] .json-editor-stack textarea{
  position: relative;
  background: transparent;
  color: transparent;
  caret-color: #111;
  line-height: 1.5;
  font-size: 0.875rem;
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  padding: 0.375rem 0.75rem;
  width: 100%;
  z-index: 1;
}
[data-theme="dark"] [data-json-wrapper] .json-editor-stack textarea{
  caret-color: #f8fafc;
  border-color: #374151;
}
[data-json-wrapper] .json-editor-stack textarea:focus{
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
[data-theme="dark"] [data-json-wrapper] .json-editor-stack textarea:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.2);
}
[data-json-wrapper] .json-editor-stack textarea.is-invalid{
  border-color: #dc3545;
}
.json-editor-highlight .json-key{ color: #1d4ed8; }
.json-editor-highlight .json-string{ color: #0f766e; }
.json-editor-highlight .json-number{ color: #b45309; }
.json-editor-highlight .json-boolean{ color: #7c3aed; }
.json-editor-highlight .json-null{ color: #6b7280; }
[data-theme="dark"] .json-editor-highlight .json-key{ color: #93c5fd; }
[data-theme="dark"] .json-editor-highlight .json-string{ color: #5eead4; }
[data-theme="dark"] .json-editor-highlight .json-number{ color: #fbbf24; }
[data-theme="dark"] .json-editor-highlight .json-boolean{ color: #c4b5fd; }
[data-theme="dark"] .json-editor-highlight .json-null{ color: #94a3b8; }

/* Toasts */
[data-toast-container].toast-container{
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
[data-toast-container] .toast-message{
  padding: .65rem .9rem;
  border-radius: .45rem;
  background: #e7f1ff;
  color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  min-width: 240px;
  max-width: 320px;
  font-weight: 600;
}

[data-toast-container] .toast-message[data-kind="error"]{
  background: #fee2e2;
  color: #7f1d1d;
}

[data-theme="dark"] [data-toast-container] .toast-message{
  background: #1f2933;
  color: #e6e6e6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] [data-toast-container] .toast-message[data-kind="error"]{
  background: #442626;
  color: #f8d7da;
}
[data-theme="dark"] .alert.alert-info,
[data-theme="dark"] .alert.alert-info *{
  color: #000 !important;
}

/* -------------------------
   Dashboard (user-centric)
-------------------------- */
.dashboard-shell{
  display: block;
  width: 100%;
}

.dashboard-hero{
  padding: 2.5rem 0 1.5rem;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-card-border);
}

[data-theme="dark"] .dashboard-hero{
  background: var(--app-bg);
}

.dashboard-grid{
  padding: 1.5rem 0 3rem;
}

.dash-card{
  border-radius: 1rem;
  border: 1px solid var(--app-card-border);
  background: var(--app-card-bg);
  padding: 1.5rem;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
  height: 100%;
}

[data-theme="dark"] .dash-card{
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.dash-reveal{
  animation: dashFadeUp 0.6s ease both;
}

.dash-reveal:nth-child(2){ animation-delay: 0.08s; }
.dash-reveal:nth-child(3){ animation-delay: 0.16s; }

@keyframes dashFadeUp{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}

.dash-profile{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dash-profile-header{
  display: flex;
  gap: 1rem;
  align-items: center;
}

.dash-avatar{
  width: 68px;
  height: 68px;
  border-radius: 1rem;
  background: linear-gradient(140deg, #752a2c, #c0392b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(117, 42, 44, 0.35);
}

.dash-nickname{
  font-size: 1.4rem;
  font-weight: 700;
}

.dash-email{
  color: #6c757d;
  font-size: 0.9rem;
}

[data-theme="dark"] .dash-email{
  color: rgba(255,255,255,0.7);
}

.dash-tags{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.dash-tag{
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(117, 42, 44, 0.12);
  color: #752a2c;
  font-weight: 600;
}

[data-theme="dark"] .dash-tag{
  background: rgba(255, 59, 63, 0.2);
  color: #ffb4b6;
}

.dash-stats{
  display: grid;
  gap: 1rem;
}

.dash-stat{
  padding: .85rem 1rem;
  border-radius: .85rem;
  background: transparent;
}

[data-theme="dark"] .dash-stat{
  background: transparent;
}

.dash-stat-label{
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: .1em;
  color: #6c757d;
}

.dash-stat-value{
  font-size: 1.1rem;
  font-weight: 700;
}

.dash-actions{
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}

.dash-card-title{
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.dash-accolades{
  display: grid;
  gap: .9rem;
}

.dash-accolade{
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: .75rem;
  border-radius: .75rem;
  background: rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .dash-accolade{
  background: rgba(255,255,255,0.05);
}

.dash-accolade-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(117, 42, 44, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #752a2c;
}

[data-theme="dark"] .dash-accolade-icon{
  color: #ffb4b6;
  background: rgba(255, 59, 63, 0.2);
}

.dash-accolade-title{
  font-weight: 600;
}

.dash-accolade-meta{
  font-size: .8rem;
  color: #6c757d;
}

.dash-focus{
  display: flex;
  gap: 1rem;
  align-items: center;
}

.dash-focus-days{
  font-size: 2.4rem;
  font-weight: 800;
}

.dash-focus-meta{
  display: grid;
  gap: .35rem;
}

.dash-focus-label{
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: .1em;
  color: #6c757d;
}

.dash-focus-hint{
  font-size: .9rem;
}

.dash-focus-progress,
.dash-progress{
  background: rgba(117, 42, 44, 0.12);
  border-radius: 999px;
  height: 8px;
  margin-top: .8rem;
  overflow: hidden;
}

[data-theme="dark"] .dash-focus-progress,
[data-theme="dark"] .dash-progress{
  background: rgba(255, 59, 63, 0.2);
}

.dash-progress-bar{
  width: 100%;
  height: 8px;
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 999px;
  display: block;
}

.dash-progress-bar::-webkit-progress-bar{
  background: transparent;
  border-radius: 999px;
}

.dash-progress-bar::-webkit-progress-value{
  background: linear-gradient(90deg, #752a2c, #d24d57);
  border-radius: 999px;
}

.dash-progress-bar::-moz-progress-bar{
  background: linear-gradient(90deg, #752a2c, #d24d57);
  border-radius: 999px;
}

.dash-focus-footer{
  margin-top: .7rem;
  color: #6c757d;
  font-size: .85rem;
}

.dash-labs{
  display: grid;
  gap: .8rem;
}

.dash-lab{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem .85rem;
  border-radius: .75rem;
  background: rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .dash-lab{
  background: rgba(255,255,255,0.05);
}

.dash-lab-title{
  font-weight: 600;
}

.dash-lab-meta{
  font-size: .8rem;
  color: #6c757d;
}

.dash-pill{
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(117, 42, 44, 0.12);
  color: #752a2c;
  font-weight: 700;
  font-size: .75rem;
}

[data-theme="dark"] .dash-pill{
  background: rgba(255, 59, 63, 0.2);
  color: #ffb4b6;
}

.dash-list{
  display: grid;
  gap: 1rem;
}

.dash-list-item{
  display: grid;
  gap: .6rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(0,0,0,0.1);
}

[data-theme="dark"] .dash-list-item{
  border-bottom-color: rgba(255,255,255,0.1);
}

.dash-list-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.dash-row{
  grid-template-columns: 1fr auto;
  align-items: center;
}

.dash-item-title{
  font-weight: 600;
}

.dash-item-meta{
  font-size: .8rem;
  color: #6c757d;
}

.dash-table{
  margin: 0;
}

.dash-table thead th{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6c757d;
}

.dash-you{
  background: rgba(117, 42, 44, 0.12);
  font-weight: 700;
}

[data-theme="dark"] .dash-you{
  background: rgba(255, 59, 63, 0.2);
}

.dash-timeline{
  display: grid;
  gap: 1rem;
}

.dash-timeline-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .6rem;
  align-items: flex-start;
}

.dash-timeline-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #752a2c;
  margin-top: .35rem;
  box-shadow: 0 0 0 6px rgba(117, 42, 44, 0.12);
}

[data-theme="dark"] .dash-timeline-dot{
  background: #ff3b3f;
  box-shadow: 0 0 0 6px rgba(255, 59, 63, 0.2);
}

.dash-footer-hint{
  margin-top: 1rem;
  font-size: .85rem;
  color: #6c757d;
}

@media (max-width: 991.98px){
  .dashboard-hero{
    padding: 2rem 0 1rem;
  }
  .dash-card{
    padding: 1.2rem;
  }
  .dash-focus{
    flex-direction: column;
    align-items: flex-start;
  }
}