/**
 * Board Lock & Name Recommendation Styles
 * ========================================
 * Modern toggle-style padlock on home card
 * Name recommendation dialog banner
 */

/* ===== ARRANGE MODE BAR (RETIRED 2026-08-25) =====
   Was a fixed pill at the bottom of the viewport (2026-07-29) carrying the only
   way OUT of arrange mode. Retired on owner instruction: it rendered as a white
   9999px-radius lozenge (~387x49) floating over the board, and since the
   unlocked state persists in localStorage it reappeared on every reload for
   anyone who left arrange mode without pressing Done — reading as a stray white
   oval with no apparent cause.

   The exit moved to the ⋯ menu: "Reposition cards" is now a TOGGLE that reads
   "Done repositioning" while active (js/ui/tz-card-menu.js). padlock.js no
   longer builds this element.

   Same treatment as the retired padlock below: kept as a display:none guard, NOT
   deleted, so a cached shell or an older service-worker bundle that still emits
   the markup can't paint an orphaned control. */
.arrange-mode-bar,
.arrange-mode-bar-text,
.arrange-mode-done {
  display: none !important;
}

/* ===== HOME LOCK BOX WRAPPER (RETIRED 2026-07-29) =====
   The padlock is no longer rendered. These rules are kept only so a cached
   shell that still emits the markup doesn't show an orphaned control. */
.home-lock-box,
.board-lock-btn {
  display: none !important;
}

