/* ===== Theme variables (dark default) ===== */
:root{
  /* Typography */
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry */
  --radius: 18px;

  /* Brand */
  --primary: #3AA7E2;
    --accent: var(--primary);
  --accent-2: var(--primary-hover);
--primary-hover: #6EC1FF;
  --primary-weak: rgba(58,167,226,.16);

  /* Core surfaces */
  --bg: #0B1320;
  --panel: #141F33;          /* surface-1 */
  --panel-2: #1A2841;        /* surface-2 */
  --surface-3: #233557;      /* surface-3 (hover/selected) */

  /* Text */
  --text: #DCE4F0;           /* text-1 */
  --text-2: #B7C3D8;
  --muted: #7A8CAA;

  /* Lines / shadows */
  --line: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.10);
  --shadow: 0 8px 20px rgba(0,0,0,.22);

  /* Sidebar (keeps dark in both themes) */
  --sidebar: #0A1220;
  --sidebar-2: #0D1830;

  --sidebar-text: rgba(255,255,255,.92);
  --sidebar-muted: rgba(255,255,255,.65);
  --sidebar-pill: rgba(255,255,255,.06);
  --sidebar-pill-border: rgba(255,255,255,.14);

  /* Cards / surfaces aliases */
  --card-bg: var(--panel);
  --card: var(--card-bg);
  --card-border: var(--line);

  /* Controls */
  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,.12);
  --control-bg: var(--panel-2);
  --control-hover: var(--surface-3);
  --focus-ring: rgba(58,167,226,.35);

}


/* ===== Radar theme vars (STRICT HEX, no alpha) ===== */
html[data-theme="light"]{
  /* grid lines (all) */
  --radar-grid: #CBD5E1;
  --radar-grid-major: var(--radar-grid);
  --radar-grid-minor: var(--radar-grid);
  --radar-grid-circle: var(--radar-grid);

  /* empty rings */
  --radar-empty: #F8FAFC;

  /* center */
  --radar-center-fill: #FFFFFF;
  --radar-center: var(--radar-center-fill);
  --radar-center-text: var(--text);

  /* labels/text */
  --radar-label: var(--text-2);

  /* severity fills by k (k=1..4) */
  --radar-ring-1: #DCFCE7;
  --radar-ring-2: #FEF3C7;
  --radar-ring-3: #FED7AA;
  --radar-ring-4: #FECACA;

  /* hover fills (HEX only) */
  --radar-ring-1-hover: #BBF7D0;
  --radar-ring-2-hover: #FDE68A;
  --radar-ring-3-hover: #FDBA74;
  --radar-ring-4-hover: #FCA5A5;
}

html:not([data-theme="light"]){
  /* grid lines (all) */
  --radar-grid: #334155;
  --radar-grid-major: var(--radar-grid);
  --radar-grid-minor: var(--radar-grid);
  --radar-grid-circle: var(--radar-grid);

  /* empty rings */
  --radar-empty: #1E293B;

  /* center */
  --radar-center-fill: #0F172A;
  --radar-center: var(--radar-center-fill);
  --radar-center-text: var(--text);

  /* labels/text */
  --radar-label: var(--text-2);

  /* severity fills by k (k=1..4) */
  --radar-ring-1: #14532D;
  --radar-ring-2: #78350F;
  --radar-ring-3: #7C2D12;
  --radar-ring-4: #7F1D1D;

  /* hover fills (HEX only) */
  --radar-ring-1-hover: #166534;
  --radar-ring-2-hover: #92400E;
  --radar-ring-3-hover: #9A3412;
  --radar-ring-4-hover: #991B1B;
}
html[data-theme="light"]{
  /* Brand (same) */
  --primary: #3AA7E2;
    --accent: var(--primary);
  --accent-2: var(--primary-hover);
--primary-hover: #6EC1FF;
  --primary-weak: rgba(58,167,226,.16);

  /* Core surfaces */
  --bg: #F5F7FA;
  --panel: #FFFFFF;          /* surface-1 */
  --panel-2: #F7F9FC;        /* surface-2 */
  --surface-3: #FFFFFF;      /* surface-3 */

  /* Text */
  --text: #0B1320;
  --text-2: #334155;
  --muted: #64748B;

  /* Lines / shadows */
  --line: rgba(15, 23, 42, 0.08);
  --line-2: rgba(15, 23, 42, 0.12);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 18px 50px rgba(15, 23, 42, 0.10);

  /* Sidebar stays dark */
  --sidebar-text: rgba(255,255,255,.92);
  --sidebar-muted: rgba(255,255,255,.65);
  --sidebar-pill: rgba(255,255,255,.06);
  --sidebar-pill-border: rgba(255,255,255,.14);

  /* Cards */
  --card-bg: #FFFFFF;
  --card-border: rgba(11,19,32,.08);

  /* Controls */
  --input-bg: #FFFFFF;
  --input-border: rgba(11,19,32,.12);
  --control-bg: var(--panel);
  --control-hover: var(--panel-2);
  --focus-ring: rgba(58,167,226,.35);

  /* Sidebar (light theme) */
  --sidebar: #FFFFFF;
  --sidebar-2: #F4F7FB;
  --sidebar-text: rgba(11,19,32,.88);
  --sidebar-muted: rgba(11,19,32,.55);
  --sidebar-pill: rgba(58,167,226,.10);
  --sidebar-pill-border: rgba(11,19,32,.10);

}


/* ===== Global typography ===== */
html, body{
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===== Semantic aliases (non-breaking) ===== */
:root{
  --surface-1: var(--panel);
  --surface-2: var(--panel-2);
  --text-1: var(--text);
  --border-1: var(--line);
  --border-2: var(--line-2);
}

a{ color: inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; }
input, select, textarea{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--input-bg);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(76,111,255,.55);
  box-shadow: 0 0 0 3px rgba(76,111,255,.12);
}

.hidden{ display:none !important; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 24px;
}
.login-card{
  width:min(420px, 100%);
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.login-title{
  font-size: 18px;
  font-weight: 650;
  margin: 0 0 6px;
  letter-spacing: .2px;
}
.login-sub{
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 16px;
  line-height: 1.35;
}
.form-row{ margin: 10px 0; }
.btn{
  border: 1px solid var(--line);
  background: var(--input-bg);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.btn:hover{ background: var(--control-hover); border-color: var(--line-2); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--accent);
  border-color: rgba(76,111,255,.35);
  color: #fff;
}
.btn-primary:hover{ background: var(--primary-hover); }
.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: transparent; }

/* ---------- App layout ---------- */
.app{
  display:grid;
  grid-template-columns: 200px 1fr;
  min-height:100vh;
}

.sidebar{
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
  color: var(--sidebar-text);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px 14px;
  margin-bottom: 10px;
}
.brand-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing: .2px;
}
.brand-title{
  line-height: 1.15;
}
.brand-title b{ display:block; font-size: 13px; letter-spacing:.2px; }
.brand-title span{ display:block; font-size: 12px; color: var(--sidebar-muted); margin-top: 2px; }

.nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 4px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--sidebar-text);
  cursor:pointer;
  user-select:none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  font-size: 13px;
  font-weight: 600;
}
.nav-item small{
  font-weight: 600;
  color: var(--sidebar-muted);
  margin-left:auto;
  font-size: 11px;
}
.nav-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.nav-item.active{
  background: rgba(76,111,255,.20);
  border-color: rgba(76,111,255,.30);
}
.nav-ico{
  width: 18px; height: 18px;
  opacity: .9;
  display:inline-grid;
  place-items:center;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  font-weight: 800;
}

.main{
  padding: 22px 22px 40px;
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.title h1{
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 750;
  letter-spacing: .2px;
}
.title p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.tabs{
  display:flex;
  gap: 8px;
  background: rgba(255,255,255,.55);
  border:1px solid var(--line);
  padding: 6px;
  border-radius: 14px;
  width: fit-content;
  margin: 10px 0 16px;
}
.tab{
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  user-select:none;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tab:hover{
  background: rgba(16,24,40,.04);
  border-color: rgba(16,24,40,.06);
  color: var(--text);
}
.tab.active{
  background: var(--input-bg);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

.grid{
  display:grid;
  gap: 14px;
}
.grid.two{ grid-template-columns: 1.35fr 1fr; }
.grid.three{ grid-template-columns: 1fr 1fr 1fr; }
.grid.split{ grid-template-columns: 1.1fr .9fr; }

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  min-width: 0;
}
.card h3{

/* ===== Light: no borders on surfaces (depth via shadows + surfaces) ===== */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .journal-left-card,
html[data-theme="light"] .journal-right,
html[data-theme="light"] .journal-table-card,
html[data-theme="light"] .kpi-item,
html[data-theme="light"] .mini,
html[data-theme="light"] .legend-item{
  border: none !important;
  box-shadow: var(--shadow);
}
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 750;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.card h2{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: .2px;
}
.subtle{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.kpi{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.kpi-item{
  flex: 1;
  min-width: 160px;
  background: var(--panel-2);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.kpi-item b{
  display:block;
  font-size: 14px;
  letter-spacing: .1px;
}
.kpi-item span{
  display:block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Tables ---------- */
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
}
.table{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: var(--input-bg);
}

/* ===== Pulse tables (Radar + Journal): zebra + row hover only (TZ) ===== */
.pulse-table.panel:hover{ background: var(--panel) !important; box-shadow: var(--shadow) !important; transform: none !important; filter: none !important; background-image: none !important; }

/* zebra */
.pulse-table table tbody tr:nth-child(even){ background: var(--panel-2); }
/* hover only on row */
.pulse-table table tbody tr:hover{ background: rgba(15,23,42,.03); }

/* If a page uses .pulse-tbl */
.pulse-table-wrap .pulse-tbl tbody tr:nth-child(even){ background: var(--panel-2); }
.pulse-table-wrap .pulse-tbl tbody tr:hover{ background: rgba(15,23,42,.03); }

th, td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 13px;
}
th{
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 750;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .25px;
}
tr:last-child td{ border-bottom: none; }
td.muted{ color: var(--muted); }
.nowrap{ white-space:nowrap; }
.truncate{
  max-width: 520px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  display:block;
}

/* ---------- Score control ---------- */
.seg{
  display:inline-flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  background: var(--input-bg);
}
.seg button{
  border: none;
  background: transparent;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  min-width: 36px;
  transition: background .12s ease, color .12s ease;
}
.seg button:hover{ background: rgba(16,24,40,.04); color: var(--text); }
.seg button.active{
  background: rgba(76,111,255,.14);
  color: var(--text);
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--chip-border);
  background: var(--chip-bg);
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--muted-2);
}
.dot.ok{ background: var(--ok); }
.dot.warn{ background: var(--warn); }
.dot.bad{ background: var(--bad); }

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

/* ---------- Mini chart cards ---------- */
.mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--panel-2);
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.mini:hover{
  background: var(--input-bg);
  border-color: var(--line-2);
}
.mini:active{ transform: translateY(1px); }
.mini b{ display:block; font-size: 13px; }
.mini span{ display:block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------- Period picker ---------- */
.period{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.preset{
  display:flex;
  gap: 8px;
  align-items:center;
}
.preset .btn{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 750;
  font-size: 12px;
}
.field{
  display:flex;
  gap: 8px;
  align-items:center;
  color: var(--muted);
  font-size: 12px;
}
.field input{ padding: 8px 10px; border-radius: 12px; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 50;
}
.modal-backdrop.show{ display:flex; }
.modal{
  width:min(760px, 100%);
  background: var(--input-bg);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 25px 80px rgba(16,24,40,.35);
  overflow:hidden;
}
.modal-header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.modal-header b{ font-size: 14px; }
.modal-body{
  padding: 14px 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-body .full{ grid-column: 1 / -1; }
.modal-body label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
  margin: 2px 0 6px;
}
.modal-body textarea{
  min-height: 92px;
  resize: vertical;
}
.modal-footer{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ---------- SVG Radar ---------- */
.radar-wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  align-items:start;
}
.radar-svg{
  width: 320px;
  max-width: 100%;
  height: auto;
  display:block;
}
.legend{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.legend-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.legend-item b{
  font-size: 13px;
}
.legend-item span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px){
  .grid.two, .grid.split{ grid-template-columns: 1fr; }
  .radar-wrap{ grid-template-columns: 1fr; }
  .sidebar{ position: relative; height:auto; }
  .app{ grid-template-columns: 1fr; }
}

/* ============================================================
   Radar17 v1.2 additions (Cases only)
   ============================================================ */

.danger-light{
  /* мягкая подсветка строки при выборе "2" */
  background: rgba(240, 68, 56, 0.06);
}

/* фикс ширины и стабильная сетка таблицы */
.r17-table{
  table-layout: fixed;
}
.r17-table th,
.r17-table td{
  overflow: hidden;
}

/* title + info icon inline without stretching table */
.r17-title{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0; /* важно для truncate внутри flex */
}
.r17-title-text{
  min-width: 0;
}

/* micro ℹ icon (no “Примеры” text) */
.r17-info{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.r17-info:hover{
  color: var(--text);
  background: rgba(16,24,40,.04);
}
.r17-info:active{
  transform: translateY(1px);
}

/* keep 0/1/2 buttons compact */
.seg.one{
  border-radius: 12px;
}
.seg.one button{
  min-width: 40px;
}

/* examples row: should not affect column widths */
.examples-row td{
  padding-top: 0;
}

.examples-box{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}

.examples-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.examples-list li{
  margin: 4px 0;
}
/* --- Radar17 Finance: TOP5 dmg row highlight --- */
.row-top-dmg{
  background: rgba(255, 0, 0, 0.25);
}
.row-bottom-dmg{
  background: rgba(0, 200, 0, 0.25);
}



/* --- Radar MVP: modal speedup + toast --- */
.modal { max-width: 860px; width: min(860px, calc(100vw - 32px)); }
.modal .modal-body textarea#m_fact { width: 100%; min-height: 200px; resize: vertical; }
.modal-hint { margin-top: 10px; font-size: 13px; opacity: .75; line-height: 1.35; }
.modal-error { margin-top: 10px; font-size: 13px; color: #c62828; min-height: 18px; }
.btn.btn-icon { padding: 6px 10px; line-height: 1; }
#caseModalClose:disabled { opacity: .45; cursor: not-allowed; }

.btn .btn-spinner { display: none; width: 14px; height: 14px; margin-left: 8px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: radarSpin .7s linear infinite; }
.btn.is-loading .btn-spinner { display: inline-block; }
@keyframes radarSpin { to { transform: rotate(360deg); } }

.radar-toast-root { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.radar-toast { background: rgba(20,20,20,.92); color: #fff; padding: 10px 12px; border-radius: 12px; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.radar-toast.show { opacity: 1; transform: translateY(0); }

.pulse-upd { animation: pulseUpd .22s ease-in-out; }
@keyframes pulseUpd { from { transform: scale(1); opacity: .85; } to { transform: scale(1); opacity: 1; } }

/* ==========================
   SlideOver (sector details)
   ========================== */
body.slideover-open{ overflow: hidden; }

#slideoverRoot{
  position: relative;
  z-index: 60;
}

.slideover-overlay{
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.slideover-panel{
  position: fixed;
  inset: 0 0 0 auto;
  height: 100vh;
  width: min(440px, calc(100vw - 40px));
  background: var(--surface-1);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 56px rgba(0, 0, 0, 0.30);
  transform: translateX(16px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* When root has content */
#slideoverRoot:not(:empty) .slideover-overlay{
  opacity: 1;
  pointer-events: auto;
}
#slideoverRoot:not(:empty) .slideover-panel{
  transform: translateX(0);
  opacity: 1;
}

.slideover-header{
  padding: 16px 18px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.slideover-title{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.slideover-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2);
}

.slideover-close.btn.btn-icon{
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.slideover-close.btn.btn-icon:hover{
  background: var(--panel-2);
  border-color: var(--line-2);
  color: var(--text);
}

.slideover-metrics{
  padding: 12px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.slideover-metrics-main{
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .1px;
  color: var(--text);
}

.slideover-metrics-sub{
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.slideover-cases{
  padding: 8px 0 18px;
  overflow: auto;
  flex: 1;
}

.slideover-case-row{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .14s ease;
}
.slideover-case-row:hover{
  background: var(--panel-2);
}

.slideover-case-date{
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted);
  padding-top: 1px;
}

.slideover-case-fact{
  font-size: 14px;
  line-height: 1.42;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slideover-footer{
  padding: 14px 18px 0;
}

.slideover-empty{
  padding: 18px;
}

.slideover-empty-text{
  font-size: 14px;
  line-height: 1.42;
  color: var(--text);
}

@media (max-width: 640px){
  .slideover-panel{
    width: min(100vw, 100vw);
    border-left: 0;
  }
}

/* ==========================
   Clickable hints + hover
   ========================== */
.pulse-zone-card[data-open-zone]{
  cursor: pointer;
  transition: box-shadow .14s ease, border-color .14s ease, transform .05s ease;
  outline: none;
}
.pulse-zone-card[data-open-zone]:hover{
  border-color: rgba(16,24,40,0.22);
  box-shadow: 0 10px 22px rgba(16,24,40,0.08);
}
.pulse-zone-card[data-open-zone]:active{
  transform: scale(0.99);
}
.pulse-zone-card[data-open-zone]:focus-visible{
  outline: 2px solid rgba(16,24,40,0.22);
  outline-offset: 2px;
}
.pulse-zone-hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .14s ease;
}
.pulse-zone-card[data-open-zone]:hover .pulse-zone-hint{
  opacity: 1;
}

/* ==========================
   Radar sector hover (quiet)
   ========================== */
.radar-sector{ cursor: pointer; }

/* No opacity, no stroke, no extra lines. Only HEX fill swap on already-filled rings. */
.radar-cell{ transition: fill .12s ease; }

/* Hover fill mapping by severity class (applies ONLY to filled rings) */
.radar-sector:hover .radar-cell.is-filled.is-green{ fill: var(--radar-ring-1-hover) !important; }
.radar-sector:hover .radar-cell.is-filled.is-yellow{ fill: var(--radar-ring-2-hover) !important; }
.radar-sector:hover .radar-cell.is-filled.is-orange{ fill: var(--radar-ring-3-hover) !important; }
.radar-sector:hover .radar-cell.is-filled.is-red{ fill: var(--radar-ring-4-hover) !important; }


/* Hover: empty rings inside hovered sector become panel/white (fill only). */
html[data-theme="light"] .radar-sector:hover .radar-cell:not(.is-filled){ fill: #FFFFFF !important; }
html:not([data-theme="light"]) .radar-sector:hover .radar-cell:not(.is-filled){ fill: var(--panel) !important; }

/* Micro-fix: separate center from first ring (stroke uses the same radar grid). */
.radar-center{ stroke: var(--radar-grid); stroke-width: 1; }

/* SWR meta badge */
.badge-muted{
  font-size:12px;
  color: rgba(17,24,39,0.60);
}

/* ===== Journal page ===== */
.journal-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  margin-bottom:24px;
}
@media (max-width: 980px){
  .journal-top{ grid-template-columns: 1fr; }
}
.journal-title{ margin:0 0 10px; }

/* Journal: CTA block (copied 1:1 from MyCases layout) */
.journal-left .pulse-cta{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; width:100%; margin-top:16px; }
.journal-left .pulse-cta .btn{ width:100%; height:44px; display:flex; align-items:center; justify-content:center; text-align:center; }
#ctaUploadJournal{ border:1px solid var(--line) !important; background: transparent !important; }
.period-pills{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
  margin-bottom:12px;
}
@media (max-width: 767px){
  .period-pills{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding-bottom:2px;
  }
  .period-pills::-webkit-scrollbar{ height:6px; }
  .period-pills::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--line) 60%, transparent); border-radius:999px; }
  .period-pills::-webkit-scrollbar-track{ background: transparent; }
  .pill{
  width:100%;
  height:40px;
  border:1px solid var(--line);
  background: var(--input-bg);
  color:var(--text);
  border-radius:14px;
  padding:7px 8px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  user-select:none;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  min-width:0;
  white-space:nowrap;
}
.pill:hover{ background: color-mix(in srgb, var(--input-bg) 92%, var(--text) 8%); }
}
.period-pills .pill{
  border:1px solid var(--line);
  background: var(--input-bg);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.period-pills .pill.is-active{
  border-color:rgba(58,167,226,.55);
  background:var(--primary-weak);
  color:var(--primary);
}
.period-pills .pill-range{
  font-weight:700;
}
.journal-left-actions{ margin-top:2px; }
.btn.primary{
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}
.journal-right .journal-filters-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}
.journal-filters-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 14px;
}
@media (max-width: 980px){
  .journal-filters-grid{ grid-template-columns: 1fr; }
}
.jf{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
}
.jf-label{
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}
.jf-select{
  appearance:auto;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  padding:0 14px;
  font-weight:600;
  background: var(--input-bg);
}
.journal-tabs{
  display:flex;
  gap:8px;
  padding:0 2px 10px 2px;
  margin-top:1px;
}
.journal-tabs .tab{
  border:1px solid var(--line);
  background: var(--input-bg);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
  color:var(--text);
}
.journal-tabs .tab.is-active{
  border-color:rgba(58,167,226,.55);
  background:var(--primary-weak);
  color:var(--primary);
}


/* Tabs bar with optional reset button (right side) */
.journal-tabsbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 10px 2px;
  margin-top:4px;
}
.journal-tabsbar .journal-tabs{
  padding:0;
  margin-top:0;
}
.jt-resetall{
  border:1px solid var(--line);
  background: transparent;
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
  color: #d94b4b;
}
html[data-theme="light"] .jt-resetall{
  color:#d03131;
}
.jt-resetall:hover{
  background: rgba(217,75,75,0.06);
}
.journal-table-card{ margin-top:0; }

/* Table viewport: enables horizontal scroll + sticky columns */
.journal-table-wrap{
  overflow:auto;
}

/* ===== Light: Journal table anti-grid + heatmap scanability ===== */
html[data-theme="light"] #journalPage .journal-table{
  border: none !important;       /* do not use .table container frame */
  border-radius: 0 !important;
  background: transparent;
}
html[data-theme="light"] #journalPage .journal-table thead th,
html[data-theme="light"] #journalPage .journal-table tbody td{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--line) !important;
}

/* zebra (very soft) via overlay so it works even with colored columns */
html[data-theme="light"] #journalPage .journal-table tbody tr:nth-child(even) td{
  box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.015);
}

/* hover row only (no container hover, no borders) */
html[data-theme="light"] #journalPage .journal-table tbody tr:hover td{
  box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.03);
}

