/* ═══ VARIABLES & RESET ═══ */
:root {
  --bg:        #0d0d1a;
  --surface:   #1a1a2e;
  --surface2:  #22223a;
  --border:    rgba(255,255,255,0.12);
  --accent:    #4a9eff;
  --text:      #e0e0e0;
  --text-dim:  #888;
  --grey:      #4a4a5a;
  --green:     #1e7a1e;
  --green-lit: #27a027;
  --red:       #8b1a1a;
  --red-lit:   #b52020;
  --danger:    #ff6b6b;
  --header-h:  56px;
  --radius:    12px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
}

/* ═══ STRUCTURE DE VUE ═══ */
.view {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#view-usage.hidden,
#view-config.hidden { display: none; }

/* Vue Utilisation : flex column classique */
#view-usage {
  display: flex;
  flex-direction: column;
}

/* Vue Config : fond opaque pour ne pas laisser transparaître la vue derrière */
#view-config {
  background: var(--bg);
}

/* Vue Config : positionnement absolu pour scroll garanti */
#view-config header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

header {
  height: var(--header-h);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
}

.app-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  flex-shrink: 0;
}
.icon-btn:active { background: rgba(255,255,255,0.1); }
.icon-btn-placeholder { width: 44px; flex-shrink: 0; }

/* ═══ VUE UTILISATION ═══ */
#main-usage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* gap non supporté sur flex Chrome < 84 → margin-top sur enfants */
}

.main-btn {
  width: min(80vw, calc(80vh - 80px));
  height: min(80vw, calc(80vh - 80px));
  border: none;
  border-radius: 50%;
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: transform 0.08s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.5px;
  line-height: 1.3;
  word-break: break-word;
}

.main-btn::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
  background: rgba(255,255,255,0.15);
}
.main-btn:active::after { opacity: 1; }
.main-btn:active { transform: scale(0.96); }

.main-btn.grey {
  background: radial-gradient(circle at 40% 35%, #6a6a7a, var(--grey));
  box-shadow: 0 6px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.main-btn.green {
  background: radial-gradient(circle at 40% 35%, var(--green-lit), var(--green));
  box-shadow: 0 6px 40px rgba(30,122,30,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.main-btn.red {
  background: radial-gradient(circle at 40% 35%, var(--red-lit), var(--red));
  box-shadow: 0 6px 40px rgba(139,26,26,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

.main-btn.running {
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 6px 40px rgba(74,158,255,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
  50%       { box-shadow: 0 6px 60px rgba(74,158,255,0.45), inset 0 1px 0 rgba(255,255,255,0.1); }
}

.status-info {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
  min-height: 1.4rem;
  text-align: center;
  letter-spacing: 1px;
}

.countdown-info {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  min-height: 2.4rem;
  text-align: center;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}

.wake-info {
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-align: center;
  min-height: 1rem;
  color: var(--text-dim);
}
.wake-info.warn { color: var(--danger); }

/* Bouton de restauration : contour discret en couleur danger */
.btn-secondary.btn-danger-outline {
  margin-top: 10px;
  color: var(--danger);
  border-color: var(--danger);
}

/* ═══ OVERLAY MENU ═══
   inset: 0 non supporté Chrome < 87 */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-end;
  z-index: 200;
  animation: fade-in 0.15s ease;
}
.overlay.hidden { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.menu-panel {
  background: var(--surface);
  width: 100%;
  max-height: 65vh;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  animation: slide-up 0.2s ease;
}
/* gap non supporté → margin-top sur enfants sauf premier */
.menu-panel > * + * { margin-top: 8px; }

@keyframes slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.menu-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 2px;
  padding: 4px 8px;
}

#sequence-menu-list {
  list-style: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}
#sequence-menu-list li {
  padding: 14px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.05rem;
}
/* gap non supporté → margin-top */
#sequence-menu-list li + li { margin-top: 2px; }
#sequence-menu-list li:active { background: rgba(255,255,255,0.08); }
#sequence-menu-list li.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ═══ VUE CONFIGURATION ═══
   Positionnement absolu avec bornes explicites :
   top/right/bottom/left garantissent la hauteur sans flex */
#config-content {
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Spacer pour que le dernier élément soit entièrement visible */
.scroll-spacer { height: 120px; }

.config-section { margin-bottom: 24px; }
.config-section h2 {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.config-list {
  list-style: none;
  margin-bottom: 10px;
}
.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}

.item-name {
  font-size: 0.98rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.item-actions {
  display: flex;
  flex-shrink: 0;
}
/* gap non supporté → margin-left */
.item-actions > * + * { margin-left: 6px; }

.btn-icon {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  flex-shrink: 0;
}
.btn-icon:active { opacity: 0.7; }
.btn-icon.btn-danger {
  background: rgba(139,26,26,0.25);
  border-color: rgba(255,107,107,0.3);
  color: var(--danger);
}

/* ═══ BOUTONS ═══ */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  letter-spacing: 0.3px;
}
.btn-primary:active { opacity: 0.85; }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 13px 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
}
.btn-secondary:active { opacity: 0.75; }

.btn-preview {
  background: rgba(74,158,255,0.12);
  border: 1px solid rgba(74,158,255,0.4);
  color: var(--accent);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-preview:active { opacity: 0.7; }

/* ═══ FORMULAIRES ═══ */
.form-group { margin-bottom: 8px; }
.form-group label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.95rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--accent); }

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
select option { background: #1a1a2e; }

.form-row {
  display: flex;
}
/* gap non supporté → margin-left */
.form-row > .form-group + .form-group { margin-left: 8px; }
.form-group.half { flex: 1; min-width: 0; }

/* ═══ ÉDITEURS ═══ */
.edit-header {
  display: flex;
  margin-bottom: 10px;
}
.edit-header > * + * { margin-left: 8px; }
.edit-header .btn-primary,
.edit-header .btn-secondary {
  flex: 1;
  width: auto;
  padding: 9px 10px;
  font-size: 0.88rem;
}

.subsequence-editor,
.osc-editor {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sub-number {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.sub-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.btn-row {
  display: flex;
  margin-top: 4px;
}
.btn-row > * + * { margin-left: 8px; }
.btn-row .btn-secondary,
.btn-row .btn-preview {
  flex: 1;
  width: auto;
  padding: 11px 12px;
  font-size: 0.88rem;
}

.add-btn { margin-top: 4px; }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }