/* /css/cabinet.css — production (старий вигляд + cabinet.js)
   Purpose: cabinet-only styles & overrides (no duplicates)
*/

/* 1) Headings */
.cab-heading{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #1B5E5E;
}

.cab-heading--block{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cab-heading-title{
  flex: 1 1 auto;
}

.cab-heading--inner{
  display: block;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.1px;
  color: #1B5E5E;
  opacity: .92;
  margin-top: 2px;
  margin-bottom: 8px;
}

.history-subtitle{
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  opacity: .9;
}

/* 2) Section tweak (cabinet first section without top border) */
.section:first-of-type{
  border-top: 0;
  padding-top: 0;
}

/* 3) Buttons (legacy cabinet buttons) */
.btn{
  border: 0;
  background: transparent;
  font: inherit;
}

.btn.btn-start{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,166,136,.35);
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0,166,136,.22);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn.btn-start:hover{
  background: var(--primary-dark);
  transform: translateY(-0.5px);
  box-shadow: 0 8px 18px rgba(0,128,106,.28);
}

.btn.btn-stop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.28);
  background: #E8584B;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.btn.btn-stop:hover{
  background: #E8584B;
  transform: translateY(-0.5px);
}

.btn.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.50);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(15,23,42,.03);
  cursor: pointer;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
  white-space: nowrap;
}
.btn.btn-ghost:hover{
  background: #f4fbfb;
  border-color: rgba(0,166,136,.40);
  box-shadow: 0 3px 9px rgba(15,23,42,.06);
  transform: translateY(-0.5px);
}

/* 4) Layout / topbar inside cards */
.dash-topbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 5) Dashboard grid (you intentionally keep 1-column even on desktop) */
.dash-grid{
  display: grid;
  gap: 12px;
  margin-top: 12px;
  grid-template-columns: 1fr;
}

/* 6) Timer card */
.timer-card{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(135deg, #f0fdf9 0%, #e3f7f2 45%, #f6fffd 100%);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.timer-head{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.timer-title{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.timer-sub{
  font-size: 12px;
  color: var(--muted);
}

.timer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px){
  .timer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tbox{
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.22);
  padding: 10px;
  text-align: center;
}

.tvalue{
  font-size: 22px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.3px;
}

.tlabel{
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Control panel buttons row */
.control-panel{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: stretch;
  width: 100%;
}
.control-panel .btn{
  flex: 1 1 auto;
  width: 100%;
}

/* 7) Status pill */
.status-pill{
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 800;
  background: #fff;
  border: 1px solid rgba(148,163,184,.45);
  color: var(--primary-dark);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.status-pill.off{
  background: #f3f4f6;
  color: #6b7280;
  border-color: rgba(148,163,184,.35);
  box-shadow: none;
}

/* 8) User mini (right block) */
.user-mini{
  display: grid;
  gap: 4px;
  text-align: right;
}

#userName{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.user-mini > span{
  margin-top: 1px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

#userId{
  margin-left: auto;
  font-weight: 700;
  color: #334155;
  text-align: right;
}

@media (max-width: 720px){
  .user-mini{ text-align: left; width: 100%; }
}

/* 9) Stop guard */
.stop-guard{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.22);
  display: grid;
  gap: 6px;
}

.stop-guard-label{
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 4px;
}

.stop-guard-input{
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.70);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.stop-guard-input:focus{
  border-color: rgba(0,166,136,.55);
  box-shadow: 0 0 0 4px rgba(0,166,136,.12);
}

.stop-guard-hint{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.inline-error{
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.45;
  margin-top: 2px;
}

/* 10) My card (meta + actions) */
dl.meta{
  margin: 0;
  padding: 10px;
  background: rgba(244,251,251,.9);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.meta-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.meta-row dt{ margin: 0; color: #64748b; }
.meta-row dd{ margin: 0; font-weight: 900; color: #0f172a; }

.side-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 8px;
}
.side-actions .btn{ min-width: 140px; }

@media (max-width: 720px){
  .side-actions{ justify-content: stretch; }
  .side-actions .btn{ width: 100%; min-width: 0; }
}

/* 11) Check-in block */
.checkin-desc{
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 520px;
}

.checkin-timer-main{
  border-radius: 10px;
  border: 1px dashed rgba(148,163,184,.35);
  background: rgba(248,250,252,.95);
  padding: 8px 10px;
}

.checkin-timer-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checkin-timer-time{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

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

.checkin-btn-main{ 
  width: 100%;
 }

.checkin-side{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.35);
  background: #f9fafb;
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.checkin-metrics{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkin-metric{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.checkin-metric-label{ font-size: 11px; color: var(--muted); }
.checkin-metric-value{ font-weight: 900; color: #0f172a; text-align: right; }
#checkinDay{ white-space: pre; }

.checkin-instruction{ margin-top: 10px; }

.checkin-instruction-toggle{
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.checkin-instruction-body{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
  display: none;
}
.checkin-instruction-body p{ margin: 0 0 6px; }
.checkin-instruction-body p:last-child{ margin-bottom: 0; }
.checkin-instruction-body.open{ display: block; }

.hint-arrow{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #334155;
  border-bottom: 1.5px solid #334155;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.checkin-instruction-toggle.active .hint-arrow{
  transform: rotate(-135deg);
}

.checkin-foot{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
}

.checkin-note{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* 12) Hidden compatibility */
[hidden]{ display:none !important; }
.hidden{ display:none !important; }

/* -----------------------------------------
   BETOFF — Public Card / Create Form
------------------------------------------ */

.card.card-public-form{
  padding: 16px;
  display: grid;
  gap: 18px;
}

@media (min-width: 860px){
  .card.card-public-form{
    padding: 18px 18px 20px;
  }
}

.card-public-form h1{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.card-public-form .intro{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 720px;
}

.card-public-form .mini-note{
  font-size: 12px;
  color: var(--muted);
}

/* --- Розділи форми --- */

.card-public-form .section{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.18);
  display: grid;
  gap: 10px;
}

.card-public-form .section-title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--text);
}

/* --- Поля вводу --- */

.card-public-form .field{
  display: grid;
  gap: 6px;
}

.card-public-form .field label{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.card-public-form .field .hint{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.card-public-form input,
.card-public-form select,
.card-public-form textarea{
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.70);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition:
    border-color .18s ease-out,
    box-shadow .18s ease-out;
}

.card-public-form input:focus,
.card-public-form select:focus,
.card-public-form textarea:focus{
  border-color: rgba(0,166,136,.55);
  box-shadow: 0 0 0 4px rgba(0,166,136,.12);
}

.card-public-form textarea{
  resize: vertical;
  min-height: 80px;
}

/* --- Chips --- */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  padding: 8px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(148,163,184,.45);
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    color .18s ease-out;
}

.chip input{
  display:none;
}

.chip.active{
  background: rgba(0,166,136,.10);
  border-color: rgba(0,166,136,.45);
  color: var(--primary-dark);
  font-weight: 700;
}

/* --- Buttons --- */

.card-public-form .actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.card-public-form .btn{
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Primary */
.card-public-form .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:14px;
  border:1px solid rgba(0,166,136,.35);
  background: var(--primary);
  color:#fff;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0,166,136,.22);
  white-space: nowrap;
  transition:
    background .18s ease-out,
    transform .18s ease-out,
    box-shadow .18s ease-out;
}

.card-public-form .btn-primary:hover{
  background: var(--primary-dark);
  transform: translateY(-0.5px);
  box-shadow: 0 8px 18px rgba(0,128,106,.28);
}

/* Ghost */
.card-public-form .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.50);
  background:#fff;
  color: var(--primary-dark);
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(15,23,42,.03);
  white-space: nowrap;
  transition:
    background .18s ease-out,
    transform .18s ease-out,
    box-shadow .18s ease-out,
    border-color .18s ease-out;
}

.card-public-form .btn-ghost:hover{
  background:#f4fbfb;
  border-color: rgba(0,166,136,.40);
  box-shadow: 0 3px 9px rgba(15,23,42,.06);
  transform: translateY(-0.5px);
}

/* ===== ПУБЛІЧНА КАРТКА: СТОРІНКА СТВОРЕННЯ ===== */

/* Інтро-текст під заголовком */
.card-public-intro {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: -25px;
  margin-top: -20px;
}

/* Шапка картки */
.cab-heading-title--public {
  color: #14313E;
}

.status-pill--public-id {
  font-weight: 500;
  background-color: #fff;
}

/* Заголовки секцій */
.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.section-header-bar {
  width: 3px;
  height: 12px;
  background: #00A688CC;
  border-radius: 0;
}

.section-header-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Пояснювальний текст під заголовком секції */
.section-helper-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 5px;
}

/* Лейбли полів */
.field-label-strong {
  font-weight: 500;
}

.field-label-stronger {
  font-weight: 600;
}

/* Лейбл з додатковим верхнім відступом */
.field-label--with-top-margin {
  margin-top: 5px;
}


/* -----------------------------------------
   CABINET — HISTORY (new timeline) — Mono (small grey dots)
   Тільки маленькі акуратні сірі кружочки, без кольорів
------------------------------------------ */

#history .cab-heading--history{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* inner frame */
#history .history-frame{
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  padding: 14px 12px 12px;
  overflow: visible;
}

/* date header */
#history .hist-date{
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

#history .hist-date-dm{
  font-weight: 900;
  color: #1f2a30;
}

#history .hist-date-y{
  margin-left: 8px;
  font-weight: 500;
  color: #9aa5ad;
}

