/**
 * Units — Mobile CSS v5
 * #umLevelsBar foi integrado ao #mobileNavBar (mobile-global.css)
 * Este arquivo cuida do: FAB, action sheet de level, unit cards, bottom sheet
 */

@media (max-width: 767px) {
  :root {
    --um-ink:     #0d0d0d;
    --um-muted:   #7a7570;
    --um-rule:    rgba(13,13,13,.08);
    --um-green:   #22c55e;
    --um-warn:    #f59e0b;
    --um-error:   #e53e3e;
    --um-primary: #6366f1;
    --um-surface: #f7f7f5;
    --um-f-dis:   'DM Serif Display', Georgia, serif;
    --um-f-mono:  'DM Mono', monospace;
    --um-f-body:  'DM Sans', system-ui, sans-serif;
    --um-ease:    cubic-bezier(.22,.68,0,1.2);
    --um-speed:   .2s;
  }
}

/* ══════════════════════════════════════════
   FAB — JS controla display
   ══════════════════════════════════════════ */
#umFab {
  display:        none;
  position:       fixed;
  right:          16px;
  bottom:         calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:        300;
  height:         52px; padding: 0 20px;
  border-radius:  26px;
  background:     var(--um-ink); color: #fff;
  border:         none;
  font-family:    var(--um-f-body); font-size: 14px; font-weight: 700;
  letter-spacing: -.02em;
  align-items:    center; gap: 8px;
  box-shadow:     0 6px 22px rgba(13,13,13,.28);
  cursor:         pointer; overflow: hidden; white-space: nowrap;
  transition:     width .25s var(--um-ease), border-radius .25s var(--um-ease),
                  padding .25s, transform .18s var(--um-ease), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
#umFab .umm-fab-icon  { font-size: 22px; line-height: 1; flex-shrink: 0; }
#umFab .umm-fab-label { flex-shrink: 0; }
#umFab:active { transform: scale(.93); box-shadow: 0 2px 10px rgba(13,13,13,.2); }
#umFab.umm-fab-collapsed {
  width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center;
}
#umFab.umm-fab-collapsed .umm-fab-label { display: none; }
@media (max-width: 767px) { #umFab { display: inline-flex; } }


/* ══════════════════════════════════════════
   ACTION SHEET — gerenciar nível
   Abre via botão ✏ no chip ou long-press
   ══════════════════════════════════════════ */
#umLevelActionSheet {
  display:        none;
  position:       fixed; inset: 0; z-index: 9100;
  background:     rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
  align-items:    flex-end;
}
#umLevelActionSheet.ulas-open { display: flex; }

.ulas-panel {
  width:          100%;
  background:     #fff;
  border-radius:  20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow:       hidden;
  transform:      translateY(100%);
  transition:     transform .3s var(--um-ease);
}
#umLevelActionSheet.ulas-open .ulas-panel { transform: translateY(0); }

.ulas-handle {
  width: 44px; height: 5px; background: rgba(13,13,13,.1);
  border-radius: 3px; margin: 12px auto 0;
}

/* Cabeçalho do action sheet com nome do level */
.ulas-head {
  display:     flex; align-items: center; justify-content: space-between;
  padding:     14px 20px 10px;
  border-bottom: 1px solid var(--um-rule);
  background:  var(--um-surface); gap: 10px;
}
.ulas-head-info { flex: 1; min-width: 0; }
.ulas-eyebrow {
  font-family: var(--um-f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--um-muted);
  display: block; margin-bottom: 2px;
}
.ulas-level-name {
  font-family: var(--um-f-dis); font-size: 19px;
  font-style: italic; color: var(--um-ink); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ulas-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(13,13,13,.07); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--um-muted); cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ulas-close:active { background: rgba(13,13,13,.12); color: var(--um-ink); }

/* Form de renomear — sempre visível dentro do sheet (mais direto) */
.ulas-rename-section {
  padding: 16px 20px 8px;
  border-bottom: 1px solid var(--um-rule);
}
.ulas-rename-label {
  font-family: var(--um-f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--um-muted);
  display: block; margin-bottom: 8px;
}
.ulas-rename-row { display: flex; gap: 8px; align-items: center; }
.ulas-rename-input {
  flex: 1;
  padding: 13px 14px;
  border: 2px solid rgba(13,13,13,.12); border-radius: 10px;
  font-family: var(--um-f-body); font-size: 16px; color: var(--um-ink);
  background: #fff; outline: none; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.ulas-rename-input:focus {
  border-color: var(--um-ink);
  box-shadow: 0 0 0 3px rgba(13,13,13,.06);
}
.ulas-rename-save {
  height: 48px; padding: 0 18px;
  background: var(--um-ink); color: #fff; border: none;
  border-radius: 10px; font-family: var(--um-f-body);
  font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(13,13,13,.2);
  transition: transform .18s var(--um-ease), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.ulas-rename-save:active { transform: scale(.94); box-shadow: 0 1px 4px rgba(13,13,13,.15); }
.ulas-rename-save:disabled { background: #aaa; box-shadow: none; pointer-events: none; }

/* Ações secundárias */
.ulas-actions { padding: 10px 20px 14px; display: flex; flex-direction: column; gap: 6px; }
.ulas-action-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: 12px;
  background: var(--um-surface); border: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.ulas-action-btn:active { background: rgba(13,13,13,.06); }
.ulas-action-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.ulas-action-icon.red { background: rgba(239,68,68,.1); }
.ulas-action-text { font-family: var(--um-f-body); font-size: 14px; font-weight: 600; color: var(--um-ink); }
.ulas-action-sub  { font-family: var(--um-f-mono); font-size: 10px; color: var(--um-muted); margin-top: 1px; letter-spacing: .04em; }


/* ══════════════════════════════════════════
   UNIT CARDS
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
  .unit-card, [class*="unit-card"] {
    border-radius: 14px !important;
    margin-bottom: 0   !important;
    box-shadow:    0 1px 4px rgba(13,13,13,.06), 0 4px 14px rgba(13,13,13,.04) !important;
    overflow:      hidden !important;
    transition:    transform .18s var(--um-ease) !important;
  }
  .unit-card:active, [class*="unit-card"]:active { transform: scale(.98) !important; }
}


/* ══════════════════════════════════════════
   BOTTOM SHEET — criar / editar unit
   ══════════════════════════════════════════ */
.umm-sheet-bd {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .22s ease;
  backdrop-filter: blur(3px);
}
.umm-sheet-bd.umm-sheet-show { opacity: 1; }

.umm-sheet {
  width: 100%; max-height: 88dvh;
  background: #fff; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%);
  transition: transform .3s var(--um-ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.umm-sheet-bd.umm-sheet-show .umm-sheet { transform: translateY(0); }

.umm-sheet-handle {
  width: 44px; height: 5px; background: rgba(13,13,13,.1);
  border-radius: 3px; margin: 12px auto 0; flex-shrink: 0;
}
.umm-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--um-rule);
  flex-shrink: 0; background: var(--um-surface);
}
.umm-sh-eyebrow {
  font-family: var(--um-f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--um-muted); margin-bottom: 3px;
}
.umm-sh-title {
  font-family: var(--um-f-dis); font-size: 21px; font-style: italic; font-weight: 400;
  color: var(--um-ink); letter-spacing: -.02em; margin: 0;
}
.umm-sh-x {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(13,13,13,.08); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--um-muted); cursor: pointer;
  flex-shrink: 0; margin-top: 3px; -webkit-tap-highlight-color: transparent;
}
.umm-sh-x:active { background: rgba(13,13,13,.14); color: var(--um-ink); }
.umm-sheet-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 16px;
}
.umm-sheet-body::-webkit-scrollbar { display: none; }
.umm-sh-field   { display: flex; flex-direction: column; gap: 7px; }
.umm-sh-label {
  font-family: var(--um-f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--um-muted);
}
.umm-sh-inp, .umm-sh-ta {
  width: 100%; padding: 14px 15px;
  border: 2px solid rgba(13,13,13,.1); border-radius: 10px;
  font-family: var(--um-f-body); font-size: 16px; color: var(--um-ink);
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.umm-sh-inp:focus, .umm-sh-ta:focus { border-color: var(--um-ink); box-shadow: 0 0 0 3px rgba(13,13,13,.06); }
.umm-sh-ta { resize: none; min-height: 110px; line-height: 1.65; }
.umm-sh-check {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--um-f-body); font-size: 15px; color: #555; cursor: pointer; padding: 4px 0;
}
.umm-sh-check input { width: 22px; height: 22px; cursor: pointer; accent-color: var(--um-ink); flex-shrink: 0; }
.umm-sh-err {
  font-family: var(--um-f-mono); font-size: 10px; color: var(--um-error); letter-spacing: .04em; display: none;
  padding: 5px 10px; background: rgba(229,62,62,.07); border-radius: 6px; border-left: 3px solid var(--um-error);
}
.umm-sh-err.visible { display: block; }
.umm-sheet-foot {
  display: flex; gap: 10px; padding: 14px 20px 18px;
  border-top: 1px solid var(--um-rule); background: var(--um-surface); flex-shrink: 0;
}
.umm-sh-cancel {
  flex: 1; height: 52px; background: #fff; border: 1.5px solid rgba(13,13,13,.14);
  color: var(--um-muted); font-family: var(--um-f-body); font-size: 14px; font-weight: 600;
  cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent;
}
.umm-sh-cancel:active { border-color: var(--um-ink); color: var(--um-ink); }
.umm-sh-save {
  flex: 2; height: 52px; background: var(--um-ink); color: #fff; border: none;
  border-radius: 10px; font-family: var(--um-f-body); font-size: 15px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; letter-spacing: -.02em;
  box-shadow: 0 4px 16px rgba(13,13,13,.22);
  transition: transform .18s var(--um-ease), box-shadow .18s; -webkit-tap-highlight-color: transparent;
}
.umm-sh-save:active { transform: scale(.95); box-shadow: 0 2px 6px rgba(13,13,13,.15); }
.umm-sh-save:disabled { background: #aaa; box-shadow: none; pointer-events: none; }
@keyframes _um_spin { to{transform:rotate(360deg)} }
.umm-sh-spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:_um_spin .65s linear infinite; }