/* ===== HOME LOCK BOX WRAPPER ===== */
.home-lock-box {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* ===== MODERN BOARD LOCK BUTTON ===== */
.board-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.board-lock-btn i {
  font-size: 10px;
  transition: color 0.2s ease;
}

/* Locked state - teal (active/engaged) */
.board-lock-btn.locked i {
  color: #14b8a6;
}

/* Unlocked state - grayed out (inactive) */
.board-lock-btn.unlocked i {
  color: #9ca3af;
}

/* Hover */
.board-lock-btn:hover {
}

/* Active */
.board-lock-btn:active {
}

/* ===== PRESS-AND-HOLD TO TOGGLE (2026-06-17) =====
   A plain tap no longer flips the lock; the user holds ~500ms. During the hold
   the button fills with a teal ring whose sweep tracks --hold-progress (0→1,
   set per-frame by padlock.js). Position relative so the ::before ring can sit
   behind the glyph. */
.board-lock-btn { position: relative; isolation: isolate; }
.board-lock-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: transparent;
  transition: background 0.15s ease;
}
.board-lock-btn.holding {
  background: rgba(20, 184, 166, 0.08);
}
/* Conic sweep that fills as the hold progresses; --hold-progress is 0..1. */
.board-lock-btn.holding::before {
  background: conic-gradient(
    var(--lock-hold-fill, rgba(20, 184, 166, 0.85)) calc(var(--hold-progress, 0) * 360deg),
    rgba(20, 184, 166, 0.14) 0
  );
  /* punch the centre out so it reads as a ring, not a disc */
  -webkit-mask: radial-gradient(circle at center, transparent 56%, #000 58%);
          mask: radial-gradient(circle at center, transparent 56%, #000 58%);
}
.board-lock-btn.holding i { transform: scale(0.9); }

/* Tap-instead-of-hold nudge: a quick wiggle to hint "hold, don't tap". */
.board-lock-btn.hold-hint {
  animation: lock-hold-hint 0.5s ease;
}
@keyframes lock-hold-hint {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .board-lock-btn.hold-hint { animation: none; }
  .board-lock-btn.holding i { transform: none; }
}

body.dark-mode .board-lock-btn.holding {
  background: rgba(45, 212, 191, 0.10);
}
body.dark-mode .board-lock-btn.holding::before {
  background: conic-gradient(
    var(--lock-hold-fill, rgba(45, 212, 191, 0.9)) calc(var(--hold-progress, 0) * 360deg),
    rgba(45, 212, 191, 0.16) 0
  );
}

/* ===== DARK MODE ===== */
body.dark-mode .board-lock-btn.locked i {
  color: #2dd4bf;
}

body.dark-mode .board-lock-btn.unlocked i {
  color: #6b7280;
}

/* ===== LAYOUT LOCKED STYLES ===== */

body.layout-locked .drag-handle {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* Delete-X is part of "arrange mode". Locked = fully hidden and inert so a
   stray tap can't remove a card; you must first unlock (hold the padlock).
   Deletion is still reachable while locked via the pencil → edit modal. */
body.layout-locked .delete-tz-btn-corner {
  opacity: 0;
  pointer-events: none;
}

body.layout-locked .offset-pill {
  cursor: default;
}

body.layout-locked .timezone-section:not([data-timezone-id="current"]) {
  cursor: default;
}

body.layout-locked .timezone-section:not([data-timezone-id="current"]):active {
  transform: none;
}

/* ===== LAYOUT UNLOCKED STYLES ===== */

body.layout-unlocked .drag-handle {
  opacity: 1;
  cursor: grab;
}

body.layout-unlocked .drag-handle:hover {
  color: var(--primary-500);
}

/* Unlocked = arrange mode: the corner delete-X is persistently visible on every
   removable card (not hover-only), so removal is discoverable while arranging.
   The exact opacity/hover polish lives in style.css; here we just guarantee the
   button is interactive and gently tinted to read as a delete affordance. */
body.layout-unlocked .delete-tz-btn-corner {
  pointer-events: auto;
  color: #ef4444;
}

/* Ownership: a synced teammate on a board you don't own/admin is stamped
   data-can-remove="false". Previously its corner-X was stripped entirely. Now
   such a row still gets a corner affordance — but a HIDE one (data-remove-action
   ="hide"), so you can remove them from YOUR view without kicking them from the
   team. The X only truly disappears if the renderer marks the row unremovable
   AND non-hideable (no resolvable identity), which it never does today; we keep
   the guard for defensiveness. The hide affordance is tinted neutrally (grey),
   not red, so it doesn't read as a destructive team action. */
body.layout-unlocked .timezone-section[data-remove-action="hide"] .delete-tz-btn-corner,
.timezone-section[data-remove-action="hide"] .delete-tz-btn-corner {
  color: var(--text-secondary, #9ca3af);
}

body.layout-unlocked .timezone-section[data-can-remove="false"]:not([data-remove-action="hide"]):not([data-remove-action="leave"]) .delete-tz-btn-corner,
.timezone-section[data-can-remove="false"]:not([data-remove-action="hide"]):not([data-remove-action="leave"]) .delete-tz-btn-corner {
  display: none;
}

body.layout-unlocked .offset-pill {
  cursor: grab;
}

body.layout-unlocked .offset-pill:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

body.layout-unlocked .timezone-section:not([data-timezone-id="current"]) {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body.layout-unlocked .timezone-section:not([data-timezone-id="current"]):hover {
  box-shadow: 0 0 0 2px var(--primary-200, #99f6e4);
}

/* ===== HIDE-FROM-MY-VIEW: un-hide restore bar =====
   Shown at the bottom of a board when the user has hidden one or more members
   from their own view (the reversible "Hide from my board" action for synced
   teammates they can't kick). Tapping restores all hidden rows. Kept quiet — it
   is a recovery affordance, not a primary action. */
.unhide-hidden-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 10px 14px;
  border: 1px dashed var(--border-color, #d1d5db);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.unhide-hidden-bar:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.03));
  color: var(--text-primary, #111827);
  border-color: var(--primary-400, #2dd4bf);
}

.unhide-hidden-bar i {
  color: var(--primary-500, #14b8a6);
}

/* ===== DARK MODE ===== */

body.dark-mode.layout-unlocked .timezone-section:not([data-timezone-id="current"]):hover {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

body.dark-mode .unhide-hidden-bar {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .unhide-hidden-bar:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

/* ===== EMPTY-GROUP "ADD TEAMMATES" CTA ===== */
/* Shown inside .timezone-list-wrapper on a freshly-created empty group board.
   Prominent but dismissible — the "prominent optional add step" for the
   create-then-add flow. */
.empty-group-add-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 10px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--primary-200, #99f6e4);
  border-radius: 12px;
  background: var(--primary-50, #f0fdfa);
}

.empty-group-add-cta-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.empty-group-add-cta-icon {
  font-size: 1.25rem;
  color: var(--primary-500, #14b8a6);
  flex: 0 0 auto;
}

.empty-group-add-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.empty-group-add-cta-text strong {
  color: var(--text-primary, #111827);
  font-size: 0.95rem;
}

.empty-group-add-cta-text span {
  color: var(--text-secondary, #6b7280);
  font-size: 0.83rem;
}

.empty-group-add-cta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.empty-group-add-cta-later {
  background: transparent;
  border: none;
  color: var(--text-secondary, #6b7280);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 10px;
}

.empty-group-add-cta-later:hover {
  color: var(--text-primary, #111827);
  text-decoration: underline;
}

body.dark-mode .empty-group-add-cta {
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(20, 184, 166, 0.08);
}

body.dark-mode .empty-group-add-cta-text strong {
  color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .empty-group-add-cta-text span,
body.dark-mode .empty-group-add-cta-later {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .empty-group-add-cta-later:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== NAME RECOMMENDATION DIALOG ===== */

.name-recommendation-dialog {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: 480px;
  width: calc(100% - 32px);
  animation: nameRecSlideUp 0.3s ease-out;
}

@keyframes nameRecSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.name-rec-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.name-rec-icon {
  color: var(--warning-500, #f59e0b);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.name-rec-text {
  flex: 1;
  min-width: 0;
}

.name-rec-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.name-rec-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.name-rec-dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid chip + darker glyph so the X stays visible on the light rec card
     (2026-06-17 X-visibility pass; was transparent + slate-400 ≈2.7:1). */
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  cursor: pointer;
  border-radius: var(--radius-full, 9999px);
  transition: all 0.15s ease;
}

.name-rec-dismiss:hover {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-300, #cbd5e1);
  color: var(--slate-700, #334155);
}

body.dark-mode .name-rec-dismiss {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

/* Dark mode */
body.dark-mode .name-rec-content {
  background: var(--surface-secondary, #1e293b);
  border-color: var(--border-default, #334155);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .name-rec-dismiss:hover {
  background: var(--surface-hover, #334155);
}

/* Mobile */
@media (max-width: 768px) {
  .name-recommendation-dialog {
    bottom: 12px;
    width: calc(100% - 24px);
  }
  .name-rec-content {
    padding: 12px;
  }
}

/* ============================================
   FOCUS MODE - Hide padlock (not visible in compact view)
   ============================================ */
body[data-focus-mode] .board-lock-btn {
    display: none !important;
}