/* separator under date */
#history .hist-sep{
  height: 1px;
  background: rgba(148,163,184,.18);
  margin: 10px -12px 4px;
}

/* timeline rail */
#history .hist-timeline{
  position: relative;
  padding-left: 46px;
}

#history .hist-timeline::before{
  content: '';
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(15,23,42,.08);
  border-radius: 4px;
}

/* item */
#history .hist-item{
  position: relative;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148,163,184,.14);
}

#history .hist-item:last-child{
  border-bottom: none;
}

/* marker — small grey dot */
#history .hist-marker{
  position: absolute;
  left: -32px;
  top: 12px;

  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: #fff;
  border: 1.5px solid rgba(15,23,42,.18);

  /* keeps rail from touching the dot */
  box-shadow: 0 0 0 3px #fff;
}

#history .hist-marker::after{
  display: none;
}

/* ensure no colored overrides */
#history .hist-item--start .hist-marker,
#history .hist-item--stop .hist-marker,
#history .hist-item--neutral .hist-marker{
  background: #fff;
  border-color: rgba(15,23,42,.18);
}

/* content */
#history .hist-content{
  display: grid;
  gap: 2px;
}

/* history note under timeline */
#history .history-note{
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#history .hist-title{
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: #111827;
}

#history .hist-time{
  margin: 0;
  font-size: 12px;
  color: rgba(17,24,39,.55);
  line-height: 1.35;
}

/* show more button */
#history .hist-more-wrap{
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

#history .hist-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 12px 18px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15,23,42,.03);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

#history .hist-more:hover{
  background: #f4fbfb;
  border-color: rgba(0,166,136,.35);
  box-shadow: 0 3px 9px rgba(15,23,42,.06);
  transform: translateY(-0.5px);
}

/* empty state */
#history .history-empty{
  padding: 8px 2px;
  display: grid;
  gap: 6px;
}

/* small screens tweaks */
@media (max-width: 720px){
  #history .hist-date{ font-size: 16px; }
  #history .hist-title{ font-size: 13.5px; }
}



/* -----------------------------------------
   CABINET — MY CARD (meta list + copy)
------------------------------------------ */

.meta{
  margin: 14px 0 10px;
  padding: 0;
}

/* One meta row: label + value */
.meta-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}

/* Divider */
.meta-row::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(15, 23, 42, .08);
}

.meta-row:last-child::after{
  display: none;
}

/* Label (dt) */
.meta dt{
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
color: rgba(17, 24, 39, .65);
}

/* Value (dd) */
.meta dd{
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 650;
  color: rgba(17, 24, 39, .92);
  white-space: nowrap;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Copy button that looks like text */
.copy-field{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font: inherit;
  color: inherit;

  border: 0;
  background: transparent;
  cursor: pointer;

  padding: 2px 4px;
  margin: -2px -4px; /* bigger hit area without layout shift */

  border-radius: 8px;
  transition: background-color .15s ease, opacity .15s ease, box-shadow .15s ease;
}

/* Copy icon */
.ico-copy{
  width: 16px;
  height: 16px;
  display: block;
  overflow: visible;
  flex: 0 0 auto;
  color: currentColor;
  opacity: .70;
  transition: opacity .15s ease;
}

.copy-field:hover{
  background: rgba(15, 23, 42, .04);
}

.copy-field:hover .ico-copy{
  opacity: .85;
}

.copy-field:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, .10);
}

/* Optional: "copied" feedback (your JS toggles .copied) */
.copy-field.copied{
  background: rgba(15, 23, 42, .06);
}
.copy-field.copied .ico-copy{
  opacity: 1;
}


/* -----------------------------------------
   CABINET — CHECKIN METRICS (strict like meta card)
------------------------------------------ */

.checkin-metrics{
  display: grid;
  gap: 0; /* рядки самі мають padding */
}

.checkin-metric{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 0;
  position: relative;
  align-items: center;
}

.checkin-metric::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(15, 23, 42, .08);
}

.checkin-metric:last-child::after{
  display: none;
}

.checkin-metric-label{
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
color: rgba(17, 24, 39, .65);
}

.checkin-metric-value{
  font-size: 13px;
  line-height: 1.25;
  font-weight: 650;
  color: rgba(17, 24, 39, .92);
  white-space: nowrap;
  text-align: right;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}


/* -----------------------------------------
   CHECKIN — Help text formatting
------------------------------------------ */

.checkin-instruction-body{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(17, 24, 39, .78);
}

/* менші відступи між абзацами */
.checkin-instruction-body p{
  margin: 0 0 8px;
}
.checkin-instruction-body p:last-child{
  margin-bottom: 0;
}

/* ul — менший лівий відступ, менші вертикальні відступи */
.checkin-instruction-body ul{
  margin: 4px 0 10px;
  padding-left: 16px; /* було “здорове” — робимо компактно */
}

/* li — компактніше */
.checkin-instruction-body li{
  margin: 2px 0;
}

/* заголовки в strong — менш жирні, більш “серйозні” */
.checkin-instruction-body strong{
  font-weight: 500;              /* було 700/900 в дефолті */
  color: rgba(17, 24, 39, .88);  /* трохи темніше за основний текст */
}

/* em (X/90, 0/3) — без зайвого курсиву, якщо хочеш більш “UI-like” */
.checkin-instruction-body em{
  font-style: normal;
  font-weight: 500;
}


/* Hint: icon aligned to first line (works for multi-line text) */
.hint{
  display: flex;
  align-items: flex-start;  /* НЕ center */
  gap: 4px;

  font-size: 12px;
  line-height: 18px;
  color: rgba(17,24,39,.65);

  overflow-wrap: anywhere;
}

.hint__icon{
  flex: 0 0 auto;

  font-size: 13px;
  line-height: 18px;        /* той самий line-height що й у тексту */
  color: #00A688;

  /* оптичне вирівнювання під baseline першого рядка */
  margin-top: 0;
}

.hint__text{
  flex: 1 1 auto;
  min-width: 0;
}

/* DESKTOP: email зліва, ID справа (в межах топбара/картки) */
.dash-topbar{
  width: 100%;
}

.user-mini{
  width: 100%;        /* ключове: як на мобілці, але тепер завжди */
  flex: 1 1 100%;     /* щоб у flex-контейнері займало всю ширину */
}