/* prevent whole-table/card hover washout */
html[data-theme="light"] #journalPage .journal-table-card:hover{
  background: var(--panel);
}

/* Journal table: fixed geometry (no column jumps) */


/* ===== Journal table: airy row dividers ===== */
:root{ --jt-row-divider: rgba(255,255,255,0.06); } /* dark */
html[data-theme="light"]{ --jt-row-divider: rgba(15, 23, 42, 0.08); }

/* ===== Journal: structural left gradient (neutral graphite) =====
   Applies to ALL tabs for first 3 columns (Дата | Факт | Направление).
   4th column is structural ONLY on review tab (jt-review).
=============================================================== */
:root{
  /* dark defaults */
  --jt-col1: #0F172A;
  --jt-col2: #111827;
  --jt-col3: #131C2E;
  --jt-col4: #151F31;
}
html[data-theme="light"]{
  --jt-col1: #F8FAFC;
  --jt-col2: #F4F6F8;
  --jt-col3: #EFF2F5;
  --jt-col4: #E9EDF2;
}

/* Set default cell background variable for hover math */
.journal-table th,
.journal-table td{
  --cell-bg: transparent;
}

/* Apply neutral structure to first 3 columns in ALL tabs */
.journal-table thead th:nth-child(1),
.journal-table tbody td:nth-child(1){ background: var(--jt-col1) !important; --cell-bg: var(--jt-col1); }
.journal-table thead th:nth-child(2),
.journal-table tbody td:nth-child(2){ background: var(--jt-col2) !important; --cell-bg: var(--jt-col2); }
.journal-table thead th:nth-child(3),
.journal-table tbody td:nth-child(3){ background: var(--jt-col3) !important; --cell-bg: var(--jt-col3); }

/* Review tab only: 4th column (Статус) header is structural; body stays neutral unless filled */
.journal-table.jt-review thead th:nth-child(4){ background: var(--jt-col4) !important; --cell-bg: var(--jt-col4); }


/* ===== Journal: Status column (review) — no value-based gradient =====
   - empty status: transparent (same as right columns when empty)
   - filled status: uses the structural color that previously tinted the empty status column
*/
.journal-table.jt-review td.dd-cell[data-field="status"] .chip-dd.is-empty{
  --tone-bg: transparent !important;
  background: transparent !important;
}
.journal-table.jt-review td.dd-cell[data-field="status"] .chip-dd:not(.is-empty){
  --tone-bg: var(--jt-col4) !important;
  background: var(--jt-col4) !important;
}

/* Neutralize any old status tone mappings (if present) */
.journal-table.jt-review td.dd-cell[data-field="status"] .chip-dd[data-tone^="status-"]{
  --tone-bg: var(--jt-col4) !important;
}


.journal-table{
  width:100%;
  table-layout:fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-weight:500;

  /* widths for sticky left columns (must match renderColgroupForTab base) */
  --c1: 9%;
  --c2: 20%;
  --c3: 13%;
}

/* Header: sticky + centered labels */
.journal-table thead th{
  position:sticky;
  top:0;
  z-index:6;
  background: var(--jt-col1);
  text-align:center;
  white-space:nowrap;
  padding: 10px 10px;
  vertical-align: middle;
  border: none; /* removed grid */
}


/* ===== Journal table: remove vertical gridlines (no Excel) ===== */
.journal-table thead th,
.journal-table tbody td{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--jt-row-divider) !important;
}

/* Header bottom line slightly stronger for separation */
.journal-table thead th{
  border-bottom: 1px solid var(--jt-row-divider) !important;
  text-align: center !important;
}

/* Last row: no bottom line (clean rounded end) */
.journal-table tbody tr:last-child td{
  border-bottom: none !important;
}

/* Body cells: left aligned (prevent mixed align from globals) */
.journal-table tbody td{
  text-align:left !important;
  padding: 5px 8px;
  vertical-align: middle;
  border: none; /* removed grid */
}

