/* css/appTiles.css
   Shared styles for the app-tile grid + the permission-gating rules that hide
   tiles/buttons. Included by both dashboard.html and project.html so the two
   pages can never drift (this file is the single source of truth).

   Dashboard-specific tile layout (the ≤767.98px mobile reflow / snap-scroller,
   scoped to #dashTilesBlock) intentionally stays in dashboard.html — it is tied
   to that page's reflow JS and #dashRightSidebar, not to tile identity. */

/* ── Permission gating ─────────────────────────────────────────────── */
body.perm-no-edit    .perm-hide-edit      { display: none !important; }
body.perm-no-diary   .perm-hide-diary     { display: none !important; }
body.perm-rams-none  .perm-hide-edit      { display: none !important; }
body.perm-rams-none  .perm-hide-rams      { display: none !important; }
body.perm-rams-read  .perm-hide-edit      { display: none !important; }
body.perm-diary-none .perm-hide-diary     { display: none !important; }
body.perm-diary-none .perm-hide-diary-all { display: none !important; }
body.perm-diary-read .perm-hide-diary     { display: none !important; }
body.perm-no-hazard    .perm-hide-hazard    { display: none !important; }
body.perm-no-waste     .perm-hide-waste     { display: none !important; }
body.perm-no-coshh     .perm-hide-coshh     { display: none !important; }
body.perm-no-training  .perm-hide-training  { display: none !important; }
body.perm-no-hire      .perm-hide-hire      { display: none !important; }
body.perm-no-materials .perm-hide-materials { display: none !important; }
body.perm-no-carbon    .perm-hide-carbon    { display: none !important; }
body.perm-no-induction .perm-hide-induction { display: none !important; }

/* ── Tile chrome (extracted verbatim from dashboard.html) ──────────── */
.quick-tile {
  width: 80px; height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid rgba(37,99,235,0.2);
  background: #241b15; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quick-tile:hover { border-color: rgba(37,99,235,0.5); background: rgba(37,99,235,0.1); }
.quick-tile span.tile-icon { font-size: 24px; line-height: 1; }
.quick-tile span.tile-label { font-size: 10px; font-weight: 600; color: #F5EFE6; text-align: center; line-height: 1.2; }

/* Custom dark scrollbar for tile row */
.quick-tiles-row::-webkit-scrollbar { height: 6px; }
.quick-tiles-row::-webkit-scrollbar-track { background: rgba(245,239,230,0.05); border-radius: 3px; }
.quick-tiles-row::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.4); border-radius: 3px; }
.quick-tiles-row::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.6); }
.quick-tiles-row { scrollbar-width: thin; scrollbar-color: rgba(37,99,235,0.4) rgba(245,239,230,0.05); }