/* другий рядок (там де email + #userId) */
.user-mini > span{
  width: 100%;
  display: flex;
  justify-content: space-between; /* email ліворуч, ID праворуч */
  gap: 12px;
}

/* більше не потрібно штовхати auto-margin’ом */
#userId{
  margin-left: 0;
  flex: 0 0 auto;
  text-align: right;
}
.user-mini > span{
  min-width: 0;
}
.user-mini > span{
  overflow-wrap: anywhere;
}

/* MYCARD: keep label + value on one row, allow value to wrap if needed */
#mycard .meta-row{
  grid-template-columns: max-content minmax(0, 1fr); /* ключ: права колонка може стискатися */
  align-items: start;
}

#mycard .meta dt{
  white-space: nowrap; /* лейбл не рвемо */
}

/* Default dd in cabinet.css is flex + nowrap; for name we allow wrapping */
#mycard #cardName{
  display: block;           /* прибирає flex-поведінку саме для імені */
  white-space: normal;      /* дозволити перенос */
  overflow-wrap: anywhere;  /* рятує навіть "WWWW..." */
  word-break: break-word;   /* fallback */
  text-align: right;        /* як було: значення справа */
}


/* ============================
   CARD-CREATE: overflow guard
   ============================ */

/* Section header titles: wrap even for long unbroken strings */
.card-public-form .section-header{
  flex-wrap: wrap;
  overflow: visible;
}

.card-public-form .section-header-title{
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Long helper/hint/intro texts */
.card-public-form .section-helper-text,
.card-public-form .hint,
.card-public-form .lead{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Inputs never expand container */
.card-public-form input,
.card-public-form select,
.card-public-form textarea{
  width: 100%;
  max-width: 100%;
}


/* -----------------------------------------
   CABINET — HISTORY: per-event comments (match timeline UI)
------------------------------------------ */
#history .hist-ev-comment{
  margin-top: 8px;
  padding-left: 0;          /* не зсуваємо контент */
}

/* comment text looks like secondary note */
#history .hist-ev-comment__text{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(17,24,39,.72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* actions */
#history .hist-ev-comment__actions{
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* open/edit/delete as subtle links */
#history .hist-ev-comment .linklike{
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(17,24,39,.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
#history .hist-ev-comment .linklike:hover{
  color: rgba(17,24,39,.9);
  opacity: 1;
}

/* form wrapper */
#history .hist-ev-comment__form{
  margin-top: 8px;
}

/* textarea in same style as your inputs */
#history .hist-ev-comment__ta{
  width: 100%;
  resize: vertical;
  min-height: 76px;
  max-height: 240px;

  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.70);
  padding: 12px 14px;

  font-size: 13px;
  line-height: 1.45;
  outline: none;
  background: #fff;
  color: rgba(17,24,39,.92);

  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
#history .hist-ev-comment__ta:focus{
  border-color: rgba(0,166,136,.55);
  box-shadow: 0 0 0 4px rgba(0,166,136,.12);
}

/* actions row: align like other UI buttons */
#history .hist-ev-comment__formActions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Buttons inside history comment form:
   your base .btn is "reset", so we define look locally */
#history .hist-ev-comment__formActions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.50);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,.03);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

#history .hist-ev-comment__formActions .btn:hover{
  background: #f4fbfb;
  border-color: rgba(0,166,136,.35);
  box-shadow: 0 3px 9px rgba(15,23,42,.06);
  transform: translateY(-0.5px);
}

/* primary button */
#history .hist-ev-comment__formActions .btn.btn-primary{
  border-color: rgba(0,166,136,.35);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,166,136,.22);
}
#history .hist-ev-comment__formActions .btn.btn-primary:hover{
  background: var(--primary-dark);
  box-shadow: 0 8px 18px rgba(0,128,106,.28);
}

/* message */
#history .hist-ev-comment__msg{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(17,24,39,.65);
}

/* Small screens */
@media (max-width: 520px){
  #history .hist-ev-comment__actions{ gap: 12px; }
  #history .hist-ev-comment__formActions .btn{ width: 100%; }
}