/* Keep content from stretching columns */
.journal-table th,
.journal-table td{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Zebra/row hover disabled for heatmap canvas */

/* Fact cell: fixed rhythm (3 lines), then clamp */
.journal-table td.cell-fact{
  font-weight: 500;
  color: var(--text);

  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-table tbody td:nth-child(1){ color: var(--muted); font-weight: 500; }

/* Fixed row rhythm (3-line fact + consistent height across table) */
.journal-table tbody tr{ height: 60px; }
.journal-table tbody td{ height: 60px; }

/* Sticky first 3 columns (Date | Fact | Direction) */
.journal-table thead th:nth-child(1),
.journal-table tbody td:nth-child(1){
  position: sticky;
  left: 0;
  z-index: 7;
  background: var(--jt-col1);
}
.journal-table thead th:nth-child(2),
.journal-table tbody td:nth-child(2){
  position: sticky;
  left: var(--c1);
  z-index: 7;
  background: var(--jt-col2);
}
.journal-table thead th:nth-child(3),
.journal-table tbody td:nth-child(3){
  position: sticky;
  left: calc(var(--c1) + var(--c2));
  z-index: 7;
  background: var(--jt-col3);
}

/* Direction cell: full-height heatmap-style pill (no islands) */
.journal-table td:nth-child(3){ padding: 0 !important; }
.journal-table td:nth-child(3) .badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding: 0 8px;
  border-radius: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background: transparent; border: 0;
  color: var(--text); font-weight: 600;
}

/* ===== Journal custom dropdown (inline cell control) ===== */
.chip-dd{
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: var(--tone-bg, transparent);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.chip-dd-label{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.chip-dd.is-empty .chip-dd-label{
  /* empty cells show nothing by default; reveal on hover */
  color: var(--muted);
  opacity: 0;
}

.dd-cell:hover .chip-dd.is-empty .chip-dd-label,
.chip-dd:focus-visible.is-empty .chip-dd-label{
  opacity: 1;
}

/* caret: only on hover/focus (keeps table visually light) */
.chip-dd-caret{
  opacity: 0;
  transition: opacity .12s ease;
}
.dd-cell:hover .chip-dd-caret,
.chip-dd:focus-visible .chip-dd-caret{
  opacity: .65;
}


/* ===== Journal: hover without border (caret stays) ===== */
:root{
  /* dark: slightly lighter on hover */
  --jt-hover-bg: color-mix(in srgb, var(--tone-bg, var(--cell-bg, transparent)) 90%, white 10%);
}
html[data-theme="light"]{
  /* light: slightly darker on hover */
  --jt-hover-bg: color-mix(in srgb, var(--tone-bg, var(--cell-bg, transparent)) 92%, black 8%);
}

/* hover/focus affordance */
.journal-table td.dd-cell{ padding: 0 !important; }
.dd-cell:hover .chip-dd{
  /* keep heatmap color; increase/decrease density instead of border */
  box-shadow: none;
  background: var(--jt-hover-bg, var(--tone-bg, var(--cell-bg, transparent)));
}

.chip-dd:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* disabled */
.chip-dd[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

/* ===== Color layer (Variant 2): per-column hue + intensity by value ===== */
/* Status: neutral slate-gray */
.chip-dd[data-tone="status-new"]{ --tone-bg: rgba(60,70,85,0.04); }
.chip-dd[data-tone="status-work"]{ --tone-bg: rgba(60,70,85,0.10); }
.chip-dd[data-tone="status-delegated"]{ --tone-bg: rgba(60,70,85,0.07); }
.chip-dd[data-tone="status-watch"]{ --tone-bg: rgba(60,70,85,0.12); }
.chip-dd[data-tone="status-ok"]{ --tone-bg: rgba(60,70,85,0.15); }
.chip-dd[data-tone="status-archive"]{ --tone-bg: rgba(60,70,85,0.05); }
.chip-dd[data-tone="status-other"]{ --tone-bg: rgba(60,70,85,0.06); }

/* Responsibility: blue (primary-ish) */
.chip-dd[data-tone="owner-none"]{ --tone-bg: transparent; }
.chip-dd[data-tone="owner-employee"]{ --tone-bg: rgba(37,99,235,0.04); }
.chip-dd[data-tone="owner-manager"]{ --tone-bg: rgba(37,99,235,0.08); }
.chip-dd[data-tone="owner-contractor"]{ --tone-bg: rgba(37,99,235,0.08); }
.chip-dd[data-tone="owner-me"]{ --tone-bg: rgba(37,99,235,0.14); }
.chip-dd[data-tone="owner-other"]{ --tone-bg: rgba(37,99,235,0.08); }

/* If I stop: warm risk (dark defaults) */
.chip-dd[data-tone="ifstop-self"]{ --tone-bg: transparent; }
.chip-dd[data-tone="ifstop-unpleasant"]{ --tone-bg: rgba(245,158,11,0.08); }
.chip-dd[data-tone="ifstop-money"]{ --tone-bg: rgba(249,115,22,0.12); }
.chip-dd[data-tone="ifstop-conflict"]{ --tone-bg: rgba(239,68,68,0.14); }
.chip-dd[data-tone="ifstop-critical"]{ --tone-bg: rgba(220,38,38,0.18); }
.chip-dd[data-tone="ifstop-unknown"]{ --tone-bg: rgba(60,70,85,0.04); }
.chip-dd[data-tone="ifstop-other"]{ --tone-bg: rgba(239,68,68,0.10); }


/* ===== Journal: heatmap light overrides ===== */
html[data-theme="light"]{
  /* Status (light, softer) */
  .chip-dd[data-tone="status-new"]{ --tone-bg: rgba(60,70,85,0.035); }
  .chip-dd[data-tone="status-work"]{ --tone-bg: rgba(60,70,85,0.085); }
  .chip-dd[data-tone="status-delegated"]{ --tone-bg: rgba(60,70,85,0.06); }
  .chip-dd[data-tone="status-watch"]{ --tone-bg: rgba(60,70,85,0.10); }
  .chip-dd[data-tone="status-ok"]{ --tone-bg: rgba(60,70,85,0.13); }
  .chip-dd[data-tone="status-archive"]{ --tone-bg: rgba(60,70,85,0.045); }
  .chip-dd[data-tone="status-other"]{ --tone-bg: rgba(60,70,85,0.05); }

  /* Responsibility (light) */
  .chip-dd[data-tone="owner-none"]{ --tone-bg: transparent; }
  .chip-dd[data-tone="owner-employee"]{ --tone-bg: rgba(37,99,235,0.035); }
  .chip-dd[data-tone="owner-manager"]{ --tone-bg: rgba(37,99,235,0.07); }
  .chip-dd[data-tone="owner-contractor"]{ --tone-bg: rgba(37,99,235,0.07); }
  .chip-dd[data-tone="owner-me"]{ --tone-bg: rgba(37,99,235,0.12); }
  .chip-dd[data-tone="owner-other"]{ --tone-bg: rgba(37,99,235,0.07); }

  /* If I stop (light) */
  .chip-dd[data-tone="ifstop-self"]{ --tone-bg: transparent; }
  .chip-dd[data-tone="ifstop-unpleasant"]{ --tone-bg: rgba(245,158,11,0.085); }
  .chip-dd[data-tone="ifstop-money"]{ --tone-bg: rgba(249,115,22,0.14); }
  .chip-dd[data-tone="ifstop-conflict"]{ --tone-bg: rgba(239,68,68,0.155); }
  .chip-dd[data-tone="ifstop-critical"]{ --tone-bg: rgba(220,38,38,0.205); }
  .chip-dd[data-tone="ifstop-other"]{ --tone-bg: rgba(239,68,68,0.12); }
}

/* chip-dd--narrow disabled (all inline selects are одинаковые по ширине) */
.chip-dd--narrow{ width:100%; margin:0; }
.chip-dd:active{ transform: translateY(1px); }

/* Dropdown portal (attached to body to avoid table clipping) */
.dd-portal{
  position: fixed;
  z-index: 9999;
}
.dd-menu{
  width: auto;
  min-width: var(--dd-w, 240px);
  max-width: 420px;
  max-height: 280px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
}

/* ===== Light: dropdown depth without borders ===== */
html[data-theme="light"] .dd-menu{
  background: var(--surface-3);
  border: none;
  box-shadow: var(--shadow-2);
}

.dd-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: normal;
  line-height: 1.25;
}
.dd-item:hover{ background: var(--control-hover); }
.dd-item[aria-selected="true"]{
  background: var(--primary-weak);
  color: var(--primary);
  font-weight: 600;
}
/* Compact labels in journal blocks */
.journal-filters-sub,
.journal-mini-note{
  color: var(--muted);
}
.err{ color:#c02828; font-weight:700; }
.muted{ color:#6d7a8a; }
.mono{ font-variant-numeric: tabular-nums; }


/* Sidebar toggle at bottom */
.sidebar .sidebar-toggle{
  margin-top: auto;
}


/* Brand: logo + two-line title */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .logo{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
}
.brand .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand .brand-title{
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
}
.brand .brand-subtitle{
  font-weight:700;
  font-size:12px;
  opacity:.75;
}

/* Collapsed: keep only "R" */
body.sidebar-collapsed .brand .brand-text{
  display:none;
}





/* ===== Brand clean v3 (generated) ===== */
/* Goal:
   - Wide: R badge + "Radar\nсобственника" (a bit smaller)
   - Collapsed: only R badge, same size/centering as menu icons
   - Avoid duplicate pseudo-elements
*/

/* Make brand badge match menu icon pills */
.brand-badge{
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}

/* Hide old title/subtitle content (Prototype MVP etc.) */
.brand-title b,
.brand-title span{
  display:none !important;
}

/* Inject desired two-line label (slightly smaller) */
.brand-title::before{
  content: "Radar\Aсобственника";
  white-space: pre;
  line-height: 1.05;
  font-weight: 900;
  font-size: 13px; /* was bigger, now -1..2px */
  color: var(--sidebar-text);
  opacity: .95;
}

/* Collapsed: hide label, keep badge aligned */
body.sidebar-collapsed .brand-title::before,
.sidebar.is-collapsed .brand-title::before{
  content: "";
}

/* Collapsed: align brand like menu items (centered) */
body.sidebar-collapsed .brand{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Make badge in collapsed mode exactly like icons (+1px) */
body.sidebar-collapsed .brand-badge{
  width: 31px !important;
  height: 31px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
/* ===== End Brand clean v3 ===== */



/* ===== Brand hard reset v4 (generated) ===== */
/* Kill any original brand title text to avoid duplicates, then render desired label via ::before */
.brand-title{
  font-size: 0 !important;
  line-height: 0 !important;
}
.brand-title *{
  display:none !important;
}

/* Desired label */
.brand-title::before{
  content: "Radar\Aсобственника";
  white-space: pre;
  line-height: 1.05;
  font-weight: 900;
  font-size: 13px; /* slightly smaller */
  color: var(--sidebar-text);
  opacity: .95;
  display: inline-block;
}

/* Collapsed: hide label */
body.sidebar-collapsed .brand-title::before,
.sidebar.is-collapsed .brand-title::before{
  content: "";
  display:none;
}

/* Badge size matches menu icons */
.brand-badge{
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}
body.sidebar-collapsed .brand-badge{
  width: 31px !important;
  height: 31px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
/* ===== End Brand hard reset v4 ===== */



/* ===== Sidebar Collapsed FINAL Overrides (v4) ===== */
/* This block intentionally uses !important to win over earlier rules. */

.sidebar .sidebar-toggle{
  width: 100% !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--sidebar-text) !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 10px 0 0 0 !important;
}
.sidebar .sidebar-toggle:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Collapsed width */
body.sidebar-collapsed .app{
  grid-template-columns: 96px 1fr !important;
}
body.sidebar-collapsed .sidebar{
  width: 96px !important;
  min-width: 96px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Collapsed: hide all nav text */
body.sidebar-collapsed .nav-label,
.sidebar.is-collapsed .nav-label{
  display:none !important;
}
body.sidebar-collapsed .nav-item small,
.sidebar.is-collapsed .nav-item small{
  display:none !important;
}

/* Collapsed: center items */
body.sidebar-collapsed .nav-item,
.sidebar.is-collapsed .nav-item{
  justify-content:center !important;
  gap: 0 !important;
}

/* Collapsed: make active item not look "wide" */
body.sidebar-collapsed .nav-item.active,
.sidebar.is-collapsed .nav-item.active{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Brand: in collapsed show only badge (hide any injected/real text) */
body.sidebar-collapsed .brand-title::before,
.sidebar.is-collapsed .brand-title::before{
  content: "" !important;
}
body.sidebar-collapsed .brand-title,
.sidebar.is-collapsed .brand-title{
  font-size: 0 !important;
  line-height: 0 !important;
}

/* ===== End Sidebar Collapsed FINAL Overrides (v4) ===== */



/* ===== Collapsed centering + equal sizing (v5) ===== */
body.sidebar-collapsed .nav{
  align-items: center !important;
}
body.sidebar-collapsed .brand{
  justify-content: center !important;
}
body.sidebar-collapsed .brand-badge{
  margin: 0 auto !important;
}

/* Make each nav item a centered square button, same size as brand badge */
body.sidebar-collapsed .nav-item{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  justify-content: center !important;
  border-radius: 14px !important;
}

/* Ensure icon is perfectly centered and consistent */
body.sidebar-collapsed .nav-ico{
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Match brand badge to the same visual button size (44) */
body.sidebar-collapsed .brand-badge{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}

/* Active state should not stretch */
body.sidebar-collapsed .nav-item.active{
  width: 44px !important;
}
/* ===== End Collapsed centering + equal sizing (v5) ===== */

/* ===== Theme application overrides (v1) ===== */
html, body{
  background: var(--bg) !important;
  color: var(--text);
}
.card{
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow);
}
.muted{ color: var(--muted) !important; }
/* ===== End Theme application overrides ===== */

/* ===== Theme toggle button (sidebar) ===== */
.sidebar .theme-toggle{
  width: 100%;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--sidebar-pill-border);
  background: var(--sidebar-pill);
  color: var(--sidebar-text);
  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  margin: 10px 0 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar .theme-toggle:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.sidebar .theme-toggle .theme-ico{
  display:inline-block;
}

/* Collapsed: make theme button a square like icons */
body.sidebar-collapsed .sidebar .theme-toggle{
  width: 44px !important;
  height: 44px !important;
  margin: 10px auto 0 !important;
  border-radius: 14px !important;
}


/* ===== Radar UI aliases (for page-only styles) ===== */
:root{
  --surface-1: var(--panel);
  --surface-2: var(--panel-2, var(--chip-bg, var(--panel)));
  --text-1: var(--text);
  --text-2: var(--muted);
  --text-3: var(--muted-2, var(--muted));
  --stroke-1: var(--line);
  --stroke-2: var(--card-border, var(--line));
  --primary-600: var(--primary);
  --primary-100: var(--primary-weak);
}

html[data-theme="dark"]{
  /* dark mode is supported via existing core vars; keep aliases consistent */
  --surface-1: var(--panel);
  --surface-2: var(--panel-2, var(--chip-bg, var(--panel)));
  --text-1: var(--text);
  --text-2: var(--muted);
  --text-3: var(--muted-2, var(--muted));
  --stroke-1: var(--line);
  --stroke-2: var(--card-border, var(--line));
  --primary-600: var(--primary);
  --primary-100: var(--primary-weak);
}

html[data-theme="light"]{
  --surface-1: var(--panel);
  --surface-2: var(--panel-2, var(--chip-bg, var(--panel)));
  --text-1: var(--text);
  --text-2: var(--muted);
  --text-3: var(--muted-2, var(--muted));
  --stroke-1: var(--line);
  --stroke-2: var(--card-border, var(--line));
  --primary-600: var(--primary);
  --primary-100: var(--primary-weak);
}
/* ===== End Radar UI aliases ===== */


/* ============================================================
   Sidebar Design System v1.1 (visual-only)
   - unify geometry (48/14/20), remove neon borders
   - system controls pinned to bottom via spacer
   - sidebar stays dark in both themes
   ============================================================ */

/* Sidebar container: calm surface/air (no hard gradient) */
.sidebar{
  background: var(--sidebar) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  padding: 16px !important;
}

/* Brand: support both old and new DOM shapes; remove ::before hacks to avoid duplicates */
.sidebar .brand::before,
.sidebar .brand-title::before,
.sidebar .brand-badge::before{
  content: none !important;
}

.sidebar :is(.brand-badge, .brand .logo){
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.sidebar :is(.brand-title, .brand .brand-title){
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--sidebar-text) !important;
}

/* Old brand layout: force two equal lines 16/700 */
.sidebar .brand-title b,
.sidebar .brand-title span{
  display:block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--sidebar-text) !important;
  margin: 0 !important;
}

/* New brand layout: keep subtitle same weight/size per spec */
.sidebar .brand .brand-subtitle{
  font-size: 16px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  color: var(--sidebar-text) !important;
}

.sidebar .brand{
  gap: 12px !important;
  padding: 10px 8px 14px !important;
}

/* Nav container: robust targeting (class .nav or <nav>) */
.sidebar :is(.nav, nav){
  display:flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 4px !important;
  min-height: 0;
}

/* New structure */
.sidebar :is(.nav, nav) .nav-main{ display:flex; flex-direction:column; gap: 6px; }
.sidebar :is(.nav, nav) .nav-spacer{ flex: 1 1 auto; min-height: 12px; }
.sidebar :is(.nav, nav) .nav-system{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

/* Shared item geometry (nav-item + system controls) */
.sidebar :is(.nav, nav) .nav-item,
.sidebar .theme-toggle,
.sidebar .sidebar-toggle{
  height: 48px !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--sidebar-muted) !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  width: 100% !important;
}

/* Remove "button in button" icon capsule */
.sidebar :is(.nav, nav) .nav-ico{
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--sidebar-muted) !important;
  opacity: 1 !important;
}

/* Labels */
.sidebar :is(.nav, nav) .nav-label{
  color: var(--sidebar-muted) !important;
}

/* Hover: soft surface */
.sidebar :is(.nav, nav) .nav-item:hover,
.sidebar .theme-toggle:hover,
.sidebar .sidebar-toggle:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Active: background + icon color; no border */
.sidebar :is(.nav, nav) .nav-item.active{
  background: rgba(76,111,255,.18) !important; /* calm */
  color: var(--sidebar-text) !important;
  border: 0 !important;
}
.sidebar :is(.nav, nav) .nav-item.active .nav-label{
  color: var(--sidebar-text) !important;
}
.sidebar :is(.nav, nav) .nav-item.active .nav-ico{
  color: var(--primary) !important;
}


/* ===== Sidebar: FINAL compact icon-only layout ===== */
.sidebar :is(.nav, nav){
  height: 100%;
}
.sidebar :is(.nav, nav) .nav-system{
  margin-top: auto;
}
.sidebar :is(.nav, nav) .nav-item,
.sidebar :is(.nav, nav) .nav-item.nav-action{
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
.sidebar :is(.nav, nav) .nav-ico{
  width: 24px !important;
  height: 24px !important;
}
.sidebar :is(.nav, nav) .nav-main{
  gap: 18px;
}
.sidebar :is(.nav, nav) .nav-system{
  gap: 18px;
  padding-top: 0;
}

/* System buttons inner text */
.sidebar .theme-toggle .theme-ico,
.sidebar .sidebar-toggle .toggle-ico{
  width: 20px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar .theme-toggle .theme-label,
.sidebar .sidebar-toggle .toggle-label{
  color: var(--sidebar-muted);
}

/* Collapsed mode: 48x48 squares, hide text labels */
body.sidebar-collapsed .sidebar{
  padding-left: 14px !important;
  padding-right: 14px !important;
}
body.sidebar-collapsed .sidebar :is(.nav, nav){
  align-items: center !important;
}

body.sidebar-collapsed .sidebar :is(.nav, nav) .nav-item,
body.sidebar-collapsed .sidebar .theme-toggle,
body.sidebar-collapsed .sidebar .sidebar-toggle{
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  justify-content:center !important;
  gap: 0 !important;
  margin: 0 auto !important;
}

body.sidebar-collapsed .sidebar :is(.nav, nav) .nav-ico{
  width: 20px !important;
  height: 20px !important;
}

body.sidebar-collapsed .sidebar :is(.nav, nav) .nav-label,
body.sidebar-collapsed .sidebar .theme-toggle .theme-label,
body.sidebar-collapsed .sidebar .sidebar-toggle .toggle-label{
  display:none !important;
}

/* Collapsed brand: center, keep only badge */
body.sidebar-collapsed .sidebar .brand{
  justify-content:center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.sidebar-collapsed .sidebar .brand-title,
body.sidebar-collapsed .sidebar .brand-text{
  display:none !important;
}

/* Logout styling: default selector + safe fallbacks */
.sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]){
  height: 48px;
  border-radius: 14px;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.55);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]):hover{
  background: rgba(239, 68, 68, 0.08);
  color: rgba(255,255,255,.78);
}
/* ============================================================ */

/* --- vMenu1.2: Logout as system item (expanded + collapsed) --- */
.sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]) .logout-ico{
  width: 20px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]) .logout-label{
  font-size: 15px;
  font-weight: 600;
}
body.sidebar-collapsed .sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]){
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  justify-content:center !important;
}
body.sidebar-collapsed .sidebar :is(.logout, .nav-logout, #logoutBtn, [data-action="logout"]) .logout-label{
  display:none !important;
}

/* --- vMenu1.2.1: Brand typography + spacing --- */
.sidebar :is(.brand-title, .brand .brand-title){
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.sidebar .brand-title b,
.sidebar .brand-title span{
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.sidebar .brand{
  gap: 12px !important;
  padding-top: 16px !important;
  padding-bottom: 14px !important;
}
/* Collapsed: only R, no hacks */
body.sidebar-collapsed .sidebar .brand-title,
body.sidebar-collapsed .sidebar .brand-text,
body.sidebar-collapsed .sidebar .brand .brand-title,
body.sidebar-collapsed .sidebar .brand .brand-text{
  display:none !important;
}




/* ============================================================
   Journal (page-scoped) — myCases standard vJ1.2
   - ONLY visual overrides under #journalPage
   - Keeps global .card/.panel untouched
   ============================================================ */

/* Page background only for Journal */
#journalPage.page-journal{
  background: var(--bg);
}

/* Layout: 2 top panels + 1 bottom panel */
#journalPage .journal-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0; /* prevent inherited spacing */
  margin-bottom: 0;
}

/* Bottom panel spacing */
#journalPage .journal-table-card{
  margin-top: 24px;
}

