/* ============================================================
   Home Admin Layout Sidebar
   Build marker: Home Admin Layout May 4
   ----
   Provides an admin-only drawer/sidebar that opens from Home and
   lets Company Admins customize which Home square buttons appear,
   show/hide each, and drag-reorder them. Also includes mobile
   bottom-sheet mode for narrow viewports.
   ============================================================ */

/* Floating toggle button on Home.
   Lily FAB lives at right:22px;bottom:22px;z-index:140 — keep this
   button stacked ABOVE the Lily FAB so it never overlaps / blocks
   the Lily tap target on mobile.  Lower z-index than Lily AND offset
   so the two never overlap on narrow screens. */
.hal-toggle{
  position:fixed;right:16px;bottom:96px;z-index:130;
  display:none;align-items:center;gap:.5rem;
  padding:.65rem .9rem;border-radius:999px;
  background:#141310;color:#fff;border:1.5px solid #141310;
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;cursor:pointer;
  box-shadow:0 8px 22px rgba(20,19,16,.35);
}
.hal-toggle:hover{background:#1A1916;border-color:#1A1916}
.hal-toggle.show{display:inline-flex}
.hal-toggle .hal-toggle-ic{font-size:16px;line-height:1}
.hal-toggle .hal-toggle-tag{font-size:10px;background:#FF6B00;color:#fff;padding:2px 6px;border-radius:4px;letter-spacing:.6px}

/* Backdrop */
.hal-backdrop{
  position:fixed;inset:0;background:rgba(20,19,16,.42);z-index:160;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.hal-backdrop.show{opacity:1;pointer-events:auto}

/* Drawer */
.hal-drawer{
  position:fixed;top:0;right:0;bottom:0;width:420px;max-width:96vw;
  background:#fff;z-index:170;box-shadow:-22px 0 60px rgba(20,19,16,.32);
  transform:translateX(110%);transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.hal-drawer.show{transform:translateX(0)}

.hal-hdr{
  padding:1rem 1.25rem;border-bottom:1px solid #d8e8e5;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:linear-gradient(180deg,#f6fbfa 0%,#fff 100%);
}
.hal-hdr h2{
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  color:#141310;margin:0;line-height:1.1;
}
.hal-hdr .hal-sub{font-size:12px;color:#4a6b65;margin-top:2px}
.hal-hdr .hal-close{
  background:transparent;border:0;color:#141310;font-size:20px;cursor:pointer;
  padding:6px 10px;border-radius:8px;
}
.hal-hdr .hal-close:hover{background:#eef9f7}

.hal-perm{
  margin:.75rem 1.25rem 0 1.25rem;
  background:#fff8e6;border:1px solid #f3dca0;color:#7a5a07;
  border-radius:10px;padding:.55rem .75rem;font-size:12px;font-weight:600;
}
.hal-perm strong{color:#7a5a07}

.hal-body{
  flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;
}

.hal-section-title{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#4a6b65;
  margin:.4rem 0 .4rem;
}

.hal-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.75rem;
}
.hal-stat{
  background:#f4faf9;border:1px solid #d8e8e5;border-radius:10px;
  padding:.55rem .6rem;text-align:center;
}
.hal-stat strong{
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  color:#141310;display:block;line-height:1;
}
.hal-stat span{font-size:10px;color:#4a6b65;text-transform:uppercase;letter-spacing:.4px;font-weight:600}

.hal-companybar{
  display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem;
  background:#f6fbfa;border:1px solid #d8e8e5;border-radius:10px;
  padding:.5rem .65rem;
}
.hal-companybar label{font-size:11px;font-weight:700;color:#4a6b65;text-transform:uppercase;letter-spacing:.4px}
.hal-companybar select{
  flex:1;padding:.4rem .5rem;border:1px solid #d8e8e5;border-radius:8px;
  font-size:13px;font-family:'Barlow',sans-serif;background:#fff;
}

.hal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.hal-row{
  background:#fff;border:1.5px solid #d8e8e5;border-radius:12px;
  padding:.55rem .65rem;display:flex;align-items:center;gap:.55rem;
  cursor:grab;transition:all .15s;
}
.hal-row.dragging{opacity:.4;border-style:dashed}
.hal-row.drag-over{border-color:#FF6B00;background:#eef9f7}
.hal-row.disabled{opacity:.55;background:#f4f7f6}
.hal-row .hal-grip{
  font-size:14px;color:#8aada8;cursor:grab;padding:0 4px;user-select:none;
  font-family:monospace;letter-spacing:-2px;
}
.hal-row .hal-row-ic{
  width:34px;height:34px;border-radius:8px;background:#eef9f7;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.hal-row .hal-row-main{flex:1;min-width:0}
.hal-row .hal-row-title{font-weight:600;color:#141310;font-size:13.5px}
.hal-row .hal-row-meta{font-size:11px;color:#4a6b65;margin-top:1px}
.hal-row .hal-row-actions{display:flex;gap:.35rem;align-items:center}
.hal-row .hal-move{
  width:26px;height:26px;border-radius:7px;border:1px solid #d8e8e5;
  background:#fff;color:#141310;font-size:11px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;font-family:inherit;line-height:1;
}
.hal-row .hal-move:hover:not(:disabled){border-color:#FF6B00;color:#FF6B00;background:#eef9f7}
.hal-row .hal-move:disabled{opacity:.35;cursor:not-allowed}
.hal-row .hal-toggle-sw{
  position:relative;width:38px;height:22px;border-radius:999px;
  background:#cbd5e1;cursor:pointer;transition:background .15s;flex-shrink:0;
}
.hal-row .hal-toggle-sw::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:left .15s;
}
.hal-row .hal-toggle-sw.on{background:#FF6B00}
.hal-row .hal-toggle-sw.on::after{left:18px}

.hal-actions{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;
}
.hal-actions button{
  padding:.45rem .7rem;border-radius:8px;font-size:12.5px;font-weight:600;
  cursor:pointer;border:1.5px solid #d8e8e5;background:#fff;color:#141310;
  font-family:'Barlow',sans-serif;
}
.hal-actions button:hover{border-color:#FF6B00;color:#FF6B00}
.hal-actions button.primary{background:#FF6B00;color:#fff;border-color:#FF6B00}
.hal-actions button.primary:hover{background:#D95A00;border-color:#D95A00;color:#fff}

.hal-preview{
  margin-top:1rem;border:1.5px dashed #d8e8e5;border-radius:14px;
  padding:.75rem;background:#f4f7f6;
}
.hal-preview-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.5rem;
}
.hal-preview-hdr h3{
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;
  color:#141310;margin:0;text-transform:uppercase;letter-spacing:.5px;
}
.hal-preview-hdr .hal-preview-pill{
  font-size:10px;background:#141310;color:#fff;padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;
}
.hal-preview-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
}
.hal-preview-tile{
  background:#fff;border-radius:10px;border:1px solid #eef4f3;
  padding:.5rem;text-align:center;font-size:11px;color:#141310;font-weight:600;
}
.hal-preview-tile .hal-preview-ic{font-size:18px;display:block;margin-bottom:2px}
.hal-preview-empty{font-size:12px;color:#4a6b65;font-style:italic}

/* Visual marker on Home tiles when admin reorder is applied (drag enabled) */
.home-action[data-hal-key]{position:relative}
.home-action[data-hal-key].hal-reorderable{cursor:grab}
.home-action[data-hal-key].hal-reorder-dragging{opacity:.4}
.home-action[data-hal-key].hal-reorder-over{outline:2px dashed #FF6B00;outline-offset:2px}

/* Mobile bottom-sheet treatment */
@media (max-width:720px){
  .hal-drawer{
    top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;height:80vh;
    border-top-left-radius:18px;border-top-right-radius:18px;
    transform:translateY(110%);
  }
  .hal-drawer.show{transform:translateY(0)}
  /* On mobile: keep the admin toggle ABOVE the Lily FAB so it can
     never block the Lily tap target. Lily FAB is at bottom:22px,
     ~60px tall — admin toggle sits at bottom:96px so the two are
     visually stacked with whitespace between them.  Smaller padding
     to keep it compact in the corner, and a shorter label so it
     never grows wide enough to overlap the Lily FAB.  */
  .hal-toggle{
    bottom:96px;right:14px;
    padding:.45rem .65rem;font-size:11.5px;
    z-index:130; /* Lily FAB is 140 — Lily wins any tap-stack tie. */
  }
  .hal-toggle .hal-toggle-tag{display:none}
  .hal-stats{grid-template-columns:repeat(3,1fr)}
  .hal-preview-grid{grid-template-columns:repeat(2,1fr)}
}

/* Belt + suspenders: ensure no fixed-position overlay can intercept
   taps meant for the Lily FAB.  The Lily FAB sits at z-index:140; we
   give it the highest pointer priority among floating Home controls
   on every viewport.  pointer-events:auto guards against parent
   stacking contexts inadvertently disabling clicks. */
.lily-fab{ pointer-events:auto !important; }
@media (max-width:720px){
  .lily-fab{
    z-index:160 !important;     /* above hal-toggle (z=130) */
    pointer-events:auto !important;
  }
}