/* ─────────────────────────────────────────────────────────────────────────────
   my_surveys.css — Phase 5A: Мои замеры (Surveyor Dashboard)
   Mobile-first, touch-friendly (min tap target 44px).
   Follows existing portal.css CSS custom property tokens.
───────────────────────────────────────────────────────────────────────────── */

/* ── Full-height layout (class content-area--surveys from router.js) ───────── */

.content-area.content-area--surveys,
.content-area:has(#my-surveys-view.active) {
  position: relative;
  padding: 0 !important;
  overflow: visible !important;
  min-height: 0;
  display: block !important;
}

.content-area.content-area--surveys #my-surveys-view.view-section.active,
.content-area:has(#my-surveys-view.active) #my-surveys-view.view-section.active {
  position: relative;
  display: flex !important;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
}

.content-area.content-area--surveys .ms-root,
.content-area:has(#my-surveys-view.active) .ms-root {
  flex: 1 1 0;
  min-height: 0;
  height: auto !important;
  max-height: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* ── Root wrapper (default / other tabs) ───────────────────────────────────── */

.ms-root {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--bg);
  color:          var(--text);
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */

.ms-filterbar {
  position:   sticky;
  top:        0;
  z-index:    10;
  background: var(--card-bg, var(--bg));
  border-bottom: 1px solid var(--border);
  padding:    10px 12px 8px;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}

/* Surveyor tab: filter bar pinned at top of panel, not inside outer scroll */
.content-area.content-area--surveys .ms-root > .ms-filterbar,
.content-area:has(#my-surveys-view.active) .ms-root > .ms-filterbar {
  position: relative !important;
  top: auto !important;
  flex-shrink: 0;
  margin: 0;
  background: var(--card-bg, var(--surface, #fff));
}

/* Segment control */
.ms-seg {
  display:        flex;
  gap:            4px;
  background:     var(--input-bg, var(--bg-secondary, #f0f0f0));
  border-radius:  8px;
  padding:        3px;
}

.ms-seg-btn {
  flex:           1;
  padding:        8px 0;
  border:         none;
  border-radius:  6px;
  background:     transparent;
  color:          var(--muted);
  font-size:      14px;
  font-weight:    600;
  cursor:         pointer;
  transition:     background .15s, color .15s;
  min-height:     36px;
}

.ms-seg-btn--active {
  background: var(--accent);
  color:      #fff;
}

/* Filters row */
.ms-filters {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  align-items: center;
}

.ms-search-input {
  flex:        1 1 160px;
  min-width:   120px;
  padding:     8px 10px;
  border:      1px solid var(--border);
  border-radius: 6px;
  background:  var(--input-bg, var(--bg));
  color:       var(--text);
  font-size:   14px;
}
.ms-search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.ms-date-range {
  display:     flex;
  gap:         4px;
  align-items: center;
}

.ms-filter-from,
.ms-filter-to {
  padding:        6px 8px;
  border:         1px solid var(--border);
  border-radius:  6px;
  background:     var(--input-bg, var(--bg));
  color:          var(--text);
  font-size:      13px;
  width:          130px;
}

.ms-date-sep {
  color:     var(--muted);
  font-size: 12px;
}

.ms-clear-filters {
  padding:        7px 8px;
  border:         1px solid var(--border);
  border-radius:  6px;
  background:     transparent;
  color:          var(--muted);
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background .15s;
  min-width:      36px;
  min-height:     36px;
}
.ms-clear-filters:hover { background: var(--bg-secondary, #f5f5f5); }

/* ── Card list ─────────────────────────────────────────────────────────────── */

.ms-list {
  flex:       none;
  overflow:   visible;
  padding:    8px 12px 80px;
}

.content-area.content-area--surveys .ms-root > .ms-list,
.content-area:has(#my-surveys-view.active) .ms-root > .ms-list {
  flex: none;
  min-height: 0;
  overflow: visible;
  padding: 0 12px 80px;
}

/* ── Group ─────────────────────────────────────────────────────────────────── */

.ms-group {
  margin-bottom: 8px;
}

.ms-group-header {
  display:      flex;
  align-items:  center;
  gap:          8px;
  padding:      10px 12px;
  background:   var(--card-bg, #fff);
  border:       1px solid var(--border);
  border-radius: 8px;
  cursor:       pointer;
  user-select:  none;
  font-size:    14px;
  font-weight:  700;
  color:        var(--text);
  min-height:   44px;
}
.ms-group-header:hover { background: var(--bg-secondary, #f7f7f7); }

.ms-group-title {
  flex: 1;
}

.ms-group-count {
  background: var(--accent);
  color:      #fff;
  border-radius: 12px;
  padding:    2px 8px;
  font-size:  12px;
  font-weight: 700;
  min-width:  24px;
  text-align: center;
}

.ms-group-chevron {
  color: var(--muted);
  flex-shrink: 0;
}

.ms-group-body {
  margin-top: 4px;
  display:    flex;
  flex-direction: column;
  gap:        4px;
  overflow:   hidden;
  max-height: 9999px;
  transition: max-height .2s ease;
}

.ms-group-body--collapsed {
  max-height: 0;
  overflow:   hidden;
  margin-top: 0;
}

/* ── Deal card (snippet) ───────────────────────────────────────────────────── */

.ms-card {
  display:       grid;
  grid-template-rows: auto auto auto auto;
  gap:           4px;
  padding:       12px 14px;
  background:    var(--card-bg, #fff);
  border:        1px solid var(--border);
  border-radius: 8px;
  cursor:        pointer;
  transition:    box-shadow .12s, background .12s;
  min-height:    88px;
}

.ms-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  background: var(--card-hover-bg, var(--bg-secondary, #fafafa));
}

.ms-card:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ms-card-header {
  display:     flex;
  justify-content: space-between;
  align-items: center;
  font-size:   12px;
  color:       var(--muted);
}

.ms-card-id {
  font-family:  monospace;
  font-size:    12px;
  color:        var(--muted);
}

.ms-card-date {
  font-weight: 600;
  color:       var(--accent);
}

.ms-card-name {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text);
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-card-phone {
  font-size:   13px;
  color:       var(--muted);
}

.ms-card-address {
  font-size:   13px;
  color:       var(--muted);
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-card-status {
  font-size:     11px;
  color:         var(--accent);
  margin-top:    4px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  font-weight:   500;
  opacity:       0.8;
}

.ms-empty-hint {
  font-size:  12px;
  color:      var(--muted);
  margin-top: 8px;
}

/* ── Loading / empty / error states ────────────────────────────────────────── */

.ms-loading {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            12px;
  padding:        60px 0;
  color:          var(--muted);
  font-size:      14px;
}

.ms-spinner {
  width:         28px;
  height:        28px;
  border:        3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     ms-spin .7s linear infinite;
}

@keyframes ms-spin { to { transform: rotate(360deg); } }

.ms-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        60px 20px;
  color:          var(--muted);
  font-size:      14px;
  gap:            12px;
}

.ms-empty-icon {
  font-size: 40px;
}

.ms-error {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     20px;
  background:  var(--error-bg, #fff5f5);
  color:       var(--error, #c0392b);
  border:      1px solid var(--error-border, #f8c6c6);
  border-radius: 8px;
  font-size:   14px;
  margin:      12px 0;
}

/* ── Detail modal ──────────────────────────────────────────────────────────── */

.ms-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         200;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}

.ms-modal {
  width:           100%;
  max-width:       600px;
  max-height:      92dvh;
  background:      var(--bg);
  border-radius:   16px 16px 0 0;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
}

@media (min-width: 600px) {
  .ms-modal-overlay {
    align-items: center;
  }
  .ms-modal {
    border-radius: 16px;
    max-height:    85dvh;
  }
}

.ms-modal-header {
  padding:      12px 16px 0;
  flex-shrink:  0;
}

.ms-back-btn {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--accent);
  font-size:   15px;
  font-weight: 600;
  padding:     8px 0;
  min-height:  44px;
}
.ms-back-btn:hover { opacity: .7; }

.ms-detail-body {
  flex:       1;
  overflow-y: auto;
  padding:    8px 16px 32px;
}

/* ── Detail sections ───────────────────────────────────────────────────────── */

.ms-detail-section {
  padding:       14px 0;
  border-bottom: 1px solid var(--border);
}
.ms-detail-section:last-child { border-bottom: none; }

.ms-detail-section-title {
  font-size:    11px;
  font-weight:  700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:        var(--muted);
  margin:       0 0 10px;
}

.ms-detail-id-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.ms-copy-id {
  display:     flex;
  align-items: center;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--text);
  font-family: monospace;
  font-size:   16px;
  font-weight: 700;
  padding:     8px 10px;
  border-radius: 6px;
  transition:  background .12s;
  min-height:  44px;
}
.ms-copy-id:hover { background: var(--bg-secondary, #f5f5f5); }

.ms-status-badge {
  padding:       4px 10px;
  background:    var(--accent-muted, rgba(var(--accent-rgb,59,130,246),.12));
  color:         var(--accent);
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
}

.ms-detail-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 0;
  font-size:   15px;
  min-height:  44px;
  text-decoration: none;
  color:       var(--text);
}

.ms-detail-label {
  color:       var(--muted);
  font-size:   13px;
  min-width:   140px;
  flex-shrink: 0;
}

.ms-detail-name {
  font-size:   17px;
  font-weight: 600;
  min-height:  auto;
  padding-top: 0;
}

.ms-detail-phone {
  color:       var(--accent);
  font-weight: 600;
}

.ms-detail-address {
  color:       var(--text);
}

.ms-detail-manager {
  background:  var(--card-bg, #fff);
  border:      1px solid var(--border);
  border-radius: 10px;
  padding:     12px 14px !important;
  margin:      8px 0;
}

.ms-detail-meta .ms-detail-row {
  font-size: 13px;
}

.ms-muted {
  color: var(--muted);
}

/* ── Toast notification ────────────────────────────────────────────────────── */

.ms-toast {
  position:    fixed;
  bottom:      20px;
  left:        50%;
  transform:   translateX(-50%) translateY(20px);
  background:  var(--text);
  color:       var(--bg);
  padding:     10px 20px;
  border-radius: 20px;
  font-size:   14px;
  font-weight: 500;
  pointer-events: none;
  opacity:     0;
  transition:  opacity .2s, transform .2s;
  z-index:     999;
  white-space: normal;
  max-width:   90vw;
  text-align:  center;
}

.ms-toast--show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ══ Phase 5B: Action buttons ══════════════════════════════════════════════ */

.ms-actions-block {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding-top:    4px;
}

/* Base action button */
.ms-action-btn {
  display:          block;
  width:            100%;
  min-height:       44px;
  padding:          10px 16px;
  border:           none;
  border-radius:    8px;
  font-size:        15px;
  font-weight:      500;
  cursor:           pointer;
  text-align:       center;
  background:       var(--card-bg, #f2f2f7);
  color:            var(--text);
  transition:       background .15s, opacity .15s;
  position:         relative;
}
.ms-action-btn:disabled {
  opacity: .5;
  cursor:  not-allowed;
}
.ms-action-btn:not(:disabled):hover {
  filter: brightness(.95);
}

/* Primary variant (schedule_survey) */
.ms-action-btn--primary {
  background: var(--accent, #007aff);
  color:      #fff;
}

/* Danger variant (cancel_survey) */
.ms-action-btn--danger {
  background: var(--error, #c0392b);
  color:      #fff;
}

.ms-action-btn--link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  text-decoration: none;
  background:      transparent;
  border:          1.5px solid var(--border);
  color:           var(--accent);
}

/* Loading spinner overlay on button */
.ms-action-btn--loading {
  color: transparent !important;
}
.ms-action-btn--loading::after {
  content:      "";
  position:     absolute;
  top:          50%;
  left:         50%;
  width:        18px;
  height:       18px;
  margin:       -9px 0 0 -9px;
  border:       2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation:    ms-spin .6s linear infinite;
}

/* Inline survey-date edit row */
.ms-survey-date-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}
.ms-survey-date-input {
  flex:          1 1 auto;
  min-width:     160px;
  padding:       8px 10px;
  border:        1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size:     14px;
  color:         var(--text);
  background:    var(--bg);
}

/* Note block */
.ms-note-block {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     4px;
}
.ms-note-input {
  width:         100%;
  min-height:    72px;
  padding:       8px 10px;
  border:        1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size:     14px;
  resize:        vertical;
  font-family:   inherit;
  color:         var(--text);
  background:    var(--bg);
  box-sizing:    border-box;
}
.ms-note-send {
  align-self:   flex-end;
  padding:      8px 20px;
  border:       none;
  border-radius: 6px;
  background:   var(--accent, #007aff);
  color:        #fff;
  font-size:    14px;
  font-weight:  500;
  cursor:       pointer;
}
.ms-note-send:disabled {
  opacity: .4;
  cursor:  not-allowed;
}

/* Cancelled notice */
.ms-cancel-info {
  display:     flex;
  align-items: center;
  padding:     8px 0;
  font-size:   14px;
}

/* ── Phase 5B: Compact modal (date picker / cancel reason) ───────────────── */

.ms-modal--compact {
  max-width:    420px;
  width:        calc(100vw - 32px);
  padding:      20px;
  border-radius: 12px;
  display:      flex;
  flex-direction: column;
  gap:          14px;
}

.ms-modal-compact-title {
  font-size:  17px;
  font-weight: 600;
  margin:      0;
}

.ms-modal-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.ms-modal-hint {
  font-size:   13px;
  color:       var(--muted);
  margin:      0;
  line-height: 1.4;
}

.ms-modal-date-input,
.ms-modal-comment {
  padding:       8px 10px;
  border:        1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--text);
  background:    var(--bg);
  width:         100%;
  box-sizing:    border-box;
}

.ms-date-error {
  display:    none;
  margin-top: 6px;
  color:      #e53e3e;
  font-size:  12px;
  line-height: 1.4;
}
.ms-modal-comment {
  min-height: 72px;
  resize:     vertical;
}

.ms-modal-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
}
.ms-modal-actions .ms-action-btn {
  width:    auto;
  padding:  8px 18px;
  min-height: 36px;
  font-size:  14px;
}

/* Error toast variant */
.ms-toast--error {
  background: var(--error, #c0392b);
}

/* ── Dark theme overrides ──────────────────────────────────────────────────── */

[data-theme="dark"] .ms-card,
[data-theme="dark"] .ms-group-header,
[data-theme="dark"] .ms-modal {
  background: var(--card-bg);
}

[data-theme="dark"] .ms-modal-overlay {
  background: rgba(0,0,0,.6);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .ms-filterbar { padding: 8px 10px 6px; }
  .ms-list      { padding: 6px 10px 80px; }
  .ms-detail-label { min-width: 110px; }
  .ms-filter-from,
  .ms-filter-to   { width: 110px; font-size: 12px; }
}