/* Panel standard (same geometry as myCases panels) */
#journalPage .journal-left-card,
#journalPage .journal-right,
#journalPage .journal-table-card{
  background: var(--surface-1);
  border: none;
  border-radius: 20px;
  padding: 24px;
  box-shadow: none;
  min-width: 0;
}

/* Ultra-soft "line shadow" only in light theme (as in myCases) */
html[data-theme="light"] #journalPage .journal-left-card,
html[data-theme="light"] #journalPage .journal-right,
html[data-theme="light"] #journalPage .journal-table-card{
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Mobile/Tablet */
@media (max-width: 1023px){
  #journalPage .journal-top{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #journalPage .journal-left-card,
  #journalPage .journal-right,
  #journalPage .journal-table-card{
    padding: 16px;
  }
  #journalPage .journal-table-card{
    margin-top: 16px;
  }
}

/* Remove "layer in layer" (right panel + table area) */
#journalPage .journal-right :is(.card, .panel, .wrap, .panel-inner),
#journalPage .journal-table-card :is(.card, .panel){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Table wrap should not look like a second card */
#journalPage .journal-table-wrap{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important; /* panel already has padding */
}

/* H1 typography (myCases-like) */
#journalPage .journal-title{ margin:0 0 10px; }
@media (max-width: 768px){
  #journalPage .journal-title{ margin:0 0 10px; }
}

/* ===== Period filter (copied 1:1 from myCases) ===== */
/* one row, 3 fixed pills (no width jumps) */
    .pulse-presets{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:16px;
      align-items:stretch;
    }

    /* Mobile pills: one row with horizontal scroll */
    @media (max-width: 767px){
      .pulse-presets{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        gap:14px;
        padding-bottom:2px;
      }
      .pulse-pill{ flex:0 0 auto; width:auto; }
      .pulse-presets::-webkit-scrollbar{ height:6px; }
      .pulse-presets::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--stroke-1) 60%, transparent); border-radius:999px; }
      .pulse-presets::-webkit-scrollbar-track{ background: transparent; }
    }
/* Journal: Period pills should match myCases exactly */
.journal-left .pulse-presets .pulse-pill{
  border: 1px solid var(--stroke-1);
  border-radius:14px;
  padding:7px 8px;
  height:40px;
  background: var(--surface-1);
  color: var(--text-1);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  min-width:0;
}
.journal-left .pulse-presets .pulse-pill.active{
  background: color-mix(in srgb, var(--primary-600) 14%, var(--surface-1));
  border-color: color-mix(in srgb, var(--primary-600) 60%, var(--stroke-1));
  color: var(--primary-700);
}

.pulse-pill{
      border: 1px solid var(--stroke-1);
      border-radius:14px;
      padding:7px 8px;
      height:40px;
      background: var(--surface-1);
      color: var(--text-1);
      font-weight:800;
      font-size:12px;
      cursor:pointer;
      user-select:none;
      text-align:center;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height:1.15;
      min-width:0;
    }

    /* Period buttons (weekly) — always one line, no ellipsis, adaptive font-size */
    .pulse-pill[data-preset="thisWeek"],
    .pulse-pill[data-preset="lastWeek"]{
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      font-size:14px;
    }
    @media (max-width: 1280px){
      .pulse-pill[data-preset="thisWeek"],
      .pulse-pill[data-preset="lastWeek"]{ font-size:13px; }
    }
    @media (max-width: 520px){
      .pulse-pill[data-preset="thisWeek"],
      .pulse-pill[data-preset="lastWeek"]{ font-size:12px; }
    }
    .pulse-pill:hover{background:rgba(17,24,39,0.06);}
    /* quieter active */
    .pulse-pill.active{
      background: var(--primary-100);
      color: var(--primary-600);
      border-color: var(--primary-600);
      box-shadow:none;
    }
    .pulse-pill-text{
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .pulse-calwrap{position:relative;}

    /* Weekly zone timeline (v3.4) */
    .pulse-zone-timeline{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:16px;
    }

    .pulse-zone-item{
      width:100%;
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid transparent; /* default: no visible border */
      background: transparent;
      cursor:pointer;
      text-align:left;
      font: inherit;
    }
    /* hover: light surface only (no heavy border) */
    .pulse-zone-item:hover{
      background: var(--surface-2);
      border-color: transparent;
    }
    .pulse-zone-item:active{ transform: translateY(1px); }

    /* active: lighter than card, with left accent instead of рамки */
    .pulse-zone-item.is-active{
      background: var(--primary-100);
      border-color: transparent;
      border-left: 3px solid var(--primary-600);
      padding-left: 11px; /* compensate 3px border-left */
    }

    .pz-rail{ position:relative; width:18px; flex:0 0 18px; display:flex; justify-content:center; }
    .pz-dot{
      width:12px; height:12px;
      border-radius:999px;
      margin-top:4px;
      background: transparent;
      border:2px solid var(--stroke-2);
    }
    .pulse-zone-item.is-active .pz-dot{
      background: var(--primary-600);
      border-color: var(--primary-600);
    }
    .pz-line{
      position:absolute;
      top:15px;
      bottom:0;
      width:2px;
      left:50%;
      transform: translateX(-50%);
      background: var(--stroke-1);
    }
    .pulse-zone-item:last-child .pz-line{ display:none; }

    .pz-body{ flex:1 1 auto; min-width:0; }
    .pz-row1{ display:block; font-size:12px; font-weight:800; color: var(--text-2); line-height:1.2; }
    .pz-row2{ display:block; margin-top:2px; font-size:15px; line-height:1.25; color: var(--text-1); }
    .pz-streak{ display:block; margin-top:6px; font-size:12px; font-weight:800; color: var(--text-2); }

    /* hint: hover-only, and hidden on touch devices */
    .pz-hint{
      display:block;
      margin-top:6px;
      font-size:12px;
      color: var(--text-3);
      opacity:0;
      transition: opacity .14s ease;
    }
    .pulse-zone-item:hover .pz-hint{ opacity:1; }
    @media (hover: none) and (pointer: coarse){
      .pz-hint{ display:none !important; }
    }

    /* chevron: affordance icon */
    .pz-chevron{
      flex:0 0 auto;
      margin-left: 8px;
      font-size: 20px;
      line-height: 1;
      color: var(--text-3);
      display:flex;
      align-items:center;
      justify-content:center;
      height: 100%;
    }
    .pulse-zone-item:hover .pz-chevron{ color: var(--text-2); }
/* Calendar popover */
    .range-popover{position:absolute;top:calc(100% + 8px);right:0;left:auto;display:none;z-index:9999;}
    .range-popover.open{display:block;}
    .range-popover-inner{
      background:#fff;
      border:1px solid rgba(0,0,0,0.12);
      border-radius:14px;
      padding:18px;
      box-shadow:0 18px 40px rgba(0,0,0,0.18);
      min-width:min(640px, 92vw);
    }

    .rc-wrap{display:flex;flex-direction:column;gap:12px;}
    .rc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .rc-nav{
      width:34px;height:34px;border-radius:10px;
      border:1px solid rgba(0,0,0,0.12);
      background:#fff;
      cursor:pointer;
      font-size:20px;
      line-height:1;
      color:rgba(17,24,39,0.80);
    }
    .rc-nav:hover{background:rgba(17,24,39,0.04);}
    .rc-monthTitles{flex:1;display:flex;justify-content:space-between;gap:16px;}
    .rc-monthTitle{width:calc(50% - 8px);text-align:center;font-weight:800;color:rgba(17,24,39,0.82);}

    .rc-cal{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
    .rc-month{width:100%;}
    .rc-dow{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px;margin:6px 0 10px;}
    .rc-dow span{font-size:12px;font-weight:800;color:rgba(17,24,39,0.50);text-align:center;}
    .rc-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px;}
    .rc-day{
      height:34px;border-radius:10px;border:1px solid transparent;
      background:transparent;
      font-size:13px;font-weight:700;
      color:rgba(17,24,39,0.86);
      cursor:pointer;
    }
    .rc-day:hover{background:rgba(79,70,229,0.08);}
    .rc-day.is-out{opacity:0;pointer-events:none;}
    .rc-day.is-in{background:rgba(79,70,229,0.10);}
    .rc-day.is-start,.rc-day.is-end{
      background:rgba(79,70,229,0.18);
      border-color:rgba(79,70,229,0.35);
      color:rgba(17,24,39,0.95);
    }
    .rc-actions{display:flex;justify-content:flex-end;gap:16px;padding-top:4px;}
/* ============================================================ */


/* ===== Radar SVG theme bindings ===== */
.radar-grid-major{ stroke: var(--radar-grid-major) !important; stroke-width: 2; }
.radar-grid-minor{ stroke: var(--radar-grid-minor) !important; stroke-width: 1; }
.radar-grid-circle{ stroke: var(--radar-grid-circle) !important; stroke-width: 1; }
.radar-label{ fill: var(--radar-label) !important; }
.radar-center{ fill: var(--radar-center) !important; }
.radar-center-text{ fill: var(--radar-center-text) !important; }




/* ===== Journal table alignment tweaks (v5) ===== */
/* Left align: Направление, Статус, Ответственность, Если перестану (review tab layout) */
.journal-table thead th:nth-child(3),
.journal-table thead th:nth-child(4),
.journal-table thead th:nth-child(5),
.journal-table thead th:nth-child(6),
.journal-table tbody td:nth-child(3),
.journal-table tbody td:nth-child(4),
.journal-table tbody td:nth-child(5),
.journal-table tbody td:nth-child(6){
  text-align: left;
}

/* Fact column stays left */
.journal-table td.fact{
  text-align: left;
}

/* Direction badge aligns left within its cell */
.journal-table tbody td:nth-child(3) .badge{
  margin: 0;
}

/* Dropdown chips align left inside their cells */
.journal-table .chip-dd{
  margin: 0;
}

/* Left align text in dropdown menu items */
.dd-menu .dd-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* ===== End Journal table alignment tweaks (v5) ===== */

/* enforce centered header labels */
.journal-table thead th{ text-align:center !important; }


/* ===== Journal table: rounded container + header + last row (no per-cell rounding) ===== */
.journal-table-card{
  border-radius: 16px !important;
  overflow: hidden;
}
.journal-table-wrap{
  border-radius: 16px;
  overflow: auto; /* keep scroll */
}
/* Ensure table itself doesn't fight the rounding */
.journal-table{
  border-radius: 16px;
}
/* Header corners */
.journal-table thead th:first-child{ border-top-left-radius: 16px; }
.journal-table thead th:last-child{ border-top-right-radius: 16px; }
/* Bottom corners on last row */
.journal-table tbody tr:last-child td:first-child{ border-bottom-left-radius: 16px; }
.journal-table tbody tr:last-child td:last-child{ border-bottom-right-radius: 16px; }



/* Soften text contrast for structural columns (Direction + Status) */
.journal-table.jt-review td.dd-cell[data-field="status"] .chip-dd{
  color: var(--text-2);
}



/* Stronger column headers (visual anchor) */
.journal-table thead th{
  color: var(--text-1) !important;
  font-weight: 650 !important;
}



/* Ensure text stays readable on warm tones */
.chip-dd[data-tone^="ifstop-"]{
  color: var(--text) !important;
}
html[data-theme="light"] .chip-dd[data-tone^="ifstop-"]{
  color: var(--text-1) !important;
}





/* =======================
   Journal: Progress + Status quick filters (top-left block)
======================= */
.journal-mini.v2{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.journal-progress,
.journal-statusbox{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.jp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.jp-title{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  color: var(--muted);
}
.jp-showall{
  border:0;
  background: transparent;
  color: var(--primary);
  font-weight:700;
  cursor:pointer;
  padding:4px 6px;
  border-radius:10px;
}
.jp-showall:hover{ background: var(--control-hover); }

.jp-barrow{
  display:flex;
  align-items:center;
  gap:12px;
}
.jp-bar{
  flex:1;
  height:10px;
  border-radius:999px;
  background: var(--control);
  overflow:hidden;
}
.jp-fill{
  height:100%;
  background: var(--primary);
  opacity:.22;
}
.jp-metric{
  font-size:12px;
  color: var(--text);
  font-weight:700;
  white-space:nowrap;
}
.jp-remaining{
  margin-top:10px;
  width:100%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight:700;
  padding:10px 10px;
  border-radius: 12px;
  cursor:pointer;
  text-align:left;
}
.jp-remaining:hover{ background: var(--control-hover); }

.jsb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.jsb-title{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  color: var(--muted);
}
.jsb-all{
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight:800;
  border-radius: 999px;
  padding:6px 10px;
  cursor:pointer;
}
.jsb-all:hover{ background: var(--control-hover); }
.jsb-all.is-active{
  border-color: transparent;
  background: var(--primary-weak);
  color: var(--primary);
}

.jsb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.jsb-col{
  border:1px solid var(--line);
  border-radius: 12px;
  padding:10px;
  background: var(--surface);
}
.jsb-coltitle{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:8px;
}
.jsb-list{ display:flex; flex-direction:column; gap:8px; }

.st-chip{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  border:1px solid var(--line);
  background: transparent;
  border-radius: 12px;
  padding:8px 10px;
  cursor:pointer;
  text-align:left;
  color: var(--text);
}
.st-chip:hover{ background: var(--control-hover); }
.st-chip.is-active{
  border-color: transparent;
  background: var(--primary-weak);
  color: var(--primary);
}
.st-check{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  background: var(--control);
  font-weight:900;
  font-size:12px;
  color: var(--muted);
  flex:0 0 auto;
}
.st-chip.is-active .st-check{
  background: var(--primary);
  color: white;
}
.st-label{ flex:1 1 auto; font-weight:700; font-size:13px; }
.st-count{ flex:0 0 auto; opacity:.75; font-weight:800; }
.st-ic{ flex:0 0 auto; opacity:.85; }

@media (max-width: 1100px){
  .jsb-grid{ grid-template-columns: 1fr; }
}


/* ===== Journal progress timeline (MyCases-style) ===== */
.journal-mini.v2 .journal-progress.is-clickable { cursor: pointer; }
.journal-mini.v2 .jp-line1{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17,24,39,0.60);
  font-weight: 700;
  text-align: left;
}
.journal-mini.v2 .jp-timeline{ margin-top: 10px; }
.journal-mini.v2 .jp-progress-row{ display:flex; gap:8px; }
.journal-mini.v2 .jp-progress-group{ display:flex; gap:4px; flex:1; }
.journal-mini.v2 .jp-tile{
  flex:1;
  height:6px;
  border-radius:6px;
  background: var(--stroke-2);
}
.journal-mini.v2 .jp-tile.filled{
  background: var(--primary-600);
  opacity: 0.65;
}
.journal-mini.v2 .jp-foot{
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.journal-mini.v2 .jp-hoverhint{ display:none; }
.journal-mini.v2 .journal-progress.is-hoverable:hover .jp-hoverhint{ display:inline; }
.journal-mini.v2 .journal-progress.is-hoverable:hover .jp-foot{ color: var(--text-1); }
.journal-mini.v2 .journal-progress.is-hoverable:hover .jp-hoverhint{ color: var(--text-1); }



/* ===== Journal progress hover tail (v15) ===== */
.journal-mini.v2 .jr-progress-hover{ display:none; }
.journal-mini.v2 .journal-progress.is-hoverable:hover .jr-progress-hover{ display:inline; }

/* ===== Journal: 3 status cards (based on MyCases pulse-zone-item) ===== */

/* Journal: Center chevron vertically inside status cards */
.journal-status-cards .pulse-zone-item{ align-items:center; }
.journal-status-cards .pz-chevron{ align-self:center; display:flex; align-items:center; justify-content:center; }

.journal-status-cards{ margin-top: 14px; }
.journal-status-cards .pz-dot.pz-dot-diamond{
  border-radius: 3px;
  transform: rotate(45deg);
  width: 11px;
  height: 11px;
  margin-top: 5px; /* align with rail */
}
.journal-status-cards .pz-line{ top: 22px; } /* small tweak for diamond */

.journal-status-cards .jsg-line{
  display:flex;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.journal-status-cards .jsg-item{ display:inline-flex; align-items:baseline; gap:6px; }
.journal-status-cards .jsg-item.is-zero{
  color: var(--text-3);
  opacity: 0.75;
}
.journal-status-cards .jsg-count{
  font-weight: 800;
  color: var(--text-2);
}
.journal-status-cards .jsg-dot{
  margin: 0 10px;
  color: var(--text-3);
  opacity: 0.7;
  user-select:none;
}

.journal-status-cards .pulse-zone-item.is-filter-active .pz-hint{
  opacity: 1 !important;
  color: rgba(220,38,38,0.92);
  font-weight: 800;
}
html[data-theme="dark"] .journal-status-cards .pulse-zone-item.is-filter-active .pz-hint{
  color: rgba(248,113,113,0.92);
}



/* ===== Journal cosmetics: match MyCases (1:1) ===== */
.journal-top{
  gap:24px;
  margin-bottom:24px;
}
@media (max-width: 1023px){
  .journal-top{ gap:16px; margin-bottom:16px; }
}

/* Match MyCases panel padding/radius for the two top cards */
.journal-top > .card{
  padding:24px;
  border-radius:16px;
}
@media (max-width: 1023px){
  .journal-top > .card{ padding:16px; }
}

/* Journal title should inherit base hero typography (as in MyCases) */
.journal-title{ margin:0 0 10px; }

/* Keep topbar spacing consistent with MyCases */
.journal-left .journal-topbar{ margin-bottom: 0; }


/* Journal: Progress typography to match myCases */
.jr-progress-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.2px;
  color: var(--text-1);
}
.jr-progress-under{
  margin-top:6px;
  font-size:13px;
  color: var(--text-2);
}
.jr-progress-under .jr-progress-hover{
  opacity:0;
  transition: opacity 140ms ease;
  color: var(--text-2);
  font-weight:600;
}
.journal-progress.is-hoverable:hover .jr-progress-under .jr-progress-hover{
  opacity:1;
}

/* Progress block spacing (align to MyCases visual rhythm) */
.journal-mini.v2{ margin-top:16px; }
.journal-progress{
  padding:14px 16px;
  border-radius:16px;
}
@media (max-width: 1023px){
  .journal-progress{ padding:12px 14px; }
}

/* Status cards block spacing */
.journal-status-cards{ margin-top:16px; }

/* ===== Journal shell: keep top blocks visible, scroll table only ===== */
.page-journal{ height:100%; }
.page-journal .journal-shell{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 24px);
  overflow:hidden;
}
.page-journal .journal-shell-top{ flex:0 0 auto; }
.page-journal .journal-shell-table{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.page-journal .journal-shell-table .journal-table-card{ margin-bottom:0; }



/* === v18: Journal spacing match myCases (left block) === */

/* Use same vertical rhythm as myCases: title -> presets -> week card */
.journal-left .pulse-title{ margin:0 0 10px; }
.journal-left .pulse-filter{ display:flex; flex-direction:column; gap:8px; }
.journal-left .pulse-filter.journal-topbar{ margin-bottom:14px; }

/* Week/progress card should feel like myCases weekCard */
.journal-left .journal-progress{
  background: var(--surface-2);
  border: none;
  border-radius: 14px;
  padding: 14px;
}

/* Ensure title and timeline don't "stick" */
.journal-left .jr-progress-top{ margin-bottom:6px; }
.journal-left .jr-progress-timeline{ margin-top:2px; }

/* Keep under text spacing identical to myCases caption */
.journal-left .jr-progress-under{ margin-top:6px; }

/* === v18: Right cards compact (remove stage titles line) === */
.journal-status-cards .pz-row1{ display:none !important; }
.journal-status-cards .pz-body{ padding-top:0; }
.journal-status-cards .pz-row2{ margin-top:0; }



/* ===============================
   MyCases: Page header (2 panels 50/50)
   =============================== */
@media (min-width: 1024px){
  .page-myCases .pulse-grid.pulse-pagehead-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px; /* same vertical rhythm as other gaps */
  }

  .page-myCases .pulse-pagehead-left,
  .page-myCases .pulse-pagehead-right{
    padding: 16px;
    border-radius: 18px;
    display:flex;
    min-height: 0;
  }

  .page-myCases .pulse-pagehead-left{ align-items:center; }
  .page-myCases .pulse-pagehead-right{ align-items:center; justify-content:flex-start; }

  .page-myCases .pulse-h1{
    margin:0;
    font-size:30px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-0.01em;
  }

  .page-myCases .pulse-deltas{
    display:flex;
    flex-wrap:nowrap;
    gap: 8px 12px;
    align-items:center;
    line-height:1.2;
    font-size:13px;
    font-weight:500;
  }

  .page-myCases .pulse-delta-item{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    white-space:nowrap;
  }
  .page-myCases .pulse-delta-icon{ font-size:14px; line-height:1; }
  .page-myCases .pulse-delta-dir{ color: var(--text-1); font-weight:700; }
  .page-myCases .pulse-delta-val{ font-weight:800;  color: var(--text-1); }

  .page-myCases .pulse-delta-item.up   .pulse-delta-icon{ color: #DC2626; }

  .page-myCases .pulse-delta-item.down .pulse-delta-icon{ color: #16A34A; }

  .page-myCases .pulse-delta-item.neutral .pulse-delta-icon{ color: var(--text-3); }
}

/* ===============================
   Journal: Page header (2 panels 50/50) — match MyCases
   =============================== */
@media (min-width: 1024px){
  .page-journal .pulse-grid.pulse-pagehead-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .page-journal .pulse-pagehead-left,
  .page-journal .pulse-pagehead-right{
    padding: 16px;
    border-radius: 18px;
    display:flex;
    min-height: 0;
  }

  .page-journal .pulse-pagehead-left{ align-items:center; }
  .page-journal .pulse-pagehead-right{ align-items:center; justify-content:flex-start; }

  .page-journal .pulse-h1{
    margin:0;
    font-size:30px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-0.01em;
  }
}

@media (max-width: 1023px){
  .page-journal .pulse-grid.pulse-pagehead-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .page-journal .pulse-pagehead-left,
  .page-journal .pulse-pagehead-right{
    padding: 16px;
    display:flex;
    align-items:center;
  }
  .page-journal .pulse-h1{
    margin:0;
    font-size:30px;
    line-height:1.05;
    font-weight:800;
  }
}

/* ===============================
   Journal: 3 top tiles (3 in a row) — match MyCases
   =============================== */
@media (min-width: 1024px){
  .page-journal .pulse-grid.pulse-grid-3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    column-gap:24px !important;
    row-gap:24px !important;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .page-journal .pulse-grid.pulse-grid-3 > .panel{
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 18px;
    border-radius: 18px;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
}

/*
  Journal: hard override legacy #journalPage rules
  (there are old high-specificity selectors like #journalPage .journal-top that
   can override the new 3-col grid). Keep Journal sizes 1:1 with MyCases.
*/
@media (min-width: 1024px){
  #journalPage.page-journal .pulse-grid.pulse-pagehead-grid{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }

  #journalPage.page-journal .pulse-pagehead-left,
  #journalPage.page-journal .pulse-pagehead-right{
    padding: 16px !important;
    border-radius: 18px !important;
    display:flex !important;
    min-height: 0 !important;
  }

  #journalPage.page-journal .pulse-grid.pulse-grid-3.journal-top{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    column-gap:24px !important;
    row-gap:24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }

  #journalPage.page-journal .pulse-grid.pulse-grid-3.journal-top > .panel{
    aspect-ratio: 1 / 1 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
}

@media (max-width: 1023px){
  .page-journal .pulse-grid.pulse-grid-3{
    display:grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .page-journal .pulse-grid.pulse-grid-3 > .panel{
    padding: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 1023px){
  .page-myCases .pulse-grid.pulse-pagehead-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .page-myCases .pulse-pagehead-left,
  .page-myCases .pulse-pagehead-right{
    padding: 16px;
    display:flex;
    align-items:center;
  }
  .page-myCases .pulse-h1{
    margin:0;
    font-size:30px;
    line-height:1.05;
    font-weight:800;
  }
  .page-myCases .pulse-deltas{
    display:flex;
    flex-wrap:nowrap;
    gap: 10px 14px;
    font-size:13px;
    font-weight:500;
  }
}

/* ===============================
   MyCases: 3 square top tiles + compact mode
   =============================== */
@media (min-width: 1024px){
  .page-myCases .pulse-grid.pulse-grid-3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    column-gap:24px !important;
    row-gap:24px !important;
    align-items: stretch;
  }

  .page-myCases .pulse-grid.pulse-grid-3 > .panel{
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 18px;
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .page-myCases .pulse-grid.pulse-grid-3 .pulse-title{
    font-size:18px;
    line-height:1.2;
    margin:0 0 10px;
  }

  .page-myCases .pulse-grid.pulse-grid-3 .pz-row1{ font-size:12px; }
  .page-myCases .pulse-grid.pulse-grid-3 .pz-row2{ font-size:13px; }
  .page-myCases .pulse-grid.pulse-grid-3 .pz-hint{ font-size:12px; }

  .page-myCases .pulse-grid.pulse-grid-3 .btn{
    padding:10px 12px;
    font-size:13px;
  }

  .page-myCases .pulse-grid.pulse-grid-3 .pulse-left-main{
    flex: 1 1 auto;
    min-height:0;
    overflow:hidden;
  }

  .page-myCases .pulse-grid.pulse-grid-3 .pulse-left-spacer{ display:none; }
  .page-myCases .pulse-grid.pulse-grid-3 .pulse-cta-desktop{ margin-top:auto; }

  .page-myCases .pulse-mid .pulse-radar-box{
    flex: 1 1 auto;
    min-height:0;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .page-myCases .pulse-mid .pulse-radar-svg{
    width: 92%;
    height: auto;
    max-height: 100%;
  }
}

/* Hide period filters in left tile (keep DOM) */
.page-myCases .pulse-filter{ display:none !important; }

/* Placeholder tile */
.page-myCases .pulse-placeholder-inner{
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  text-align:center;
}
.page-myCases .pulse-placeholder-title{
  font-weight:700;
  font-size:16px;
}


/* === Top 3 squares adjustments vNext === */
@media (min-width: 1024px){
  .pulse-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .pulse-grid-3 > .panel{ aspect-ratio: 1 / 1; }
}

/* Left square: bigger title, one full-width CTA */
.pulse-left .pulse-title{
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.pulse-left .pulse-cta{ display:block; }
.pulse-left .pulse-cta-desktop{ display:grid !important; grid-template-columns: 1fr !important; }

.pulse-left .pulse-cta .btn{ width:100%; }
#ctaUpload, #ctaUploadMobile{ display:none !important; }

/* Right square: equal padding/gaps top/between/bottom */
.pulse-right{ padding: 0 !important; }
.pulse-right .pulse-zone-timeline{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
}
.pulse-right .pulse-zone-item{
  flex: 1 1 0;
  min-height: 0;
}

/* Timeline hint behavior + remove arrows */
.pz-chevron{ display:none !important; }
.pulse-zone-item .pz-hint{ opacity: 0; }
.pulse-zone-item:hover .pz-hint{ opacity: 1; }
.pulse-zone-item.is-active .pz-hint{ opacity: 1; }


/* ===== MyCases layout tweaks (v2026-03-02) ===== */

/* CTA full width in left card */
.page-myCases #ctaAdd{
  width:100% !important;
  display:flex;
  justify-content:center;
}

/* Bigger title in left card */
.page-myCases .pulse-left .pulse-title{
  width:100%;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.01em;
}
@media (min-width: 1024px){
  .page-myCases .pulse-left .pulse-title{ font-size:26px; }
}

/* Right timeline: vertically centered content + stronger calendar rail */
.page-myCases .pulse-right .pulse-zone-item{
  align-items:center; /* center rail + text block */
}

.page-myCases .pulse-right .pz-rail{ align-self:stretch; height:auto; }
.page-myCases .pulse-right .pz-dot{ margin-top:0; }
.page-myCases .pulse-right .pz-body{
  display:flex;
  flex-direction:column;
  justify-content:center; /* center text vertically inside card */
  min-height:64px;
}
.page-myCases .pulse-right .pz-line{
  position:absolute;
  top:12px;
  bottom:0;
  width:2px;
  left:50%;
  transform: translateX(-50%);
  background: var(--stroke-1);
  border-left: none;
}
.page-myCases .pulse-right .pz-chevron{ display:none !important; }

/* Radar: larger inside square + bigger, more contrast corner labels */
.page-myCases .pulse-mid .pulse-radar-box{
  padding:16px; /* match timeline padding */
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-myCases .pulse-mid .pulse-radar-svg{
  width:100%;
  height:auto;
  max-height:100%;
}
.page-myCases .pulse-mid .radar-label{
  font-size:34px !important;
  font-weight:800 !important;
  fill: var(--radar-label);
}


/* vFix: ensure top tiles never visually merge */
@media (min-width:1024px){
  .page-myCases .pulse-grid.pulse-grid-3{ background: transparent; }
  .page-myCases .pulse-grid.pulse-grid-3 > .panel{ margin:0 !important; }
}

@media (min-width:1024px){
  .page-myCases .pulse-mid.panel{ padding:16px !important; }
  .page-myCases .pulse-mid .pulse-radar-box{ padding:0 !important; }
}


/* ===== MyCases: left week block (v5) ===== */
.page-myCases .pulse-week-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.page-myCases .pulse-week-title{
  font-size:12px;
  font-weight:700;
  color: var(--text-2);
}
.page-myCases .pulse-week-range{
  font-size:16px;
  font-weight:800;
  color: var(--text-1);
  line-height:1.2;
}
.page-myCases .pulse-week-day{
  font-size:12px;
  font-weight:600;
  color: var(--text-3);
}
.page-myCases .pulse-week-metric{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin: 6px 0 10px;
}
.page-myCases .pulse-week-metric-x{
  font-size:36px;
  font-weight:900;
  letter-spacing:-0.02em;
  color: var(--text-1);
}
.page-myCases .pulse-week-metric-sep,
.page-myCases .pulse-week-metric-max{
  font-size:20px;
  font-weight:800;
  color: var(--text-3);
}
.page-myCases .pulse-week-phase{
  margin-bottom:10px;
}
.page-myCases .pulse-week-phase-title{
  font-size:14px;
  font-weight:800;
  color: var(--text-1);
  line-height:1.2;
}
.page-myCases .pulse-week-phase-hint{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color: var(--text-3);
  line-height:1.25;
}

/* vFix6: week card — border ONLY around phase + loader */
.page-myCases .pulse-week{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.page-myCases .pulse-week-box{
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  background: var(--surface-1);
}



/* vFix6: delta colors (global) — рост красный, падение зелёный, цвет только у элемента */
.page-myCases .pulse-delta-val{ color: var(--text-1); }
.page-myCases .pulse-delta-item.up   .pulse-delta-icon{ color: #DC2626; }
.page-myCases .pulse-delta-item.down .pulse-delta-icon{ color: #16A34A; }
.page-myCases .pulse-delta-item.neutral .pulse-delta-icon{ color: var(--text-3); }


/* =========================================================
   Journal rebuilt top (from scratch) — match MyCases 1:1
   ========================================================= */
@media (min-width: 1024px){
  .page-journal .pulse-grid.pulse-pagehead-grid{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }

  .page-journal .pulse-pagehead-left,
  .page-journal .pulse-pagehead-right{
    padding: 16px !important;
    border-radius: 18px !important;
    display:flex !important;
    min-height: 0 !important;
    background: var(--surface-1) !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .page-journal .pulse-pagehead-left,
  html[data-theme="light"] .page-journal .pulse-pagehead-right{
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  }

  .page-journal .pulse-pagehead-left{ align-items:center !important; }
  .page-journal .pulse-pagehead-right{ align-items:center !important; justify-content:flex-start !important; }

  .page-journal .pulse-h1{
    margin:0 !important;
    font-size:30px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    letter-spacing:-0.01em !important;
  }

  .page-journal .pulse-grid.pulse-grid-3{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }

  .page-journal .pulse-grid.pulse-grid-3 > .panel{
    background: var(--surface-1) !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 18px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .page-journal .pulse-grid.pulse-grid-3 > .panel{
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  }
}



/* === PATCH v19 (journal top): prevent "giant empty gap" on ~tablet widths ===
   At ~755px the 3-square grid collapses to 1 column, so 3 * aspect-ratio(1/1) cards
   become very tall and push the table far down. In Radar (desktop) it's fine,
   but on Journal this looks like "blank space".
   Fix: keep 3 columns a bit longer + relax aspect-ratio on small screens.
*/
@media (max-width: 860px){
  .page-journal .pulse-grid.pulse-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .page-journal .pulse-grid.pulse-grid-3 > .panel{
    aspect-ratio: auto !important;
    min-height: 220px !important;
  }
}
/* On really small screens stack, but still don't force square height */
@media (max-width: 640px){
  .page-journal .pulse-grid.pulse-grid-3{
    grid-template-columns: 1fr !important;
  }
  .page-journal .pulse-grid.pulse-grid-3 > .panel{
    aspect-ratio: auto !important;
    min-height: 200px !important;
  }
}

/* =========================================================
   Journal: week card + loader dots (match MyCases 1:1)
   ========================================================= */

/* Progress tiles (were injected in myCases JS; make them global for journal too) */
.pulse-progress{ padding-top:2px; }
.pulse-progress-row{ display:flex; gap:8px; align-items:stretch; }
.pulse-progress-group{ flex:1; display:flex; gap:4px; }
.pulse-tile{ flex:1; height:6px; border-radius:6px; background: var(--stroke-2); }
.pulse-tile.filled{ background: var(--primary-600); opacity:0.65; }

/* Week block typography + inside bordered box (copy from .page-myCases rules) */
.page-journal .pulse-week-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.page-journal .pulse-week-title{
  font-size:12px;
  font-weight:700;
  color: var(--text-2);
}
.page-journal .pulse-week-range{
  font-size:16px;
  font-weight:800;
  color: var(--text-1);
  line-height:1.2;
}
.page-journal .pulse-week-day{
  font-size:12px;
  font-weight:600;
  color: var(--text-3);
}
.page-journal .pulse-week-metric{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin: 6px 0 10px;
}
.page-journal .pulse-week-metric-x{
  font-size:36px;
  font-weight:900;
  letter-spacing:-0.02em;
  color: var(--text-1);
}
.page-journal .pulse-week-metric-sep,
.page-journal .pulse-week-metric-max{
  font-size:20px;
  font-weight:800;
  color: var(--text-3);
}
.page-journal .pulse-week-phase{ margin-bottom:10px; }
.page-journal .pulse-week-phase-title{
  font-size:14px;
  font-weight:800;
  color: var(--text-1);
  line-height:1.2;
}
.page-journal .pulse-week-phase-hint{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color: var(--text-3);
  line-height:1.25;
}

/* Border ONLY around phase+loader box (same as myCases vFix6) */
.page-journal .pulse-week{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
}
.page-journal .pulse-week-box{
  margin-top:10px;
  padding:14px;
  border:1px solid var(--stroke-1);
  border-radius:14px;
  background: var(--surface-1);
}


/* =========================================================
   Journal mid square: distribution ("Если перестану включаться")
   ========================================================= */
.page-journal .pulse-mid{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.page-journal .jl-mid{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.page-journal .jl-mid-title{
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(17,24,39,0.60);
  font-weight:700;
  text-align:center;
}
html[data-theme="dark"] .page-journal .jl-mid-title{
  color: rgba(220,228,240,0.70);
}

/* Mid square (If stop) title override: 2 lines, centered, no uppercase */
.page-journal .jl-mid-title.jl-mid-title-ifstop{
  text-transform:none;
  letter-spacing:0.02em;
  font-size:16px;
  line-height:1.25;
  font-weight:800;
  color: var(--text-1);
  margin-top: 2px;
}
html[data-theme="dark"] .page-journal .jl-mid-title.jl-mid-title-ifstop{
  color: rgba(220,228,240,0.92);
}

/* Left labels with colored dot */
.page-journal .jl-dist-label{
  display:flex;
  align-items:center;
  gap: 10px;
}
.page-journal .jl-dist-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
  background: color-mix(in srgb, var(--stroke-2) 70%, transparent);
}
.page-journal .jl-dist-dot[data-tone="ifstop-critical"]{ background: rgba(220,38,38,0.90); }
.page-journal .jl-dist-dot[data-tone="ifstop-conflict"]{ background: rgba(239,68,68,0.90); }
.page-journal .jl-dist-dot[data-tone="ifstop-money"]{ background: rgba(249,115,22,0.90); }
.page-journal .jl-dist-dot[data-tone="ifstop-unpleasant"]{ background: rgba(245,158,11,0.90); }
.page-journal .jl-dist-dot[data-tone="ifstop-self"]{ background: rgba(16,185,129,0.90); }
.page-journal .jl-dist-dot[data-tone="ifstop-unknown"]{ background: rgba(148,163,184,0.95); }
.page-journal .jl-dist-dot[data-tone="ifstop-other"]{ background: rgba(148,163,184,0.95); }

.page-journal .jl-dist-label-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Footer under bars */
.page-journal .jl-mid-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--stroke-2) 70%, transparent);
}
.page-journal .jl-mid-footer-label{
  font-size: 13px;
  color: var(--text-2);
  font-weight: 650;
  margin-bottom: 8px;
}
.page-journal .jl-mid-footer-value{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.page-journal .jl-mid-footer-text{
  font-size: 14px;
  font-weight: 750;
  color: var(--text-1);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-journal .jl-mid-footer-pct{
  margin-left:auto;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-2);
}
.page-journal .jl-dist-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  flex:1 1 auto;
  min-height:0;
}
.page-journal .jl-dist-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  align-items:center;
  min-width:0;
}
.page-journal .jl-dist-label{
  font-size:14px;
  font-weight:650;
  color: var(--text-1);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.jl-dist-right{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.page-journal .jl-dist-pct{
  width: 56px;
  flex: 0 0 56px;
  text-align:right;
  font-size:14px;
  font-weight:800;
  color: var(--text-2);
}
.page-journal .jl-dist-bar{
  flex:1 1 auto;
  min-width:0;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stroke-2) 70%, transparent);
  overflow:hidden;
  position:relative;
}
.page-journal .jl-dist-bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: var(--primary-600);
  opacity: 0.70;
}
.page-journal .jl-dist-row-empty .jl-dist-label{
  color: var(--text-2);
  opacity: 0.85;
}
.page-journal .jl-dist-row-empty .jl-dist-bar > span{
  opacity: 0.45;
}

/* ============================================================
   LEFT SIDEBAR — FINAL (ONLY COMPACT, ICONS ONLY)
   - width 72px
   - offsets match Journal page outer padding (main: 22px)
   - panel look: surface-1 + stroke-1 + radius 20px
   - active: 2px left line + surface-2 + icon darker
   - hover: surface-2 + icon darker
   ============================================================ */

.app{
  grid-template-columns: auto 1fr;
}


/* ===== FINAL: Left sidebar (ONLY compact) ===== */
.app{
  grid-template-columns: auto 1fr;
}

/* Sidebar becomes a standalone panel (like Journal cards) */
.sidebar{
  width: 72px !important;
  margin: 22px 0 22px 22px !important; /* match Journal/.main padding */
  height: calc(100vh - 44px) !important;
  padding: 14px 10px !important;
  border-radius: 20px !important; /* EXACT as Journal panels */
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !important;
  box-shadow: none !important;
  position: sticky;
  top: 22px;
  color: var(--text-1);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden; /* clip hover/active backgrounds inside rounded panel */
  box-sizing: border-box;
}

/* Remove any legacy sidebar decorations */
.sidebar::before,
.sidebar::after{
  display: none !important;
}

/* Brand badge matches the same 48px grid as menu items */
.sidebar .brand{
  width: 100%;
  display: flex !important;
  justify-content: center;
  margin: 0 0 14px 0 !important;
}

.sidebar .brand-badge{
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 700;
  background: var(--surface-2) !important;
  border: 1px solid var(--stroke-1) !important;
  color: var(--text-1) !important;
}

.sidebar .brand-title,
.sidebar .brand-text{
  display: none !important; /* keep only 'R' */
}

/* Main nav (top) */
.nav-main{
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  margin-top: 6px;
  justify-content: flex-start;
  padding: 0;
}

/* Spacer pushes system buttons to the bottom */
.nav-spacer{
  flex: 1 1 auto;
  min-height: 12px;
  width: 100%;
}

/* System controls (bottom) */
.nav-system{
  width: 100%;
  margin-top: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding-bottom: 2px;

  margin-top: auto;
  padding: 0;
}

/* Unified item style (icons only) */
.sidebar .nav-item,
.sidebar .theme-toggle,
.sidebar .nav-logout{
  width: 48px !important;
  height: 48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 0 !important;
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sidebar .nav-ico,
.sidebar .theme-ico,
.sidebar .logout-ico{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .68;
  color: var(--text-1);
  margin: 0;
  padding: 0;
}

.sidebar .nav-ico svg,
.sidebar .theme-ico svg,
.sidebar .logout-ico svg{
  width: 24px;
  height: 24px;
  display:block;
}

/* Hover */
.sidebar .nav-item:hover,
.sidebar .theme-toggle:hover,
.sidebar .nav-logout:hover{
  background: var(--surface-2) !important;
}

.sidebar .nav-item:hover .nav-ico,
.sidebar .theme-toggle:hover .theme-ico,
.sidebar .nav-logout:hover .logout-ico{
  opacity: .95;
}

/* ACTIVE */
.sidebar .nav-item.active{
  background: var(--surface-2) !important;
}

.sidebar .nav-item.active::before{ display:none !important; }

.sidebar .nav-item.active .nav-ico{
  opacity: 1;
}

/* Kill any legacy labels/toggles that may still exist */
.nav-label,
.theme-label,
.sidebar-toggle{
  display:none !important;
}

/* Hide any legacy external logout button if present elsewhere */
#logoutBtn{
  display:none !important;
}

/* No flashy animations */
.nav-item,
.theme-toggle,
.nav-logout{
  transition: none !important;
}


.sidebar .nav-item:focus,
.sidebar .theme-toggle:focus,
.sidebar .nav-logout:focus{
  outline: none !important;
}

/* ===== Dark elevation system (Radar) ===== */
html:not([data-theme="light"]){
  --elev-tint-1: inset 0 1px 0 rgba(255,255,255,.035);
  --elev-tint-2: inset 0 1px 0 rgba(255,255,255,.055);

  /* Ambient hover */
  --hover-surface: rgba(255,255,255,.035);
  --hover-lift: 0 14px 34px rgba(0,0,0,.28);
}

/* ===== Dark surfaces: no borders, depth via tint + shadow ===== */
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .kpi-item,
html:not([data-theme="light"]) .mini,
html:not([data-theme="light"]) .legend-item,
html:not([data-theme="light"]) .login-card,
html:not([data-theme="light"]) .modal,
html:not([data-theme="light"]) #journalPage .journal-left-card,
html:not([data-theme="light"]) #journalPage .journal-right,
html:not([data-theme="light"]) #journalPage .journal-table-card,
html:not([data-theme="light"]) .journal-statusbox{
  border: 0 !important;
  outline: 0; /* does not affect :focus-visible on controls */
  box-shadow: var(--elev-tint-1), var(--shadow) !important;
}

/* Active / selected surfaces: one level above container */
html:not([data-theme="light"]) .tab.active,
html:not([data-theme="light"]) .period-pills .pill.is-active{
  background: var(--panel-2);
  box-shadow: var(--elev-tint-2), 0 16px 40px rgba(0,0,0,.32) !important;
}

/* ===== Hover lift (only large surfaces + week items) ===== */
html:not([data-theme="light"]) .card:hover,
html:not([data-theme="light"]) .panel:hover,
html:not([data-theme="light"]) #journalPage .pulse-week-box:hover,
html:not([data-theme="light"]) .journal-statusbox:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    color-mix(in srgb, var(--panel) 92%, white 8%);
  box-shadow: var(--elev-tint-1), var(--hover-lift) !important;
}

/* ===== MyCases (Radar): disable panel hover lift on top 3 squares ===== */
.page-myCases .pulse-left.panel:hover,
.page-myCases .pulse-mid.panel:hover,
.page-myCases .pulse-right.panel:hover{
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
  transform: none !important;
}

/* ===== Dropdown menu: no border, surface-3 + depth ===== */
html:not([data-theme="light"]) .dd-menu{
  border: 0 !important;
  background: var(--surface-3);
  box-shadow: var(--elev-tint-1), var(--shadow) !important;
}

/* Hairline separators inside dropdown list */
html:not([data-theme="light"]) .dd-menu .dd-item:not(:last-child){
  border-bottom: 1px solid rgba(255,255,255,.045);
}

/* ===== Journal table: quiet structure, no vertical grid ===== */
html:not([data-theme="light"]) #journalPage .journal-table thead th,
html:not([data-theme="light"]) #journalPage .journal-table tbody td{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
}

html:not([data-theme="light"]) #journalPage .journal-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}


/* =========================================================
   Patch: Journal table hover + hairline only bottom + active week boost
   ========================================================= */

/* 1) Disable "lift" hover on the whole journal table container — keep hover only on rows */
html:not([data-theme="light"]) .journal-table-card:hover,
html:not([data-theme="light"]) .journal-table-card.card:hover,
html:not([data-theme="light"]) .journal-table-card.panel:hover{
  background: var(--panel) !important;
  box-shadow: var(--elev-tint-1), var(--shadow) !important;
}

/* same for light */
html[data-theme="light"] .journal-table-card:hover,
html[data-theme="light"] .journal-table-card.card:hover,
html[data-theme="light"] .journal-table-card.panel:hover{
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
  transform: none !important;
  filter: none !important;
}

/* 2) Hairline separators: only bottom, no vertical grid, no outer frame (Journal only) */
html:not([data-theme="light"]) #journalPage .journal-table{
  border: none !important;
}
html:not([data-theme="light"]) #journalPage .journal-table th,
html:not([data-theme="light"]) #journalPage .journal-table td{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
html:not([data-theme="light"]) #journalPage .journal-table tbody tr td{
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
}
html:not([data-theme="light"]) #journalPage .journal-table tbody tr:last-child td{
  border-bottom: none !important;
}

/* 3) Active week (right square): +3–4% brighter without borders */
html:not([data-theme="light"]) .page-journal .pulse-week-box{
  border: none !important;
  background: var(--panel-2) !important;
  box-shadow: var(--elev-tint-1), var(--shadow) !important;
}
html:not([data-theme="light"]) .page-journal .pulse-week-box.is-active,
html:not([data-theme="light"]) .page-journal .pulse-week-box.active,
html:not([data-theme="light"]) .page-journal .pulse-week-box[aria-current="true"],
html:not([data-theme="light"]) .page-journal .pulse-week-box[data-active="true"],
html:not([data-theme="light"]) .page-journal .pulse-week-box[data-selected="true"]{
  background: color-mix(in srgb, var(--panel-2) 96%, white 4%) !important;
}


/* ===== MyCases (Radar page): disable hover lift on the 3 top tiles ===== */
.page-myCases .pulse-left.panel:hover,
.page-myCases .pulse-mid.panel:hover,
.page-myCases .pulse-right.panel:hover{
  transform: none !important;
  filter: none !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}
/* ===== Micro-fixes (sidebar) v1 — pinned bottom + consistent brand badge ===== */

/* Ensure sidebar is a column flex container so nav can stretch */
.sidebar{
  display: flex !important;
  flex-direction: column !important;
}

/* Let nav take remaining height so .nav-spacer can actually push .nav-system down */
.sidebar :is(.nav, nav){
  flex: 1 1 auto !important;
  height: 100% !important;
}

/* (Optional) keep brand badge as a pill in BOTH themes (was visually inconsistent) */
.sidebar :is(.brand-badge, .brand .logo){
  background: var(--sidebar-pill) !important;
  border: 1px solid var(--sidebar-pill-border) !important;
}

/* ===== End micro-fixes (sidebar) ===== */


/* =========================================================
   Journal: Mid square (tab=patterns) — 50/50 vertical split
   ========================================================= */
.page-journal .jl-mid-split{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.page-journal .jl-mid-half{
  flex: 1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.page-journal .jl-mid-half + .jl-mid-half{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke-1, var(--line));
}
.page-journal .jl-mid-half-title{
  font-size: 12px;
  font-weight: 700;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(17,24,39,0.60);
  margin-bottom: 10px;
}
html:not([data-theme="light"]) .page-journal .jl-mid-half-title{
  color: rgba(255,255,255,0.65);
}
.page-journal .jl-dist-list--compact{
  display:flex;
  flex-direction:column;
  gap: 10px;
}


/* =========================
   Journal — Mid Patterns (tab=patterns)
   Enhancements:
   - stable 50/50 split
   - owner/team dot colors
   - inline centered "habit/reaction" line
========================= */
.page-journal #journalMidPatterns{
  height:100%;
}
.page-journal #journalMidPatterns .jl-mid-split{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.page-journal #journalMidPatterns .jl-mid-half{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.page-journal #journalMidPatterns .jl-mid-half .jl-dist-list--compact{
  flex:1 1 auto;
  min-height:0;
}
.page-journal #journalMidPatterns .jl-mid-half .jl-mid-footer{
  margin-top:auto;
}
.page-journal #journalMidPatterns .jl-mid-footer--inline{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:16px;
  padding-top:14px;
}
.page-journal #journalMidPatterns .jl-dist-list[data-pat="owner"] .jl-dist-dot{
  background: rgba(249,115,22,0.90);
}
.page-journal #journalMidPatterns .jl-dist-list[data-pat="team"] .jl-dist-dot{
  background:#8B5CF6;
}



/* =========================================================
   Journal: Patterns mid — Step3 polish (dividers + diamond dots + footer emphasis)
   ========================================================= */

/* Make the MAIN divider (between top/bottom halves) a bit more contrasty */
.page-journal #journalMidPatterns .jl-mid-half + .jl-mid-half{
  border-top-color: color-mix(in srgb, var(--stroke-2, var(--line)) 80%, transparent) !important;
}

/* Make the divider above "Ключевая привычка / Частая реакция" a bit quieter */
.page-journal #journalMidPatterns .jl-mid-footer--inline{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--stroke-2, var(--line)) 55%, transparent);
}

/* Footer typography — match the "Где вы включались чаще всего" rhythm */
.page-journal #journalMidPatterns .jl-mid-footer--inline .jl-mid-footer-label{
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
}
.page-journal #journalMidPatterns .jl-mid-footer--inline .jl-mid-footer-text{
  font-size: 14px;
  font-weight: 900;
  color: var(--text-1);
}

/* Diamond markers for patterns (rotated square) */
.page-journal #journalMidPatterns .jl-dist-list[data-pat] .jl-dist-dot{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  transform: rotate(45deg);
}

/* Keep owner/team colors (as per design) */
.page-journal #journalMidPatterns .jl-dist-list[data-pat="owner"] .jl-dist-dot{ background: rgba(249,115,22,0.90); }
.page-journal #journalMidPatterns .jl-dist-list[data-pat="team"] .jl-dist-dot{ background:#8B5CF6; }






/* =========================================================
   Journal: Patterns mid — FIX layout overlap (v3.2)
   Goal: keep 50/50 split, keep footer visible, no overlap.
   Approach:
   - footer lives in normal flow (no absolute, no auto push)
   - bars list can shrink and, if needed, scroll inside half
   ========================================================= */

/* Ensure halves are real columns */
.page-journal #journalMidPatterns .jl-mid-half{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Bars list takes remaining space and may scroll if the panel is short */
.page-journal #journalMidPatterns .jl-mid-half .jl-dist-list--compact{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto;          /* prevents overlap; footer stays visible */
  padding-bottom: 6px;     /* small breathing room above footer line */
}

/* Footer sits below the list (always visible) */
.page-journal #journalMidPatterns .jl-mid-half .jl-mid-footer{
  margin-top: 10px !important;
  flex: 0 0 auto;
}

/* Do NOT clip halves (clipping hides the footer) */
.page-journal #journalMidPatterns .jl-mid-half{ overflow: visible !important; }


/* =========================================================
   Journal: Patterns mid — Step4 FIX (inline dots + stable 50/50 + centered footer)
   Drop-in overrides that do NOT touch other blocks.
   ========================================================= */

/* 1) Hard-fix 50/50 split */
.page-journal #journalMidPatterns{
  height:100%;
}
.page-journal #journalMidPatterns .jl-mid-split{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.page-journal #journalMidPatterns .jl-mid-half{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Divider between halves: a bit more contrast than inner dividers */
.page-journal #journalMidPatterns .jl-mid-half + .jl-mid-half{
  border-top: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="light"] .page-journal #journalMidPatterns .jl-mid-half + .jl-mid-half{
  border-top-color: rgba(15,23,42,0.08);
}

/* 2) List occupies space, footer stays visible */
.page-journal #journalMidPatterns .jl-dist-list--compact{
  flex:1 1 auto;
  min-height:0;
}

/* 3) Row layout: dot + label ALWAYS on one line */
.page-journal #journalMidPatterns .jl-dist-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.page-journal #journalMidPatterns .jl-dist-left,
.page-journal #journalMidPatterns .jl-dist-label{
  display:flex !important;
  align-items:center !important;
  gap: 12px;
  min-width:0;
  flex: 1 1 auto;
}
.page-journal #journalMidPatterns .jl-dist-label-text,
.page-journal #journalMidPatterns .jl-dist-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-journal #journalMidPatterns .jl-dist-right{
  display:flex;
  align-items:center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Make sure dot never jumps to its own line */
.page-journal #journalMidPatterns .jl-dist-dot{
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;         /* square corners (diamond after rotate) */
  transform: rotate(45deg);   /* diamond */
}

/* Colors per section */
.page-journal #journalMidPatterns .jl-dist-list[data-pat="owner"] .jl-dist-dot{ background: rgba(249,115,22,0.90); }
.page-journal #journalMidPatterns .jl-dist-list[data-pat="team"]  .jl-dist-dot{ background:#8B5CF6; }


/* Stronger central divider between halves (patterns mid) */
.page-journal #journalMidPatterns .jl-mid-half + .jl-mid-half{
  border-top-color: rgba(255,255,255,0.12);
}
html[data-theme="light"] .page-journal #journalMidPatterns .jl-mid-half + .jl-mid-half{
  border-top-color: rgba(15,23,42,0.12);
}

/* 4) Footer ("Ключевая привычка" / "Частая реакция") — centered, non-overlapping, quieter divider */
.page-journal #journalMidPatterns .jl-mid-footer--centerline{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
html[data-theme="light"] .page-journal #journalMidPatterns .jl-mid-footer--centerline{
  border-top-color: rgba(15,23,42,0.06);
}

.page-journal #journalMidPatterns .jl-mid-centerline{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 16px;
  text-align:center;
}

.page-journal #journalMidPatterns .jl-mid-centerline-label{
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
}
.page-journal #journalMidPatterns .jl-mid-centerline-value{
  font-size: 14px;
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

/* Keep section titles stable (if global rules override them) */
.page-journal #journalMidPatterns .jl-mid-half-title{
  font-size: 12px;
  font-weight: 700;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}
html[data-theme="light"] .page-journal #journalMidPatterns .jl-mid-half-title{
  color: rgba(17,24,39,0.60);
}

/* Prevent accidental extra borders inside the list from earlier experiments */
.page-journal #journalMidPatterns .jl-dist-list--compact,
.page-journal #journalMidPatterns .jl-dist-row{
  border: none;
}


/* =========================================================
   Journal: Patterns mid — FINAL (Top-5, bars+%, no footers, strict 50/50)
   Applies only inside #journalMidPatterns
   ========================================================= */

.page-journal #journalMidPatterns .jl-mid-footer{ display:none !important; }

/* Keep strict 50/50 split and avoid content overlap */
.page-journal #journalMidPatterns .jl-mid-split{ height:100% !important; min-height:0 !important; }
.page-journal #journalMidPatterns .jl-mid-half{ flex:1 1 0 !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
.page-journal #journalMidPatterns .jl-mid-half .jl-dist-list--compact{ flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; }

/* Restore row layout to show bars + % (same rhythm as Review) */
.page-journal #journalMidPatterns .jl-dist-row{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  column-gap: 18px !important;
  align-items:center !important;
}

/* Left: diamond + label in one line */
.page-journal #journalMidPatterns .jl-dist-label{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  min-width:0 !important;
}
.page-journal #journalMidPatterns .jl-dist-label-text{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Right: bar + percent */
.page-journal #journalMidPatterns .jl-dist-right{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  min-width:0 !important;
}
.page-journal #journalMidPatterns .jl-dist-bar{ flex: 1 1 auto !important; min-width:0 !important; }

/* Diamonds everywhere in patterns (both halves), keep colors per section */
.page-journal #journalMidPatterns .jl-dist-list[data-pat] .jl-dist-dot{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display:inline-block;
  transform: rotate(45deg);
}
.page-journal #journalMidPatterns .jl-dist-list[data-pat="owner"] .jl-dist-dot{ background: rgba(249,115,22,0.90); }
.page-journal #journalMidPatterns .jl-dist-list[data-pat="team"] .jl-dist-dot{ background:#8B5CF6; }


/* =========================
   Mid square (tab=gap) — "Разрывы и причина"
   Scoped so it DOES NOT affect Review/Patterns bars.
   ========================= */
.page-journal .jl-mid-gap .jl-gap-mark{
  width: 12px;
  height: 12px;
  display: inline-block;
  flex: 0 0 12px;
  margin-right: 10px;
  /* Triangle pointing right */
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  border-radius: 1px;
}

/* 7 fixed colors (strict semantics) */
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="norma"]{ background: #22c55e; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="standart"]{ background: #3b82f6; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="role"]{ background: #a855f7; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="boundary"]{ background: #f97316; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="communication"]{ background: #06b6d4; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="rhythm"]{ background: #eab308; }
.page-journal .jl-mid-gap .jl-gap-mark[data-gap="strategy"]{ background: #ef4444; }



/* ==========================
   Modal (add case) v2
   ========================== */
.modal-backdrop{
  background: rgba(3, 8, 20, .38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal{
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  background: var(--surface-1);
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 28px 72px rgba(0,0,0,.32);
}
.modal-header{
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal-header b{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
}
#caseModalClose.btn.btn-icon{
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#caseModalClose.btn.btn-icon:hover{
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--line-2);
}
.modal-body{
  padding: 18px 20px 16px;
  display:block;
  min-width: 0;
}
.modal-field,
.modal-field.full{
  min-width: 0;
}
.modal-body .full{ grid-column: auto; }
.modal-field + .modal-field{ margin-top: 14px; }
.modal-body label{
  display:block;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-2);
}
.modal-direction{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.modal-direction-option{
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .05s ease;
}
.modal-direction-option:hover{
  background: var(--panel-2);
  border-color: var(--line-2);
}
.modal-direction-option:active{ transform: translateY(1px); }
.modal-direction-option.is-active{
  border-color: var(--primary);
  background: var(--primary-weak);
  color: var(--text);
  box-shadow: none;
}
.modal-direction-option.is-invalid,
.modal-body textarea#m_fact.is-invalid{
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.modal-body textarea#m_fact{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  min-height: 168px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
.modal-body textarea#m_fact::placeholder{ color: var(--muted); }
.modal-body textarea#m_fact:focus{
  outline:none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(58,167,226,.14);
}
.modal-hint{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 1;
  max-width: 640px;
}
.modal-error{
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: #dc2626;
}
.modal-footer{
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background: var(--surface-1);
}
#caseModalSave.btn{
  min-width: 132px;
  justify-content:center;
}
#caseModalSave:disabled{
  opacity: .55;
  cursor: not-allowed;
}
#caseModalSave:disabled:hover{
  background: var(--accent);
  border-color: rgba(76,111,255,.35);
}

.modal[data-direction] .modal-body textarea#m_fact,
.modal-backdrop[data-direction] .modal-body textarea#m_fact{
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

@media (max-width: 760px){
  .modal{
    width: min(100vw - 20px, 100%);
    border-radius: 18px;
  }
  .modal-header,
  .modal-body,
  .modal-footer{
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 560px){
  .modal-direction{ grid-template-columns: 1fr; }
  .modal-body textarea#m_fact{ min-height: 168px; }
}


/* ===== Radar collecting state polish ===== */
.page-myCases .pulse-pagehead-right.is-locked,
.page-myCases .pulse-pagehead-right.is-locked:hover{
  position: relative;
  overflow: hidden;
}
.page-myCases .pulse-pagehead-right.is-locked:hover{
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
  transform: none !important;
  filter: none !important;
}
.page-myCases .pulse-pagehead-right.is-locked .pulse-deltas{
  filter: blur(5px);
  opacity: .34;
  pointer-events: none;
  user-select: none;
}
.page-myCases .pulse-locked-note--exchange{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.page-myCases .pulse-locked-note--exchange .pulse-locked-note-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.page-myCases .pulse-lock-svg--mini{
  width: 20px;
  height: 20px;
}
.page-myCases .pulse-mid.panel.is-locked .pulse-radar-svg{
  filter: blur(4px);
  opacity: .42;
}
.page-myCases .pulse-radar-box{ position: relative; }
.page-myCases .pulse-radar-lock{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 28px;
  pointer-events: none;
}
.page-myCases .pulse-radar-lock-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
}
.page-myCases .pulse-lock-svg--radar{
  width: 27px;
  height: 27px;
}
.page-myCases .pulse-radar-lock-title{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text);
}
.page-myCases .pulse-radar-lock-hint{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-2);
}
.page-myCases .pulse-radar-lock-progress{
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--text);
}
.page-myCases .pulse-zone-item{ position: relative; }
.page-myCases .pulse-zone-item.is-history-locked,
.page-myCases .pulse-zone-item.is-history-locked:hover,
.page-myCases .pulse-zone-item.is-history-locked:active,
.page-myCases .pulse-zone-item.is-history-locked:focus-visible{
  cursor: default;
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.page-myCases .pulse-zone-item.is-history-locked .pz-body,
.page-myCases .pulse-zone-item.is-history-locked .pz-rail{
  filter: blur(4px);
  opacity: .42;
  pointer-events: none;
  user-select: none;
}
.page-myCases .pulse-zone-item.is-history-locked .pz-hint,
.page-myCases .pulse-zone-item.is-history-locked .pz-chevron{
  display: none !important;
}
.page-myCases .pulse-history-lock{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--text-2);
}
.mode-history-locked .page-myCases #ctaAdd{
  animation: collectingCtaPulse 2.15s ease-in-out infinite;
}
@keyframes collectingCtaPulse{
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58,167,226,0); }
  35% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(58,167,226,.16); }
  70% { transform: scale(1); box-shadow: 0 0 0 16px rgba(58,167,226,0); }
}
html[data-theme="light"] .page-myCases .pulse-radar-lock-icon,
html[data-theme="light"] .page-myCases .pulse-locked-note--exchange .pulse-locked-note-icon,
html[data-theme="light"] .page-myCases .pulse-history-lock{
  color: #0B1320;
}
html:not([data-theme="light"]) .page-myCases .pulse-pagehead-right.is-locked:hover{
  background: var(--panel) !important;
}
/* =========================================================
   JOURNAL COLUMN FILTERS — additive block
   append to the END of current styles.css
   ========================================================= */

/* container with tabs + reset chip */
.journal-tabsbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.journal-tabs-inline{
  flex:1 1 auto;
  min-width:0;
}

/* reset all filters chip */
.jt-resetall{
  appearance:none;
  border:1px solid var(--stroke-1, rgba(127,138,160,.18));
  background:var(--surface-2, rgba(120,140,180,.08));
  color:var(--text-1, inherit);
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease;
}
.jt-resetall:hover{
  background:var(--surface-3, rgba(120,140,180,.12));
}
.jt-resetall:active{
  transform:translateY(1px);
}
.jt-resetall:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--primary-weak, rgba(73,133,255,.16));
}
.jt-resetall-label{
  line-height:1;
}
.jt-resetall-x{
  font-size:14px;
  line-height:1;
  opacity:.72;
  transform:translateY(-.5px);
}

/* filterable table headers */
.journal-table th.jt-th-filter{
  padding:0 !important;
}
.journal-table th.jt-th-filter > .jt-th-btn{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-align:left;
  transition:
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}
.journal-table th.jt-th-filter > .jt-th-btn:hover{
  background:var(--surface-2, rgba(120,140,180,.08));
}
.journal-table th.jt-th-filter > .jt-th-btn:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--primary-300, rgba(73,133,255,.34));
}
.journal-table th.jt-th-filter .jt-th-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.journal-table th.jt-th-filter .jt-th-icon{
  flex:0 0 auto;
  font-size:11px;
  line-height:1;
  opacity:.6;
  transform:translateY(1px);
  transition:transform .16s ease, opacity .16s ease, color .16s ease;
}
.journal-table th.jt-th-filter:hover .jt-th-icon{
  opacity:.9;
}
.journal-table th.jt-th-filter.is-active > .jt-th-btn{
  color:var(--primary-600, var(--primary, #3AA7E2));
  background:var(--primary-weak, rgba(58,167,226,.12));
}
.journal-table th.jt-th-filter.is-active .jt-th-icon{
  opacity:1;
  color:var(--primary-600, var(--primary, #3AA7E2));
}

/* filter popover portal */
[data-cf-portal]{
  position:fixed;
  z-index:1200;
}

/* filter menu based on existing dropdown visual language */
.jtf-menu{
  width:min(320px, calc(100vw - 16px));
  min-width:260px;
  max-width:320px;
  max-height:min(420px, calc(100vh - 16px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.jtf-head{
  padding:12px 14px 10px;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  border-bottom:1px solid var(--stroke-1, rgba(127,138,160,.16));
}

.jtf-actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--stroke-1, rgba(127,138,160,.12));
}

.jtf-link{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  font-size:12px;
  font-weight:600;
  color:var(--primary-600, var(--primary, #3AA7E2));
  cursor:pointer;
  transition:opacity .16s ease, color .16s ease;
}
.jtf-link:hover{
  opacity:.82;
}

.jtf-options{
  padding:8px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,160,190,.55) transparent;
}
.jtf-options::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.jtf-options::-webkit-scrollbar-thumb{
  background:rgba(140,160,190,.55);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
.jtf-options::-webkit-scrollbar-track{
  background:transparent;
}

.jtf-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:background-color .16s ease;
}
.jtf-option:hover{
  background:var(--surface-2, rgba(120,140,180,.08));
}
.jtf-option input{
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--primary-600, var(--primary, #3AA7E2));
}
.jtf-option-text{
  min-width:0;
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
}

.jtf-empty{
  padding:10px 12px;
  font-size:13px;
  opacity:.64;
}

.jtf-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid var(--stroke-1, rgba(127,138,160,.12));
}

.jtf-btn{
  appearance:none;
  border:1px solid var(--stroke-1, rgba(127,138,160,.18));
  background:transparent;
  color:var(--text-1, inherit);
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}
.jtf-btn:hover{
  background:var(--surface-2, rgba(120,140,180,.08));
}
.jtf-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--primary-weak, rgba(73,133,255,.16));
}
.jtf-btn-primary{
  background:var(--primary-600, var(--primary, #3AA7E2));
  color:#fff;
  border-color:transparent;
}
.jtf-btn-primary:hover{
  filter:brightness(.96);
}
/* responsive */
@media (max-width: 900px){
  .journal-table th.jt-th-filter > .jt-th-btn{
    padding:9px 10px;
  }

  .jtf-menu{
    min-width:240px;
    max-width:min(300px, calc(100vw - 16px));
  }
}

@media (max-width: 640px){
  .journal-tabsbar{
    align-items:stretch;
  }

  .journal-tabs-inline{
    flex:1 1 100%;
  }

  .jt-resetall{
    width:100%;
    justify-content:center;
  }
}

/* dark theme — additive only
   use broad selectors so block works with existing theme architecture */
html[data-theme="dark"] .jt-resetall,
body[data-theme="dark"] .jt-resetall,
.theme-dark .jt-resetall{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text-1, inherit);
}
html[data-theme="dark"] .jt-resetall:hover,
body[data-theme="dark"] .jt-resetall:hover,
.theme-dark .jt-resetall:hover{
  background:rgba(255,255,255,.08);
}

html[data-theme="dark"] .journal-table th.jt-th-filter > .jt-th-btn:hover,
body[data-theme="dark"] .journal-table th.jt-th-filter > .jt-th-btn:hover,
.theme-dark .journal-table th.jt-th-filter > .jt-th-btn:hover{
  background:rgba(255,255,255,.06);
}

html[data-theme="dark"] .journal-table th.jt-th-filter.is-active > .jt-th-btn,
body[data-theme="dark"] .journal-table th.jt-th-filter.is-active > .jt-th-btn,
.theme-dark .journal-table th.jt-th-filter.is-active > .jt-th-btn{
  color:var(--primary-400, var(--primary, #6EC1FF));
  background:rgba(58,167,226,.18);
}

html[data-theme="dark"] .journal-table th.jt-th-filter.is-active .jt-th-icon,
body[data-theme="dark"] .journal-table th.jt-th-filter.is-active .jt-th-icon,
.theme-dark .journal-table th.jt-th-filter.is-active .jt-th-icon{
  color:var(--primary-400, var(--primary, #6EC1FF));
}

html[data-theme="dark"] .jtf-head,
html[data-theme="dark"] .jtf-actions,
html[data-theme="dark"] .jtf-footer,
body[data-theme="dark"] .jtf-head,
body[data-theme="dark"] .jtf-actions,
body[data-theme="dark"] .jtf-footer,
.theme-dark .jtf-head,
.theme-dark .jtf-actions,
.theme-dark .jtf-footer{
  border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .jtf-option:hover,
body[data-theme="dark"] .jtf-option:hover,
.theme-dark .jtf-option:hover{
  background:rgba(255,255,255,.05);
}

html[data-theme="dark"] .jtf-btn,
body[data-theme="dark"] .jtf-btn,
.theme-dark .jtf-btn{
  border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .jtf-btn:hover,
body[data-theme="dark"] .jtf-btn:hover,
.theme-dark .jtf-btn:hover{
  background:rgba(255,255,255,.06);
}

html[data-theme="dark"] .jtf-btn-primary,
body[data-theme="dark"] .jtf-btn-primary,
.theme-dark .jtf-btn-primary{
  background:var(--primary-500, var(--primary, #3AA7E2));
}

html[data-theme="dark"] .jtf-link,
body[data-theme="dark"] .jtf-link,
.theme-dark .jtf-link{
  color:var(--primary-400, var(--primary, #6EC1FF));
}

html[data-theme="dark"] .jtf-empty,
body[data-theme="dark"] .jtf-empty,
.theme-dark .jtf-empty{
  color:var(--text-2, rgba(255,255,255,.64));
}

html[data-theme="dark"] .jtf-options,
body[data-theme="dark"] .jtf-options,
.theme-dark .jtf-options{
  scrollbar-color:rgba(130,150,180,.45) transparent;
}

html[data-theme="dark"] .jtf-options::-webkit-scrollbar-thumb,
body[data-theme="dark"] .jtf-options::-webkit-scrollbar-thumb,
.theme-dark .jtf-options::-webkit-scrollbar-thumb{
  background:rgba(130,150,180,.45);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
/* ==========================
   Journal → Case SlideOver
   ========================== */

.journal-case-open{
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.journal-case-open:hover{
  background: rgba(58,167,226,.08);
}
.journal-case-open:active{
  background: rgba(58,167,226,.12);
}

.slideover-panel--case{
  background: var(--surface-1);
}

.slideover-case-tabs{
  display:flex;
  gap:8px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background: var(--surface-1);
  overflow-x:auto;
  scrollbar-width:none;
}
.slideover-case-tabs::-webkit-scrollbar{
  display:none;
}

.slideover-case-tab{
  appearance:none;
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.slideover-case-tab:hover{
  background: var(--panel-2);
  border-color: var(--line-2);
  color: var(--text);
}
.slideover-case-tab.is-active{
  background: rgba(58,167,226,.14);
  border-color: rgba(58,167,226,.35);
  color: var(--text);
}

.slideover-case-content{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:16px 18px 20px;
  background: var(--surface-1);
}

.slideover-case-section + .slideover-case-section{
  margin-top:16px;
}

.slideover-case-section-title{
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  color: var(--text);
  margin-bottom:10px;
}

.slideover-case-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.slideover-case-grid--single{
  margin-top:10px;
}

.slideover-case-field{
  border:1px solid var(--line);
  background: var(--surface-2);
  border-radius:14px;
  padding:12px 13px;
}

.slideover-case-label{
  font-size:11px;
  line-height:1.35;
  color: var(--muted);
  margin-bottom:6px;
}

.slideover-case-value{
  font-size:14px;
  line-height:1.42;
  color: var(--text);
  white-space:pre-wrap;
  word-break:break-word;
}

.slideover-case-empty{
  border:1px dashed var(--line);
  background: var(--surface-2);
  border-radius:14px;
  padding:14px;
  font-size:13px;
  line-height:1.5;
  color: var(--text-2);
}

@media (max-width: 640px){
  .slideover-case-tabs{
    padding:10px 14px;
  }
  .slideover-case-content{
    padding:14px;
  }
}